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.
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
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
<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.
Code on the 2nd page:
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.Last modified 9mo ago