JavaScript SDK

Overview

This guide provides step-by-step instructions to embed your application using a JavaScript snippet. Follow the steps below to integrate the UnifyApps SDK into your webpage.

Step-by-Step Instructions

Step 1 : Get Required Parameters

• 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

• 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:', error);
    }
  }
  
  // Fetch session ID
  const { sessionId } = await makeRequest();

Step 2: Obtain Credentials

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

• HOST_NAME

• AUTH_TOKEN

• IDP_ID

Step 3: Copy the JavaScript Snippet

Copy the following JavaScript snippet and paste it into your HTML file:

<
script
>
    window.unifyAppsSettings = {
        host: '<HOST_NAME>',
        token: '<SESSION_ID>',
        identityProviderId: '<IDP_ID>',
        applicationId: '<APPLICATION_ID>',
        pageId: '<PAGE_ID>',
        pageInputs: '<PAGE_INPUTS>',
        containerEl: '<CONTAINER_ELEMENT>',
    };
    (function() {
        var w = window,
            ua = w.UnifyApps;
        if (typeof ua === 'function') {
            ua('update', w.unifyAppsSettings);
        } else {
            var d = document,
                u = function() {
                    u.c(arguments);
                };
            u.q = [];
            u.c = function(args) {
                u.q.push(args);
            };
            w.UnifyApps = u;
            w.UnifyApps('init');
            var l = function() {
                var s = d.createElement('script');
                s.type = 'text/javascript';
                s.async = true;
                s.src = window.unifyAppsSettings.host + '/lib/delta-matrix/ua-web-sdk.js';
                var x = d.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
            };
            if (document.readyState === 'complete') {
                l();
            } else if (w.attachEvent) {
                w.attachEvent('onload', l);
            } else {
                w.addEventListener('load', l, false);
            }
        }
    })();
</
script
>

Step 4: Configure the Required Parameters

Replace the placeholders in the script with the actual values.

• Required Parameters:

  • host – The base URL of the host application.

  • token – A temporary session ID used for authentication.

  • identityProviderId – The identity provider ID needed for authentication.

  • applicationId – The unique identifier of your application (retrievable from the UnifyApps platform overview page).

• Optional Parameters:

  • pageId – The unique identifier for a specific page within the application, used to designate the overview page. This can be retrieved from the application's page.
    Example: pageId: 'Homepage'

  • pageInputs – An object containing the necessary inputs required to render the application's page. Multiple page inputs can be passed at once.
    Example: pageInputs: ‘{ inputA: 1, inputB: 2, inputC: "abc" }’

  • containerEl – The HTML element where the application should be rendered (defaults to <body> if not provided).
    Eg. - document.getElementById("container");

Step 5: Verify the Integration

• Open the HTML file in a browser.

• Ensure that the application loads correctly inside the specified container.

• If any issues arise, check the browser console for errors.

UnifyApps SDK Methods

• UnifyApps ('update', updatedUnifyAppsSettings) - To update any of UnifyApps global settings

• UnifyApps ('goToPage', {pageId, pageInputs}) - To change pageId or pageInputs use this method. In case of copilot chat, if the chat is closed when the method is called, it will be opened first and then the corresponding navigation updates will be made.

• Copilot Chat specific methods:

  • UnifyApps('show') - Open the copilot chat

  • UnifyApps('hide') - Close the copilot chat, launcher will still be visible(if configured)