By using the response that you will receive from either the Applications API or the SDK method, you can now render and display your apps on the frontend. See a sample implementation of how we displayed the apps using the response. Display Apps on the Frontend Cobalt connect lets your users connect their integration accounts. It stores the credentials securely and lets you make authorized API calls on your users’ behalf (linked account in Cobalt). Sequence Diagram for Displaying Apps on Frontend

​
Building Custom UI

To build a custom UI for your integrations, you can do so by using the Cobalt SDKs or the List Applications API. If you want to create your own frontend for the integration and want to fetch information about the various integrations that will be available to the end-users, you can do so by using the
1

Request

Call the .getapp() method provided in the SDK or the List Applications API to get a list of enabled apps.
cobalt.getApp()  // to get a list of all apps
cobalt.getApp("slack")  // to get details of a single app, e.g. slack
You can also fetch information about a single application by providing the app slug in the Get Application API.
2

Handle Response

In the response, you will receive an array containing the List of Applications that were enabled for the end-user. You can find information about the applications like name, slug, icon URL, the app was connected by user or not etc which can be used to build the Custom UI of your app.
Response
[
	{
	"name": "Salesforce",
	"icon": "https://cobalt-app-logos.s3.ap-south-1.amazonaws.com/salesforce/logo.png",
	"description": "Salesforce is a leading enterprise customer relationship manager (CRM) applications.",
	"auth_type": "oauth2",
	"type": "salesforce",
	"app_id": "669e0767d6c828b822c4f650",
	"tags": [
		"CRM"
	        ],
	"version": {
		"_v": "1.0.0",
		"description": "Salesforce is a leading enterprise customer relationship manager (CRM) applications."
	            },
	"slug": "salesforce",
    "reauth_required": false
    },
    {
        "name": "Copper",
        "icon": "https://cobalt-app-logos.s3.ap-south-1.amazonaws.com/copper/logo.png",
        "description": "Copper is a customer relationship management (CRM) platform focused on automation and simplicity. It is built for businesses that use Google Workspace.",
        "auth_type": "keybased",
        "tags": [
            "CRM"
        ],
        "auth_input_map": [
            {
                "name": "api_token",
                "label": "API Key",
                "placeholder": "Please enter the API key",
                "required": true,
                "type": "text"
            },
            {
                "name": "email",
                "label": "Email Address",
                "placeholder": "Please enter the email of the token owner",
                "required": true,
                "type": "text"
            }
        ],
        "version": {
            "_v": "1.0.0",
            "description": "Copper is a customer relationship management (CRM) platform focused on automation and simplicity. It is built for businesses that use Google Workspace."
        },
        "slug": "copper",
        "reauth_required": false
    }
]
Learn more about the Embedded and Seamless flow of Cobalt Connect here.
You have successfully received the response and can now render the applications on your frontend using it.

​
Checkpoint + Next Step

You have now successfully built a Custom UI for your end users which displays all the integrations enabled for them. Next step is to Manage Connections for your customers.