This quickstart guuide uses our React SDK to embed a native integration hub into your application.

The React SDK is the quickest way to get started with Versori Embedded, however it also offers the least amount of control over the UI.

​
Disclaimer

There are limitations in this approach at the time of writing, but we are working on improving this functionality in future releases:

  • There is no pagination support for the integration hub as of now
  • Dynamic Variables are not supported

Before you start, it’s expected that you already have a React application. If not, we recommend using Vite to quickly scaffold a new project.

Next, install our SDK packages using your package manager of choice:

npm install @versori/embed-react

Ensure that at least version 2.x.x+ of the @versori/embed-react package is installed, as this is the version that supports the platform API.

Now you can render our VersoriEmbeddedProvider component in your application, and pass in some configuration:

import { VersoriEmbeddedProvider, VersoriEmbeddedRenderer } from '@versori/embed-react';
import { CredentialCreate } from '@versori/sdk/embedded';

export type ComponentProps = {
    // Your Organisation ID
    orgId: string;

    // A JWT token representing your user, with the "sub" claim set to the desired End User's `externalId`. This JWT
    // is issued by a Signing Key from your own API and should authenticate your user in the same way any other
    // endpoints are authenticated)
    token: string;
};

export function Component({ orgId, token }: ComponentProps) {
    return (
        <VersoriEmbeddedProvider
            options={{
                orgId,
                endUserAuth: {
                    type: 'jwt',
                    token,
                }
            }}
        >
            <VersoriEmbeddedRenderer />
        </VersoriEmbeddedProvider>
    );
}

The token in the above example is a JWT with the subject claim set to the externalId of the End User. The VersoriEmbeddedProvider then knows which environments the End User is activated on, and will display the relevant integrations in the UI. You can see the Security section for more information on how to generate this token.

This example is the most minimal setup required to get started. The VersoriEmbeddedProvider component configures an EmbedClient instance and exposes it over a React context. The VersoriEmbeddedRenderer component is a pre-built component which renders the integration hub UI in your application, handling displaying the correct UI elements based on whether the End User has the integrations activated.

Given the above, the VersoriEmbeddedRenderer is optional, and you can build your own UI components consuming the EmbedClient context directly if this suits your application better.

For more information on using the SDK, the source code is available in the versori/versori-js-sdk repository.

This repository also contains an example React application with the SDK along with an example client website that uses Cookies to store the JWT token so that it is persisted across page reloads and redirects to the Embedded Integration Hub.