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.

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).

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.

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
}

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.