Help Center
Embed

How do I embed the connection flow in my app?

Updated 2 weeks ago

This guide provides a step-by-step process for embedding Bindbee React SDK, including adding organization details, generating an API key, and creating a link token.

Start by adding your organisation details. Navigate to the settings and select the organisation settings.

Here, upload your brand logo,

favicon logo,

and choose a custom brand color. Save the changes

Generate API Key

Use the API Key you have already stored. In case if misplaced it, then regenerate it.

Note: If you are changing the API Key, all your existing integrations may stop working as you would have already used the old account token (API Key) for those integrations.

Navigate to the API key section

Regenerate the API key, and retrieve it.

Copy and save the API key safely on your local machine.

Follow Documentation to proceed with Bindbee Embed

Using Bindbee embed is a four-step process outlined in the documentation.

  1. Step 1: Generate a link_token to initialize a Bindbee Embed session for your end user.

  2. Step 2: Embed Bindbee Embed in your frontend using the React SDK.

  3. Step 3: Retrieve the temporary_token upon successful integration.

  4. Step 4: Exchange the temporary_token for a connector_token, which authenticates future requests to the Unified API.

To get the link token, make a POST request to the url

"https://api.bindbee.dev/api/embedded/v1/link/create-link-token"

with the API Key generated above and the following payload.

data = {
"end_user_data": {
"org_name": ,# Unique entity name of your customer's organisation. Ex: "Netflix" 
"origin_id": # Unique ID to Identify your customer's organisation. Ex: "netflix_unique_id"
},
"category": ,# category. Ex: "HRIS"
"integration": # Integration name. Ex: "hibob"
}

To get the integration name, go to the documentation and go to the Integrations Section. All integration names are listed there.

For example, if you want to connect with Hibob, the category would be "HRIS" and the integration name would be "hibob"

Write the logic to retrieve the link_token in a function, handleConnect which can be called on clicking a button.

Step 2 : Install React SDK

Install the Bindbee React SDK by copying the command

npm install --save @bindbee/react-link

OR

yarn add @bindbee/react-link

from the documentation and running it in your project terminal.

Step 3 : Getting Temporary token

Define functions for success and close events. The success function is called after a successful integration and returns a temporary_token. Use this temporary_token to get your connector_token.

Step 4 : Get connector token from the temporary token

Fetch the connector_token by making a GET request to the URL

"https://api.bindbee.dev/api/embedded/v1/connectors/connector_token/{temporary_token}"

using the API key retrieved earlier. Replace the temporary_token in the above url with your actual temporary_token.

The close function should handle the exit procedure gracefully if the user clicks the close button on the integration card.

Run Project

For example, to integrate with Bamboohr, click on the Connect button. You can call the function to get the link token and then call the function returned by the Bindbee React SDK. This will generate the temporary_token which will be used to get the connector_token internally.

The integration card made by Bindbee React SDK will appear. Follow the required procedure to authenticate your connector, then click on Connect to view the entire process.

The connection should now be successfully established.

Was this helpful?
Was this helpful?