# 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](https://291121471-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McrRFZHYH27bqKzOVDd%2F-Mf3MBCgEbkX86vPouSE%2F-Mf3OKKQXz18uuDeTFtR%2Fimage.png?alt=media\&token=306832d4-34a5-444b-a1de-3e3d7267e4e9)

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](https://docs.locoia.com/embed-white-label-portal/2.-configure-embed/embed-integration-via-sso#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](https://291121471-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McrRFZHYH27bqKzOVDd%2F-Mf3MBCgEbkX86vPouSE%2F-Mf3OF0oyDztZA_w4lzf%2Fimage.png?alt=media\&token=c73a4132-a8a4-45db-ae5e-823c7d58c49f)

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="customizing-css" %}
[customizing-css](https://docs.locoia.com/embed-white-label-portal/embed-admin-setup/3.-integrate-embed/customizing-css)
{% endcontent-ref %}