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.
Add Organization Details
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.
Step 1: Generate a
link_tokento initialize a Bindbee Embed session for your end user.Step 2: Embed Bindbee Embed in your frontend using the React SDK.
Step 3: Retrieve the
temporary_tokenupon successful integration.Step 4: Exchange the
temporary_tokenfor aconnector_token, which authenticates future requests to the Unified API.
Step 1: Generate Link Token
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.