1.4 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 over the majority of the page is rendered in the main area.
iframe embed visualized - ACME is you, the SaaS company
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.
Code on the integrations page rendered per Connect button (connector):
HTML
1
<a href="/settings/integrations-connect?embeddedId={UUID4 provided by the app}&token={jwtToken}&lang=de" target="_blank">Connect</a>
Copied!
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.
​
Code on the 2nd page:
HTML
1
// Renders the base iframe
2
​
3
<iframe
4
    id="iframe"
5
    src="https://api.dynamicinsight.com/embedded/?embeddedId={UUID4 provided by the DI app of the embed with the Asana flow group}"
6
    width="1024"
7
    height="800"
8
>
9
</iframe>
10
​
11
​
12
// JS code to copy query string parameters and append them in the iframe src
13
​
14
<script language="javascript" type="text/javascript">
15
    var queryParams = window.location.search
16
    var queryParams = queryParams.replace('?', '&')
17
    let url = document.getElementById('embedded').src
18
    var readyURL = url.concat(queryParams)
19
    document.getElementById('embedded').src = readyURL;
20
</script>
Copied!
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.
Custom CSS (colors and styles) can be added as per here.

1.3 Proprietary connector setup

1.5 Consent screen

Last modified 7mo ago

Copy link

Contents

iframe embed

Native embed