IFrame Embedding

How can I embed the Agenda App in my website?

You can embed the Agenda App into your website using an iFrame.

There are two approaches to how the Agenda is scrolled. Most simply it can be scrolled within the iFrame, or the content can be displayed so it is scrolled with the page.

Scrolling within iFrame

Use this code replacing the ‘src’ element with the published address for the Agenda App. It will style the Agenda App so it presents at the same height as the users viewport.

<iframe style="height: 100vh; width: 100%; border: 0;" scrolling="no" frameborder="0" marginheight="0" marginWidth="0" name="Agenda" src="https://your-site.events.lineup.ninja/">

If you have a banner with a fixed height above the iFrame you can adjust the height style to remove the height of the banner. This will scale the height of the agenda iFrame to take up the remaining space under the banner. Replace 100px in this example with the height of the banner.

<iframe style="height: calc(100vh - 100px); width: 100%; border: 0;" scrolling="no" frameborder="0" marginheight="0" marginWidth="0" name="Agenda" src="https://your-site.events.lineup.ninja/">

Scrolling within page

The agenda can be presented at full height, without it’s own scroll bars, however this will result in the navigation scrolling off the top of the screen as the user scrolls the page. You also need to add an additional script to the page which will enable your site and the Agenda App to communicate to share scroll positions. If you would like to keep the navigation visible as the user scrolls then use the ‘Scrolling within iFrame’ above.

  • In the Agenda App configuration scroll to the bottom and choose Advanced and pick Whole Agenda is Displayed Without Scrolling for iFrame Scroll Mode.
  • Save and Publish the Agenda.
  • Add this iFrame code to your page, taking note of the id property and updating the src to your published app url.
<iframe id='lineup-ninja-agenda-app' style="height: 100vh; width: 100%; border: 0;" scrolling="no" frameborder="0" marginheight="0" marginWidth="0" name="Agenda" src="https://your-site.events.lineup.ninja/"></iframe>
  • Add this javascript to your page after the iFrame (or configure the initialize to fire after the iFrame is inserted). Making these changes
    • Replace the hostname in the URL with the hostname of your Agenda App.
    • Set iFrameSelector to match the id of the iFrame.
    • If the page is being scrolled then leave elementToScrollSelector as null, if the iFrame is placed within a different scrollable element then provide a query selector for that element.
    • If the page scrolls under a header then provide the selector for that header as headerSelector.
<script type='module'>
    import { initialize } from 'https://your-site.events.lineup.ninja/integration/1/iframe-integration.js';
    initialize({
        iFrameSelector: '#lineup-ninja-agenda-app',
        elementToScrollSelector: null,
        headerSelector: null,
    });
</script>

I use a Content Security Policy. What is required?

If the page you are including the iFrame on uses a Content Security Policy (CSP) you need to add two URLs to the policy, either in child-src or frame-src.

Firstly include the url for your published agenda app eg

https://my-event.events.lineup.ninja

If you are using the Outlook and Mac Calendar appointments then also add

https://guest-api.lineup.ninja/#

Next - ExpoFP

Still can’t find what you’re looking for? Email support@lineupninja.com and one of the team will get back to you as soon as possible.​​​​​