Build your own Frontend

Retrieve a list of all integrations available to connect using the List Applications API or .getApplications() method and display them in your UI.

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>'

With the above call you can get all the details related to an appliction for a user.

Install the Cobalt Frontend SDK for JavaScript that you want to use. You can install by either using npm package manager or directly in browser by using the script tag.

<!-- use a specific version -->
<script src="https://cdn.jsdelivr.net/npm/@cobaltio/cobalt-js@3.0.1"></script>

<!-- use a version range instead of a specific version -->
<script src="https://cdn.jsdelivr.net/npm/@cobaltio/cobalt-js@3"></script>
<script src="https://cdn.jsdelivr.net/npm/@cobaltio/cobalt-js@3.0"></script>

<!-- omit the version completely to use the latest one -->
<!-- you should NOT use this in production -->
<script src="https://cdn.jsdelivr.net/npm/@cobaltio/cobalt-js"></script>

Initialize the javascript SDK using the Session token.

Cobalt provides the flexibility for you to manage your customers’ application connections. The .connect() method lets your customers to connect to an application platform, authorizing you to access the platform APIs and data on their behalf.

cobalt.connect("slack") // opens a new tab for oauth apps
cobalt.connect("twilio", {
  number: <"Registered number">,
  sid: "ACCOUNT_SID",
}) // saves the auth data for key based apps

The .disconnect() method similarly, lets the user to disconnect from the application platform, revoking the authorization and deleting any and all configurations of the Linked account saved for that particular application.

cobalt.disconnect("slack")

Once the user has successfully authenticated in their platform, he is redirected back to your app integration page. Use the .config() method to find an exisiting config or creating a new config for the linked account.

cobalt.config({
  slug: "slack",
  config_id: "OPTIONAL_ID_FOR_THIS_CONFIG",
  labels: {}, // optional dynamic labels
})

The .config() method provides you with all the published workflows and settings input for the user. The user can now enable the workflows, enter data for the settings and map fields. These updates to the config can be made using the .updateConfig() method.

cobalt.updateConfig({
  slug: "slack",
  config_id: "OPTIONAL_ID_FOR_THIS_CONFIG",
  fields: {
    "64da0b57c9ae95561bb0a24d": "C044U7Q074J"
  },
  workflows: [
    {
      id: "64d1fac58716dc5065127ffe",
      enabled: true,
      fields: {
        "64da0b57c9ae95561bb0a24f": "C044U7Q074J"
      }

    }
  ]
})