> For the complete documentation index, see [llms.txt](https://flowmate.gitbook.io/flowmate-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flowmate.gitbook.io/flowmate-documentation/integration-center/embed-integration-center.md).

# Embed Integration Center

To integrate the **Integration Center** into your application, FlowMate provides a Web Component that can be embedded anywhere you need.

To get started, follow these steps:

* **Generate and pass a User Token** to authenticate users.
* **Embed the Web Component** into your application.
* **Whitelist your Domain** with FlowMate 

## Create and authenticate user

<mark style="color:orange;">`POST`</mark> `/user`

When integrating FlowMate, each user from your system must first be created within FlowMate. This happens automatically the first time you call the corresponding endpoint. The user will be **created with the User ID** you provide, and all future authentication requests for this user must use the same identifier.

To ensure consistency, we recommend using a **hash of an identifier** from your own system. This way, you can reliably generate the same ID on each request.

Once the user exists in FlowMate, you need to authenticate them. This requires generating a **User Token**, which is done using your **Admin Token**. Since the Admin Token is highly sensitive, this step must always be handled **server-side** to prevent exposure.&#x20;

To generate a User Token, make a **POST request** to:

```arduino
https://api.platform.openintegrationhub.com/impersonate
```

The request body should include:

* The **User ID**, ensuring the correct user is authenticated.
* The **authentication credentials**, allowing the user to be automatically authenticated with the API.

Here, you can find the supported authentication types and the required values for each:

{% tabs %}
{% tab title="API Key" %}

* key
* headerName (optional)
  {% endtab %}

{% tab title="Basic Auth" %}

* username
* passphrase
  {% endtab %}

{% tab title="oAuth 2.0" %}

* access\_token
* refresh\_token
* expires\_in
* scope
  {% endtab %}

{% tab title="Session Auth" %}

* inputFields
* accessToken

*Note: The exact fields which need to be provided for this credential type rely on your own system implementation, but usually entails a username and password. Passing the individual accessToken only is insufficient, as the other data is required to refresh the token when it expires*
{% endtab %}
{% endtabs %}

**Request Body:**

```json
{
  "username": "1234abc",
  "credential": {
    "key": TOKEN
  }
}
```

You will receive a token in the response, which you can then pass to the web component. This token expires every 3 hours.

**Response:**

```json
{
  "token": "f9MPJQz6aRfQH4qVnkzUFbU3-4n-BAjiBXQKmED4_e15KK745Heq9KY2M7XknbGi-zO3XHF--OnbZUyqTHEO-qwXwzFX8K-isRZ2lclMzXDZiD_2DahQ1rfynbZHfn_VFi8VfHda5FiLfhcmxa20WL2TcPq82_lpgKN0nSTwCD4",
  "id": "62460554305401543e4e60c1"
}
```

### Pass additional parameters

Additionally, you can pass optional parameters to customize the user’s experience or set specific permissions:

**Request Body:**

```json
{
  "username": "1234abc",
  "credential": {
    "key": TOKEN,
    "additionalParameters": {
      "parameter": 12345cdef
    }
  }
}
```

## Embed Web Component

Next, Integrate the Web Component into your page to provide users with access to the **Integration Center**. When embedding the component, you can define **Groups** and **Languages** to customize the user experience.

* **Groups:** Groups define user permissions. Each integration can be assigned to a specific group, ensuring that only users belonging to that group can view and use the integration.
* **Language:** The Integration Center supports multiple languages. You can pass the appropriate language code for each user to display the interface in their preferred language. (Currently supported: german (de), english (en))

Include the web component script in your page:

{% code overflow="wrap" %}

```html
<script src="https://integration-center.cloud-ecosystem.workers.dev/build/integration-center.js"></script>
```

{% endcode %}

and then load the component as with any HTML tag, and pass the user token as a parameter in the component.&#x20;

{% code overflow="wrap" %}

```html
<div class="content-icenter"><integration-center token="{$userToken}" groups="dev,test" language="de"></integration-center></div>
```

{% endcode %}

{% hint style="warning" %}
We also strongly recommend the use of groups for testing new integrations. For example, use a group “QA” and transfer it to FlowMate. You must then also give the user this group in your app.
{% endhint %}

## Add Connector to Account & Whitelist your Domain

Finally, you need to link your **Connector** to your account and whitelist your domain to ensure proper access and security.

**Add connector to account:**

In the FlowMate platform, navigate to[ **Settings > Profile**](https://app.openintegrationhub.com/settings/profile) and select your connector under **"Default Connector"**.

**Whitelist domain:**

To embed the Integration Center securely, you must whitelist your domain with FlowMate. Navigate to [**Settings > Domains**](< https://app.openintegrationhub.com/settings/domain-management>) in the FlowMate platform and add your domains to the whitelist.