Display Apps on the Client-side

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

Enable & Configure Apps

To enable the apps that you want to use in Cobalt, go to the Apps page in the Cobalt dashboard. You will see a list of the available apps. Choose one or more apps to enable. The apps that you enable will become available to your users in the Connect flow.

Key-based apps do not require any additional configuration.

OAuth apps by default use Cobalt credentials. This makes it easy to get started and connect integrations right away. However, once you’re ready to ship your integrations with Cobalt, you should use your own OAuth app credentials (client ID and client secret). This will make sure that users see your brand instead of Cobalt when they connect integrations.

You can find the App Setup instructions for some of the popular integrations that we support here.

Building Custom UI

If you want to build a custom UI for your integrations, you can do so by using the Cobalt APIs or the Cobalt Connect SDK available in JavaScript and React.

Cobalt API for UI

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 List Applications API.

Request: This API will list all the apps that were enabled above. Make a GET request to the /application endpoint with the linked_account_id of the user.

cURL

curl --request GET \
  --url https://api.gocobalt.io/api/v2/public/application \
  --header 'linked_account_id: <linked_account_id>' \
  --header 'x-api-key: <api-key>'

Handle Response : The /application endpoint will respond with 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.

200 Response

[
    {
        "name": "Drive",
        "icon": "https://cobalt-app-logos.s3.ap-south-1.amazonaws.com/google_drive/logo.png",
        "description": "Google Drive is Google's file sync app that lets you store all of your files online alongside your Google Docs documents, and keep them synced with all of your devices.",
        "auth_type": "oauth2",
        "tags": [
            "Office"
        ],
        "version": {
            "_v": "1.0.0",
            "description": "Google Drive is Google's file sync app that lets you store all of your files online alongside your Google Docs documents, and keep them synced with all of your devices."
        },
        "slug": "google_drive",
        "reauth_required": false
    },
    {
        "name": "Docusign",
        "icon": "https://cobalt-app-logos.s3.ap-south-1.amazonaws.com/docusign/logo.png",
        "description": "Docusign is an electronic signature technology and digital transaction management service for facilitating electronic exchanges of signed documents.",
        "auth_type": "oauth2",
        "tags": [],
        "version": {
            "_v": "1.0.0",
            "description": "Docusign is an electronic signature technology and digital transaction management service for facilitating electronic exchanges of signed documents."
        },
        "connected": true,
        "connected_accounts": [
            {
                "identifier": "1975dc48-d708-4370-b3c8-861af0df644d",
                "connectedAt": "2023-05-22T07:52:31.270Z"
            }
        ],
        "slug": "docusign",
        "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
    }
]

You can also fetch information about a single application by providing the app slug in the Get Application API.

Cobalt SDK for UI

If you prefer to develop using the SDKs provided by Cobalt, then the .getApp() method will get you the list of applications enabled in Cobalt. It returns the application details for the specified application, provided the application is enabled in Cobalt. If no application is specified, it returns all the enabled applications.

Method Call: Call the .getapp() method provided in the SDK and pass the slug of the application for which information needs to be fetched. If no slug is provided, you will get a list of apps.

JS SDK

cobalt.getApp()  // to get a list of all apps
cobalt.getApp("slack")  // to get details of a single app, e.g. slack

Response : The instance method of Cobalt Returns: Promise.<Application> - The application details.

Response

{
	"name": "Slack",
	"icon": "https://cobalt-app-logos.s3.ap-south-1.amazonaws.com/slack/logo.png",
	"description": "Slack is a platform for team communication: everything in one place, instantly searchable, available wherever you go. Offering instant messaging, document sharing and knowledge search for modern teams.",
	"auth_type": "oauth2",
	"type": "slack",
	"app_id": "64c357c739ec788238ab5f95",
	"tags": [
		"Communication"
	],
	"version": {
		"_v": "1.0.0",
		"description": "Slack is a platform for team communication: everything in one place, instantly searchable, available wherever you go. Offering instant messaging, document sharing and knowledge search for modern teams."
	},
	"slug": "slack",
    "reauth_required": false
}

Learn more about the Embedded and Seamless flow of Cobalt Connect here.

Render Application on your Frontend

By using the Response that you received from either the API or the SDK, you can now render and display your apps on the frontend.

See a sample implementation of how we displayed the apps using the response.

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.

Documentation

Implementation Guide

Concepts

Display Apps on the Client-side

Enable & Configure Apps

Building Custom UI

Render Application on your Frontend

Checkpoint + Next Step

Documentation

Implementation Guide

Concepts

​Enable & Configure Apps

​Building Custom UI

​Render Application on your Frontend

​Checkpoint + Next Step

Enable & Configure Apps

Building Custom UI

Render Application on your Frontend

Checkpoint + Next Step