JavaScript SDK

Add Javascript SDK to your Front-end

📘
If you are using one of the popular JS frameworks, check out a framework-specific article:

React

Vue.js

First, install @integration-app/sdk NPM package:

npm install @integration-app/sdk

Alternatively, you can install @integration-app/sdk over any public CDN:

<html lang="en">
  <head>
    <!-- Use latest version -->
    <script
      src="https://cdn.jsdelivr.net/npm/@integration-app/sdk/dist/bundle.js"
    ></script>

    <!-- Use specific version -->
    <script
      src="https://cdn.jsdelivr.net/npm/@integration-app/[email protected]/dist/bundle.js"
    ></script>

    <script>
      console.log(IntegrationAppClient)
    </script>
  </head>
  <body></body>
</html>

Then, initialize the SDK with an Authentication Token:

import { IntegrationAppClient } from '@integration-app/sdk'

const integrationApp = new IntegrationAppClient({
  // Test authentication token. You will need to replace it with the real one.
  token: '',
})

In this example we use the test token you can find on the Settings page of your workspace.
You will need to replace it with a real authentication token later (see Authentication).

To verify that everything works, let's open our drop-in integration UI:

await integrationApp.open()

Dynamic Token

If it is more convenient for you to fetch token dynamically instead of providing static value, you can use fetchToken instead:

import { IntegrationAppClient } from '@integration-app/sdk'

const integrationApp = new IntegrationAppClient({
  // Test authentication token. You will need to replace it with the real one.
  async fetchToken() {
    return '';
  },
})

This option also automatically handles token expiration. If SDK was initialized long ago and token had time to expire, it will be automatically re-fetched before making new API requests.

SDK Reference

To see the full list of SDK methods check out the JavaScript API Reference

Updated 12 days ago