iFrame Code erstellen und in die Website einbinden

Die Integration des edoobox Buchungstools in Ihre Webseite kann auf verschiedenste Arten ausgeführt werden. Entweder als iFrame oder als App oder Sie lösen es mit der Rest-API.

Hier finden Sie Tipps zum Einbinden des iFrames in die eigene Website. Das edoobox Buchungs-Tool kann sehr einfach in die eigene Website eingebunden werden. edoobox generiert dazu den Code und die Links in der Vorschau-Dialogbox.

(NEU: Die URL zum Standardansicht-iFrame Ihres edoobox-Kontos heisst ab sofort app1.edoobox.com/IhrKürzel/ (nicht mehr www.edoobox.com/iframe/IhrKürzel/ ).

iFrame pro Kategorie/Angebot

Wenn Sie pro Kategorie ein iFrame einbinden möchten oder für ein einzelnes Angebot, kann der Code aus der Vorschau-Dialogbox herauskopiert werden.

Vorgehen:

1. Kategorie/Angebot markieren
2. Rechtsklick auf die Kategorie/das Angebot
3. Vorschau – Share wählen
4. Button Einbinden wählen
5. Die Eigenschaften vervollständigen
6. Den generierten Code kopieren und in die Website einfügen

iFrame über alle Angebote

Möchten Sie ein iFrame über alle Angebote erstellen, markieren Sie das Kürzel zuoberst links in der Navigations-Ansicht, danach Punkt 2 bis 5 ausführen.

Auf unseren Demo-Websites zeigen wir, wie individuell iFrames eingebunden werden können.

Link: (Demo Website)

Der generierte iFrame-Code sieht prinzipiell wie folgt aus:

<iframe src=“https://app1.edoobox.com/de/MSW/?edref=mailing14&edtag=Indoor“ name=“edooboxFrame_mailing14″ id=“edoobox_mailing14″ style=“border:none; width:100%; height:600px;“ frameborder=“0″ seamless data-scrolltop><a href=“https://app1.edoobox.com/de/MSW/?edref=mailing14&edtag=Indoor“>Übersicht anzeigen</a></iframe><script type=“text/javascript“ src=“https://app1.edoobox.com/js/edoobox.iframe.embedded.v2.2.js“></script>

Sprache des iFrames (und weitere Einstellungen)

Das Anmeldeformular erscheint in der eingestellten Browsersprache des buchenden Teilnehmers, Deutsch (de), Französisch (fr) oder Englisch (en), sofern Sie bei der Sprache keine Auswahl getroffen haben. Im Menü-Balken ganz oben kann der Teilnehmer die Sprache auswählen, sofern dies von Ihnen im Design-Manager aktiviert wurde.

Wenn Sie nun ein iFrame, unabhängig von der eingestellten Browsersprache, immer in einer gewünschten Sprache anzeigen möchten, z.B. in Deutsch, wählen Sie die gewünschte Sprache im Sprachfeld aus.

Haben Sie soweit alle Einstellungen vorgenommen, können Sie mit einem Klick auf In Zwischenablage kopieren den erstellten iFrame Code kopieren.

Label:

Jedem iFrame auf Ihrer Website können Sie ein Label vergeben, so sehen Sie später woher die Buchung stammt.
Das Label unbedingt in kleinbuchtaben eintragen.

Tag Filter:

Jedes Angebot kann mit Tags versehen werden. Mit dem Tag Filter können kategorienübergreifend Angebote angezeigt werden. Z.B. können über alle Kategorien hinweg die Outdoor-Angebote im iFrame angezeigt werden. (siehe spezielle Anleitung: Tagging.pdf)

Sprache:

In welcher Sprache soll das iFrame zwingend angezeigt werden.

GTM:

Soll der Google Tag Manager in diesem iFrame verwendet werden.

Sprache im iFrame direkt umstellen

Aktivieren Sie im Design Manager unter „Seiten Header“ bei „Navigations Menü“ die Sprachen Auswahl, Ihre Teilnehmer haben so die Möglichkeit die Sprache selber einzustellen.

URL zum iFrame eintragen

Tragen Sie im Register iFrame die URL zu Ihrem iFrame ein. Dies bringt viele Vorteile, edoobox weiss nun wo Ihr iFrame positioniert ist und kann die Angebot-Vorschau direkt in Ihrer Website anzeigen und auch Links gezielter erstellen.

Links auf der Website

Ist im Register iFrame die URL zum iFrame eingetragen, können die Links zu den Angeboten mit dem Button Link aufgerufen werden.

Um diese Dialogbox anzuzeigen, markieren Sie die gewünschte Kategorie oder das gewünschte Angebot und rufen Sie im Kontextmenü die Vorschau – Share auf.

Der Link hinter Ihre Website ist vor allem für Verweise auf Kategorien nützlich. Kopieren Sie den Link und fügen Sie ihn in Ihre Website ein.

Ist der Link zum iFrame in edoobox eingetragen (siehe oben), wird bei einem Klick auf einen Link das Ergebnis im iFrame angezeigt (sofern der benutzte Browser dies unterstützt und der JavaScript Code von edoobox eingebunden ist). Das korrekte Einbinden des Codes erreichen Sie durch einen Klick auf Einbinden und dem Kopieren und Einfügen des ganzen Codes in Ihre Website.

Beachten Sie auch die speziellen Themen für das Integrieren von iFrames in Joomla-, WordPress-, Jimdo- und Typo3-Websites.

Begriffserklärung

seamless (Link)

CSS-Eigenschaften werden dadurch direkt in den Frame übernommen und die Links öffnen korrekt im übergeordneten Fenster. Außerdem passt sich das iFrame mit dem Attribut der Höhe des Inhalts an. Linien sowie Scroll Balken werden standardmässig nicht angezeigt. Wie bei allen neuen Errungenschaften im Web gibt es Dinge zu beachten und Kompromisse einzugehen:

• Es wird nur https://, nicht aber file:// unterstützt
• Kein einziger Browser verfügt derzeit über Support
• Nur Google Chrome Canary (Version 22 und höher) unterstützt derzeit das Attribut
• Die Implementierung der anderen Browser kann als oberflächlich bezeichnet werden

Um schon jetzt die Vorteile des seamless-Attributes zu nutzen, fügen Sie den von uns bereits vorgegebenen JavaScript-Code direkt nach dem iFrame-Code ein:

<script type=“text/javascript“ src=“https://app1.edoobox.com/js/edoobox.iframe.embedded.v2.2.js“></script>

data-mobile

Anstelle des iFrames wird auf dem Smartphone ein Button mit Ihrem individuellen Text dargestellt, der Sie danach auf die Standard Ansicht Ihrer Angebote führen wird.

Schreibweise: data-mobile=“Ihr Text“ >  (ein Leerzeichen MUSS vorhanden sein zwischen “ und >

data-scrolltop

Wenn Sie nicht möchten, dass das iFrame jedes Mal bei einem Klick auf „Weiter“ wieder ganz nach oben springt, können Sie dieses Attribut aus dem Code entfernen.