3.1 iframe vs native embed

Choosing the right path: two ways of Embed integration

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

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.

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

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.

HTML

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

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:

HTML

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

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:

3.2 Customizing CSS