By clicking "Accept All", you agreed to the storing of cookies on your device to enhance your experience, analytics on site usage and in our marketing efforts. Find out more in our privacy policy.

Unify Apps Logo
Loading navigation...
Unify Integrations
Logo
Platform Embed

Platform Embed

Logo

5 mins READ

On this page

React

Overview

The @unifyapps/platform-react package allows integration of UnifyApps platform components such as ConnectionManager, AutomationManager, and Connectors into React applications. It requires authentication using a session token and identity provider ID.

Step-by-Step Instructions

Step 1: Install the Package

To install the package, use npm:

npm install @unifyapps/platform-react

Step 2: 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 3: Obtain Credentials

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

  • HOST_NAME

  • AUTH_TOKEN

  • IDP_ID

  • NPM Access Details - A token will be provided to enable you to download the NPM package.

    • Create a .npmrc  file and add this code, and replace <TOKEN> with given token from unifyapps team

@unifyapps:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=<TOKEN>

Step 4: Import Required Modules

In your React project, import the necessary components from the package:

import React from 'react';
import ReactDOM from 'react-dom';
import { UAProvider, ConnectionManager } from '@unifyapps/platform-react';


Step 5: Configure Provider Options

Define the options object with the required properties:

const options = {
  host: '<HOST_NAME>',           
  token: '<SESSION_ID>',
};
Example: 
const options = {
  host: 'https://platform.unifyapps.com',
  token: '123456789/123456789',
};


Step 6: Define Styles and Render the Application

Define styles to ensure the embedded module fits within the container and render the ConnectionManager inside UAProvider. Finally, mount the App component in your entry file (index.js or index.tsx):

const FULL_SIZE = { width: '100%', height: '100%' };

const App = () => (
  <
UAProvider
 options={options}>
    <
ConnectionManager
 style={FULL_SIZE} />
  </
UAProvider
>
);

ReactDOM.render(<
App
 />, document.getElementById('root'));

Step 7: To Update the component from outside, use the ref prop :

 const App = () => {
  const ref = useRef(null);
  const customNavigate = useCallback(() => {
    ref.current?.router?.push('/');
  }, []);
  return (
    <
UAProvider
 options={options}>
      <
ConnectionManager
 ref={ref} style={FULL_SIZE} />
    </
UAProvider
>
  );
};

Props

  • UAProvider

    • host (string, required) – Base URL of the host application.

    • token (string, required) – Authentication token in the format <IDP_ID>/<SESSION_ID>.

  • UI Components Available components:

    • ConnectionManager – Manages platform connections.

    • AutomationManager – Handles automation workflows.

    • Connectors – Manages third-party integrations.

  • UI Component Props

    • id (optional) – Loads a specific entity.

    • style (optional) – Defines inline styles for the container.

    • className (optional) – Adds a CSS class name for the container.

    • ref (optional): Router Ref to control the component from outside.

JavaScript SDK

Overview

The UnifyApps JavaScript SDK allows seamless embedding of platform modules like AutomationManager, ConnectionManager, and Connectors into web applications. This guide provides an overview of how to integrate it using JavaScript.

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) 

    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();

    Make an authentication request using Node.js:

Step 2: Obtain Credentials

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

  • HOST_NAME

  • AUTH_TOKEN

  • IDP_ID

Step 3: Integrate the UnifyApps JavaScript SDK

<
script
>
  window.uaPlatformSettings = {
    host: '<HOST_NAME>',
    token: '<SESSION_ID>',
    module: 'AutomationManager', // Options: AutomationManager | ConnectionManager | Connectors
    // containerEl: document.getElementById('containerId') // Optional: Specify a container element
  };

  (function() {
    var w = window, ua = w.uaPlatform;
    if (typeof ua === 'function') {
      ua('update', w.uaPlatformSettings);
    } else {
      var d = document, u = function() { u.c(arguments); };
      u.q = []; u.c = function(args) { u.q.push(args); };
      w.uaPlatform = u; w.uaPlatform('init');

      var l = function() {
        var s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://cdn.unifyapps.com/lib/delta-platform/sdk-loader.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
>

iFrame

Overview

The iFrame embedding method allows you to integrate your UnifyApps application into any external website by inserting an <iframe> tag.

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 iFrame Snippet

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

<
iframe
 id="unifyapps-embed" src="URL" 
width="100%" height="1000" scrolling="no" frameborder="0" style="border:none;"></
iframe
>

Step 4: Embed in Your Website

Paste the modified iFrame code into any webpage where you want to embed the UnifyApps application.

Step 5: Verify the Integration

  • Open the webpage and check if the embedded page loads correctly.

  • Inspect the browser console for any errors if issues arise.

Best Practices

  1. Generate a session ID by creating an authentication token for UnifyApps on the server side, behind your local authentication system.

  2. Maintain separate environments for production and development, and configure them to point to their respective UnifyApps environments.

Last updated : 14 April 2025, 02:54 PM

On this page