Integration of Invitario into external websites using iFrame

Integration of Invitario into external websites using iFrame

Integration via iFrame

If you operate an event website independent of Invitario, you can integrate Invitario using iFrame. This allows you to embed selected pages and registration forms from Invitario into your event website while utilizing the full functionality of Invitario.
The iFrame integration is possible for every page of your event website created within Invitario. If you want to integrate only the registration form, embed the page in which the registration form is included in Invitario. The iFrame integration is achieved with a few lines of JavaScript. You can find the corresponding code in the edit mode of the respective page of your event website. Use the iframe-resizer by David J. Bradshaw for this.

Example of iFrame integration using JavaScript:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Invitario</title>
  6.     <meta name="viewport" content="width=device-width">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  9.     <!--[if lte IE 8]>
  10.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/ie8.polyfils.min.js"></script>
  11.     <![endif]-->
  12. </head>
  13. <body>
  14. <h2 style="text-align:center">Registration</h2>

  16. <iframe src="https://live.invitario.com/de/eventname/registration/" width="100%" frameborder="0" scrolling="no" style="width:100%; border: none; overflow: hidden" onload="window.scrollTo(0, 0);"></iframe>

  18. <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  19. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.min.js"></script>
  20. <script type="text/javascript">
  21.     iFrameResize({
  22.         checkOrigin: false
  23.     });
  24. </script>
  25. </body>
  26. </html>

2. Half a second can easily be won by using


as the URL of the iFrame.

If you integrate a particularly long page or form via iFrame, make sure that after a page change (or after clicking a registration or cancellation button), the iFrame scrolls back to the top of the page. To do this, add the following attribute to the iFrame element on the "Parent Page":
  1. <iframe ... onload="window.scrollTo(0, 0);"></iframe>


    • Related Articles

    • Using Zoom with Invitario

      1. Connecting your Zoom account As Account Admin go to your account > Administration > Integrations > Zoom (View integration) > Connect You will be forwarded to a login screen from Zoom Enter your credentials (if you a already logged in to your ...

    • Integration of an external event website into the invitation process

      With Invitario, you can also create your own event website outside of your Invitario account while still taking advantage of a personalized invitation and registration process. To do this, it is only necessary to send each contact an invitation with ...

    • HubSpot integration

      The HubSpot integration from Invitario uses HubSpot Marketing Event (learn more here) to synchronize events and contacts from Invitario to HubSpot. Enable HubSpot Integration If you are not logged into your HubSpot account at the time of linking, you ...