To embed Albato into your platform quickly and easily, we provide a customer-facing iFrame with no-code integrations and user settings. Our integration library is available here. The iFrame URL is specified in the partner's (your) Albato account. Below is an example of an HTML code for connecting an iFrame with temporary access tokens:
<iframe width="100%" height="1000px" src="https://iframe-link-from-embedded-settings/user/auth/token?session_token=user_token&r=%2Fbundle"></iframe>Copy
For end-to-end iFrame authorization, insert the user token obtained during the user registration into the iFrame address.
To authorize your user in the iFrame, Albato uses cookies that are seen as third-party cookies by the partner's domain. Since many browsers block third-party cookies, we suggest setting up a proxy for the iFrame address through the partner’s (your) domain. For instance, if your domain is partner.com and the Albato iFrame is on partner-name.albato.net, create a proxy domain, e.g., integrations.partner.com, that redirects to partner-name.albato.net.
Step-by-step guide for embedding the iFrame into your app frontend:
Insert the following <style> tag inside the <head> tag:
<style>
iframe {
width: 1px;
min-width: 100%;
border: none;
height: 1000px;
overflow: hidden;
}
</style>
2. id="albato" is default; you don't need to change it. The width and height may not be specified in the iFrame (already set in styles):
<iframe id="albato" src="https://iframe-link-from-embedded-settings/user/auth/token?token=user_token&r=%2Fbundle"></iframe>Copy
<iframe id="albato" src="https://iframe-link-from-embedded-settings/user/auth/token?session_token=user_token&r=%2Fbundle"></iframe>Copy
3. Paste the following script before the closing body tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js"></script>
<script>
iFrameResize({enablePublicMethods: true, heightCalculationMethod: 'lowestElement'}, '#albato')
</script>