---
title: Bindbee Embed Integration Steps
slug: bindbee-embed-integration-steps
docTags: 
createdAt: 2025-10-10T12:13:19.000Z
---

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.

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/ba199205-43c3-4c74-b94b-18a0f0a7d545.png)

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/fe0cac3b-ca2d-4c36-904d-9306258d90db.png)

Here, upload your brand logo,

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/b5ffde28-fe23-4ac0-ae1e-7b6a19646eee.png)

favicon logo,

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/462e8643-9e18-4145-80fa-22cd4a887d76.png)

and choose a custom brand color. Save the changes

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/347bd2b1-6eba-4a14-809a-e8f04b45932c.png)

# Generate API Key

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

:::BlockQuote
**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

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/03232604-9cdf-439e-8462-ef7446501f20.png)

Regenerate the API key, and retrieve it.

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/b331c569-caf7-4b0c-b035-f5006de9aabb.png)

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](https://www.npmjs.com/package/@bindbee/react-link).
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.

## Step 1: Generate Link Token

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/036700de-c5f6-4719-8d96-592b9a5c8caa.png)

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

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

with the API Key generated above and the following payload.

```json
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.

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/7bc55436-84df-46b8-8e0f-1356f65cc5ad.png)

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

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/e8280a5c-feb6-4a4c-8c2a-ebff5db99c3d.png)

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

```json
npm install --save @bindbee/react-link
```

OR

```json
yarn add @bindbee/react-link
```

from the documentation and running it in your project terminal.

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/fd53a70c-4738-4c09-9c11-d54a9e5a145d.png)

## 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

```json
"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`.

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/aaaff173-10c7-4b0d-be6b-57ca8bd3d8eb.png)

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.

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/752eae5e-2e2f-4446-8efb-08651694530a.png)

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.

![](https://usercontent.us.prod.clueso.io/ebba768b-93c7-4a16-835c-91ebc7664eef/9603e36c-0d0a-4faf-9766-5e01fd7ffc2c/5c1079e3-5141-4b9a-8651-7a56fd318688/images/039aa24e-0c21-453b-a27f-2d22f3a50130.gif)

The connection should now be successfully established.