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>