Integration von Invitario in fremde Webseiten mittels iFrame

Integration von Invitario in fremde Webseiten mittels iFrame

Integration mittels iFrame

Falls Sie eine von Invitario unabhängige Eventwebsite betreiben, steht Ihnen die Integration von Invitario mittels iFrame zur Verfügung. So können Sie ausgewählte Seiten sowie Anmeldeformulare in Ihre eigene Eventwebsite integrieren und auch hier die volle Funktionalität von Invitario nutzen.
Die iFrame-Integration ist für jede Seite Ihrer innerhalb von Invitario erstellten Eventwebsite möglich. Möchten Sie nur das Anmeldeformular integrieren, dann ist die Seite als iFrame einzufügen, auf der das Anmeldeformular in Invitario eingebunden ist. Die Integration des iFrames wird mit ein paar Zeilen Javascript realisiert. Den dementsprechenden Code finden Sie im Bearbeiten-Modus der jeweiligen Seite Ihrer Eventwebsite. Binden Sie dafür den iframe-resizer von David J. Bradshaw ein.

Beispiel für iFrame-Integration mittels 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">Registrierung</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

https://live.invitario.com/de/eventname/registration/?accessCode=XXX

as the URL of the iFrame.

Wenn Sie eine besonders lange Seite bzw. ein längeres Formular per iFrame integrieren, sollten Sie sicherstellen, dass nach einem Seitenwechsel (oder nach dem Klicken auf einen An- oder Abmeldebutton) das iFrame wieder an den Beginn der Seite "scrollt". Dazu können Sie auf der "Parent Page" folgendes Attribut an das iFrame-Element anfügen:
  1. <iframe ... onload="window.scrollTo(0, 0);"></iframe>