Embed the web app

Embed the entire web app

To embed the complete web app in another web page such as your website, use this code:

Replace the bold text with the URL of your web app. The iframe will then contain the entire web app, including side menu and title bar where you can sign in.

Embed a web app page

If don't want to embed the whole web app, but just a page of it without the side menu, you can use our embed mode. Just add ?mode=embed after the page URL you want to embed and link to that in your iframe. An example: https://societyabc.floq.live/event/event-2024/dailyprogramme?mode=embed will embed the programme page like this:

Automatically adjust iframe height

If you do not want to explicitly define the height of the iframe yourself, but want it to be adjusted to the content, there is a script you can add on your website to do so.

First, make sure that the id of the iframe is floq-live-iframe, and set the source URL to with the page you want to embed. An example:

<iframe id="floq-live-iframe" src="https://societyabc.floq.live/event/event-2024/dailyprogramme?mode=embed" ></iframe>

Then, add the follow script at the end of the <body> tag in the HTML of your website.

<script>function setIframeDimensions(height){const iframe=document.getElementById('floq-live-iframe');if(!iframe)return;const iframeHeight=height||1e3;iframe.style.width='100%';iframe.style.height=iframeHeight+'px'}window.addEventListener('message',event=>{if(event.data.type==='UPDATE_HEIGHT'){const newHeight=event.data.payload;setIframeDimensions(newHeight)}});window.onload=()=>setIframeDimensions();</script>

The iframe width will then be the same as the <div> it's positioned in, and its height will be adjusted to the page content. This way the embedded page fits perfectly in your website.