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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flowmate.gitbook.io/flowmate-documentation/integration-center/embed-integration-center.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.