Contents

Cancel

Recommended Articles

  1. unify-apps

    Indexing

    Unify AI

    Transform raw content into searchable knowledge through AI-powered indexing and vector embeddings

  2. unify-apps

    Snowflake as Destination

    Unify Data

    Load and transform your data seamlessly into Snowflake's cloud data warehouse with UnifyApps' native connectivity and flexible staging options.

  3. unify-apps

    Quentn

    Unify Integrations

    Integrate your app with Quentn to automate marketing campaigns, manage contacts, and optimize customer engagement.

  4. unify-apps

    Connector SDK

    Platform Tools

    Create custom connectors within the Unify platform to unify workflows

  5. unify-apps

    JobNimbus

    Unify Integrations

    Integrate your application with JobNimbus to manage leads, track jobs, and streamline your workflow processes efficiently

  6. unify-apps

    IMAP

    Unify Integrations

    Integrate your app with IMAP to enable seamless email synchronization, real-time access, and enhanced communication workflows.

  7. unify-apps

    Basin

    Unify Integrations

    Basin transforms form handling from a backend headache into a simple integration—capture submissions, trigger automations, and manage data flows without touching server code, giving you more time to build what matters

  8. unify-apps

    Preview Your Work

    Unify Automations

    Effortlessly review & monitor your automation’s performance

  9. unify-apps

    QuickBooks

    Unify Integrations

    Integrate your app with QuickBooks to streamline accounting, automate invoicing, and manage finances effortlessly

  10. unify-apps

    FTP/FTPS

    Unify Integrations

    Connect your app with FTP/FTPS to automate secure file transfers and streamline data exchange across systems.

  11. unify-apps

    Data-Sync by Avoid Duplicate Operations Setting

    Unify Data

    Prevent infinite loops in bidirectional data synchronization by creating record hashes that ensure one-way data flow across connected systems.

  12. unify-apps

    Filters

    Unify Applications

    Enable users to refine, search, and sort data effortlessly across dashboards and datasets

  13. unify-apps

    Insided

    Unify Integrations

    Integrate your app with Insided to enhance customer engagement, streamline community management, and drive self-service support.

  14. unify-apps

    Reverse Polling

    Unify Data

    Reverse Polling technique efficiently retrieves recent data from APIs that return results in chronological order (oldest first), optimizing pagination and data processing strategies when working with time-ordered data sources.

  15. unify-apps

    Facebook Ads

    Unify Integrations

    Connect your app with Facebook Ads to automate campaign management, optimize ad performance, and track marketing success.

  16. unify-apps

    Duplicate Field

    Unify Integrations

    Create independent copies of your data fields to enable multiple mappings while preserving original values for validation and complex workflows.

  17. unify-apps

    Gainsight

    Unify Integrations

    Integrate your app with Gainsight to enhance customer success, automate engagement workflows, and drive retention

  18. unify-apps

    Simplesat

    Unify Integrations

    Integrate your app with Simplesat to collect real-time customer feedback, measure satisfaction, and improve service quality.

  19. unify-apps

    Livestorm

    Unify Integrations

    Integrate your app with Livestorm to streamline webinar hosting, automate event management, and enhance audience engagement.

  20. unify-apps

    Application Connectors

    Unify Data

    Instantly leverage 30+ pre-built application connectors to extract, transform, and load your business-critical data between systems with UnifyApps' no-code integration platform.

React SDK

React SDK

Logo

3 mins READ

Overview

This section provides instructions to embed your application using the UnifyApps SDK React package. This method is ideal for React applications and provides a more modular approach.

Step-by-Step Instructions

Step 1: Install the Package

Run the following command to install the UnifyApps React SDK:

npm install @unifyapps/sdk-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 and Configure the SDK

Create a React component that renders the application using UAProvider and WebApplication.

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

const options = {
  host: '<HOST_NAME>',
  token: '<SESSION_ID>',
  identityProviderId: '<IDP_ID>',
};

const webApplicationProps = {
  applicationId: '<APPLICATION_ID>',
  pageId: '<PAGE_ID>',
  pageInputs: '<PAGE_INPUTS>',
};

const App = () => (
  <
UAProvider
 options={options}>
    <
WebApplication
 {...webApplicationProps} />
  </
UAProvider
>
);

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

Step 5: Configure Required Parameters

Replace the placeholders with actual values:

  • UAProvider Props:

    • host – The base URL of the host application.

    • token – A temporary session ID for authentication.

    • identityProviderId – The identity provider ID needed for authentication.

  • WebApplication Props:

    • applicationId – The unique identifier of the application.
      This can be retrieved from the application's overview page.
      Eg.- applicationId: 'App-xyz',

    • pageId (optional) – 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" }’