# 3.1 iframe vs native embed

There are two ways to integrate Embed. Integration via **iframe embed** is ideal for SaaS companies who have few integrations or non so far and want to start building integrations with Locoia primarily. **Native embed** is ideal if you already have integrations and want to selectively add integrations managed by Locoia.

## iframe Embed

In this case, the iframe takes ever the majority of the page and is rendered in the main area.

![iframe embed visualized - ACME is you, the SaaS company](/files/-Mf3OKKQXz18uuDeTFtR)

In this case, in order to embed the iframe in your web app, copy the generated iframe code and insert into your frontend code.

The iframe setup is explained here under [Embed integration via SSO](/embed-white-label-portal/embed-admin-setup/2.-configure-embed/embed-integration-via-sso.md#2-creating-the-white-label-i-frame-within-your-app).

## Native Embed

In this case, you are integrating a new integration (connector) just as you would usually. However, the link (in the example below the Asana "Connect" button) links to a different 2nd page in your app. This 2nd page host the embed iframe and is framed by your regular app. It will contain only Asana and automation Flows of Asana - we will explain in a minute how this is done.

Advantages of native embed:

* Your **integrations page keeps a native look** and any new integration via Locoia is displayed in the same list as your own proprietary ones (below in the example under Settings > Integrations)
* The **user stays within your app** and is not redirected somewhere else

![Native embed visualized - ACME is you, the SaaS company](/files/-Mf3OF0oyDztZA_w4lzf)

As mentioned, the "Connect" button contains a link with all the needed query-string parameters to render the iframe, but links to the above mentioned 2nd page.

For the "Connect" button you should insert the code given below. 

{% tabs %}
{% tab title="HTML" %}

```markup
<a href="/settings/integrations-connect?embeddedId={UUID4 provided by the app}&token={jwtToken}&lang=de" target="_blank">Connect</a>
```

{% endtab %}
{% endtabs %}

The relative page url `/settings/integrartions-connect` needs to be replaced by the relative URL of the newly created 2nd integration page you choose. If you want to open the page in a new window, you can add `target="_blank"` as an attribute.

The 2nd page opened by clicking on "Connect" button should contain the code provided below:&#x20;

{% tabs %}
{% tab title="HTML" %}

```markup
// Renders the base iframe

<iframe
    id="iframe"
    src="https://api.locoia.com/embedded/?embeddedId={UUID4 provided by the DI app of the embed with the Asana flow group}"
    width="1024"
    height="800"
>
</iframe>


// JS code to copy query string parameters and append them in the iframe src

<script language="javascript" type="text/javascript">
    var queryParams = window.location.search
    var queryParams = queryParams.replace('?', '&')
    let url = document.getElementById('embedded').src
    var readyURL = url.concat(queryParams)
    document.getElementById('embedded').src = readyURL;
</script>
```

{% endtab %}
{% endtabs %}

If you add **more than one integrations** via Locoia, the **2nd page** remains the same and there is no additional work. You simply replace the `embeddedId` with the respective integration group on the links of the respective Connect buttons, as per the screenshot above. Note, you also need to encode the JWT with the **respective secret of the embed**, which can be found in your Locoia under Settings > Embed.

## iframe customization

For both iframe and native embed you can adjust the `id`, `name`, and the `width` and `height` of the iframe.

You can also make further CSS customization, you can learn more about that here:

{% content-ref url="/pages/-MeOb3ibcpiRTvbiFPGd" %}
[3.2 Customizing CSS](/embed-white-label-portal/embed-admin-setup/3.-integrate-embed/customizing-css.md)
{% endcontent-ref %}


---

# 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://docs.locoia.com/embed-white-label-portal/embed-admin-setup/3.-integrate-embed/iframe-vs-native.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.