Embedded Integrations
Logo
JavaScript SDK

JavaScript SDK

Logo

3 mins READ

Overview

The Platform JavaScript SDK (window.uaPlatform) mounts a platform module, such as AutomationManager, ConnectionManager, ApplicationManager or Connectors, into any web page. This guide shows how to integrate it using JavaScript.

Step-by-Step Instructions

Step 1: Get Required Parameters

  1. HOST_NAME


    The host name is the URL where the platform application is hosted. Example: If the platform is hosted at https://platform.unifyapps.com, then the host is:
    https://platform.unifyapps.com

  2. Obtain Credentials


    To obtain the required credentials, contact support@unifyapps.com for:
    • HOST_NAME

    • AUTH_TOKEN

    • IDP_ID

For how AUTH_TOKEN, IDP_ID and the session ID fit together, see the Authentication overview.

Step 2: Generate ACCESS_TOKEN (Session ID)

Make an authentication request using Node.js:

const URL = '<HOST_NAME>/auth/createUserExternalLoginSession';
const AUTH_TOKEN = '<AUTH_TOKEN>';
const data = {
  identityProviderId: '<IDP_ID>',
  formData: {
    username: '<USER_NAME>',
    name: '<NAME>',
    email: '<USER_EMAIL>',
  },
};
async function makeRequest() {
  try {
    const response = await fetch(URL, {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${AUTH_TOKEN}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const responseData = await response.json();
    console.log('✅ Success:', responseData);
    return responseData;
  } catch (error) {
    console.error('❌ Error during authentication request:', error.message);
  }
}
// Fetch session ID using an IIFE to allow top-level await
(async () => {
  const result = await makeRequest();
  if (result?.sessionId) {
    const { sessionId } = result;
    console.log('Session ID:', sessionId);
  } else {
    console.error('Failed to retrieve session ID.');
  }
})();

Step 3: Integrate the UnifyApps JavaScript SDK

<script>
  window.uaPlatformSettings = {
    host: '<HOST_NAME>',
    token: '<SESSION_ID>',
    module: 'AutomationManager', // AutomationManager | ConnectionManager | ApplicationManager | Connectors
    containerEl: document.getElementById('<CONTAINER_ID>'),
  };
  (function () {
    var w = window,
      ua = w.uaPlatform;
    if (typeof ua === 'function') {
      // If the SDK is already loaded, update the settings
      ua('update', w.uaPlatformSettings);
    } else {
      // SDK not yet loaded: queue the settings
      var d = document,
        u = function () {
          u.c(arguments);
        };
      u.q = [];
      u.c = function (args) {
        u.q.push(args);
      };
      w.uaPlatform = u;
      w.uaPlatform('init');
      // Load the SDK script
      var loadSdk = function () {
        var s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = `${window.uaPlatformSettings.host}/lib/delta-platform/sdk-loader.js`;
        var firstScript = d.getElementsByTagName('script')[0];
        firstScript.parentNode.insertBefore(s, firstScript);
      };
      // Attach script loader based on browser readiness
      if (document.readyState === 'complete') {
        loadSdk();
      } else if (w.attachEvent) {
        w.attachEvent('onload', loadSdk);
      } else {
        w.addEventListener('load', loadSdk, false);
      }
    }
  })();
</script>

The SDK loader is served from your platform host: the snippet loads it from ${window.uaPlatformSettings.host}/lib/delta-platform/sdk-loader.js. The module setting accepts AutomationManager, ConnectionManager, ApplicationManager or Connectors.

Settings

Setting

Description

host

The base URL of your UnifyApps platform (HOST_NAME). Required.

token

The temporary session ID generated in Step 2. You can also pass it as <IDP_ID>/<SESSION_ID>.

module

The platform module to render: AutomationManager, ConnectionManager, ApplicationManager or Connectors.

moduleProps

Props passed to the module: id opens a specific entity (for example, one automation or connection); className and style style the module container.

containerEl

The element the module renders into. If you leave it out, the SDK creates a full-screen container on top of your page, so pass a container element in most cases.

Change the Module

Call update with the settings you want to change. For example, to switch to the Connection Manager:

uaPlatform('update', { module: 'ConnectionManager' });

FAQs

Which platform modules can I embed?

Set module to AutomationManager, ConnectionManager, ApplicationManager or Connectors. To embed a UnifyApps Application page instead, use the Application Embed JavaScript SDK.

How do I open a specific automation or connection?

Pass its ID in moduleProps, for example moduleProps: { id: '<ENTITY_ID>' }.

Where does the embedded module render?

In the element you pass as containerEl. If you leave it out, the SDK creates a full-screen container on top of your page.