Skip to main content
Skip table of contents

Einbindung in die Webseite und Vorschau-Share

Die Integration von edoobox ist essenziell, um Ihre Angebote öffentlich in einem passenden Format zugänglich zu machen und es Ihrer Kundschaft zu ermöglichen, selbstständig Buchungen in Ihre Angebote vorzunehmen.

Die Einbindungsmethoden

Zur Integration stehen Ihnen in edoobox verschiedene Methoden zur Verfügung:

  1. Einbindung via iFrame: Mit dieser Methode können Sie edoobox in Ihre Webseite integrieren, indem Sie ein iFrame verwenden. Das Buchungsfenster wird dadurch in einem eigenen Fenster auf Ihrer Webseite angezeigt und kann mithilfe des Design Managers an das Erscheinungsbild Ihrer Webseite angepasst werden. Diese Einbindungsmethode ist CMS- bzw. plattformunabhängig und kann auf Webseiten aller Art genutzt werden.

  2. Einbindung als Link: Mit dieser Methode haben die Möglichkeit, edoobox als einfachen Link in Ihren Webauftritt einzufügen oder per E-Mail zu versenden. Dadurch ermöglichen Sie Ihrer Kundschaft, mit einem Klick auf die Standard-Vorschau Ihrer edoobox-Angebote zuzugreifen und den Buchungsprozess in einem eigenen Browsertab durchzuführen. Diese Einbindungsmethode ist CMS- bzw. plattformunabhängig und kann auf Webseiten aller Art genutzt werden.

  3. Einbindung via Plugin: Wenn Sie WordPress als CMS-System für Ihren Webauftritt nutzen, bietet edoobox die Möglichkeit, für die Integration auf Ihre Webseite das edoobox-Plugin zu verwenden. Informationen zu dieser Einbindungsvariante finden Sie in dieser Dokumentation.

  4. API-Integration: Die Nutzung der edoobox-API ermöglicht die Erstellung individueller Integrationen von edoobox in Ihre Webseite. Diese Methode erfordert technische Kenntnisse und bietet maximale Flexibilität. Informationen zu dieser Einbindungsvariante finden Sie in dieser Dokumentation.

Die Wahl der Einbindungsmethode hängt von Ihren spezifischen Anforderungen und Ihrem technischen Hintergrund ab. Jede Methode ermöglicht es Ihnen, edoobox in Ihren Webauftritt zu integrieren und Ihrer Kundschaft ein ideales Buchungserlebnis zu bieten.

Zur Vereinfachung der Dokumentation wird im Folgenden ausschliesslich vom «Einbindungscode» gesprochen. Dies umfasst sowohl die Einbindungslinks (Methode 2) als auch die Einbindungscodes (Methoden 1 und 3) und schliesst die Mehrzahl der beiden Varianten mit ein.

Die Einbindungsebenen

Um Ihre edoobox-Angebote mithilfe einer der genannten Methoden (1–3) in Ihrer Webseite anzuzeigen, ist es erforderlich, den entsprechenden Einbindungscode in Ihrem edoobox-Konto zu generieren und an den gewünschten Stellen auf Ihrer Webseite einzubinden.

Sie haben auf jeder Ebene im Angebotsbaum die Möglichkeit, einen solchen Einbindungscode zu erstellen. Auf welcher Ebene Sie diesen Einbindungscode erstellen, ist abhängig davon, wie Sie die Angebote auf Ihrer Webseite präsentieren möchten. Die Generierung des Einbindungscodes erfolgt im Vorschau-Share-Bereich der entsprechenden Ebene im Angebotsbaum.

Folgende Ebenen sind verfügbar:

  • Kontokürzel: Einbindung aller Angebote

  • Kategorie: Einbindung einer einzelnen Kategorie

  • Angebot: Einbindung eines einzelnen Angebots

Info: Beispiele von Einbindungen

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

Einbindungscodes erstellen

Einbindung aller Angebote über das Kontokürzel EMPFEHLUNG

Auf dieser Ebene erstellen Sie einen Einbindungscode, mit dem Ihre Kundschaft zur Gesamtübersicht all Ihrer in edoobox veröffentlichten Angebote gelangt. Über diese Einbindung werden neu veröffentlichte Kategorien und Angebote stets automatisch in der Gesamtübersicht angezeigt, und der Einbindungscode behält unter Standardbedingungen seine Gültigkeit.

  1. Navigieren Sie zum Angebotsbaum.

  2. Rechtsklick auf Ihr Kontokürzel

  3. Vorschau – Share im Kontextmenü auswählen

  4. Die Einstellungen zum Einbindungscode festlegen

  5. Einbindungscode auswählen

    1. Für Standard-Ansicht auf «Link zur Standardansicht» klicken

    2. Für iFrame-Code auf «Einbinden/Einbetten Webseite» klicken

    3. Für Short-Code auf «Einbinden/Einbetten Plugin» klicken

  6. Den generierten Einbindungscode kopieren und in die Webseite einfügen

Integration aller Angebote: Rechtsklick auf das Kontokürzel

Vorschau-Share: Drei verfügbare Einbindungsmethoden für die Webseite

Einbindung einzelner Kategorien EMPFEHLUNG

Auf dieser Ebene erstellen Sie einen Einbindungscode, mit dem Ihre Kundschaft direkt auf diese Kategorie gelangt und zwischen den Angeboten dieser Kategorie auswählen kann. Über diese Einbindung werden neu veröffentlichte Angebote dieser Kategorie stets automatisch angezeigt, und der Einbindungscode behält unter Standardbedingungen seine Gültigkeit.

  1. Navigieren Sie zum Angebotsbaum.

  2. Rechtsklick auf die gewünschte Kategorie

  3. Vorschau – Share im Kontextmenü auswählen

  4. Die Einstellungen zum Einbindungscode festlegen

  5. Einbindungscode auswählen

    1. Für Standard-Ansicht auf «Link zur Standardansicht» klicken

    2. Für iFrame-Code auf «Einbinden/Einbetten Webseite» klicken

    3. Für Short-Code auf «Einbinden/Einbetten Plugin» klicken

  6. Den generierten Einbindungscode kopieren und in die Webseite einfügen

Integration einer Kategorie: Rechtsklick auf die Kategorie

Bitte beachten: Mehrere iFrames auf einer Seite

Wenn Sie mehr als nur ein iFrame auf der gleichen Seite einfügen möchten, geben Sie jedem iFrame einen anderen Label-Text, und fügen Sie den JavaScript-Code nur einmalig unterhalb des letzten iFrames ein.

Einbindung einzelner Angebote

Auf dieser Ebene erstellen Sie einen Einbindungscode, der Ihre Kundschaft direkt zu einem einzelnen Angebot oder in dessen Anmeldung führt. Über diese Einbindung werden neu erstellte Kategorien und Angebote nicht automatisch angezeigt und der Link verliert nach Ablauf des Angebots seine Gültigkeit.

  1. Navigieren Sie zum Angebotsbaum

  2. Rechtsklick auf das gewünschte Angebot

  3. Vorschau – Share im Kontextmenü auswählen

  4. Die Einstellungen zum Einbindungscode festlegen

  5. Einbindungscode auswählen

    1. Für Standard-Ansicht auf «Link zur Standardansicht» klicken

    2. Für einen Link direkt in die Anmeldung des Angebots auf «Link zum Anmeldeformular» klicken

    3. Für iFrame-Code auf «Einbinden/Einbetten Webseite» klicken

    4. Für Short-Code auf «Einbinden/Einbetten Plugin» klicken

  6. Den generierten Einbindungscode kopieren und in die Webseite einfügen

Integration eines Angebots: Rechtsklick auf das Angebot

Bitte beachten: Link einzelner Angebote

Die Einbindung einzelner Angebote empfehlen wir nur speziellen Fällen, z.B. für die Verlinkung eines einzelnen Angebots in einem Newsletter, da der Einbindungslink nach Ablauf des Angebots angepasst werden muss, um ein neues Angebot einzublenden.

Kopieren Sie die Links in die Anmeldung eines Angebots bitte ausschliesslich aus dem Vorschau-Share-Bereich und nie aus dem Browserfenster

Vorschau-Share

Mit 'Vorschau-Share' in edoobox ist der Bereich gemeint, über den Sie Einbindungscodes konfigurieren und generieren können. Wie es der Name impliziert, ermöglicht Ihnen dieser Bereich einerseits eine Vorschau Ihrer Angebote in edoobox und andererseits die Einbindung Ihrer Angebote in Ihren Webauftritt vorzubereiten.

Sie gelangen zu diesem Bereich, indem Sie an einer beliebigen Stelle im Angebotsbaum einen Rechtsklick durchführen oder über das Kategorien- oder Angebotsdashboard darauf zugreifen.

Vorschau-Share: Erstellung von Einbindungscodes und deren Eigenschaften

Link zur Standardansicht

Dieser Link führt Sie in die Standardansicht der aktuell ausgewählten Ebene und kann in einem neuen Browsertab geöffnet werden.

CODE
https://app1.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6526d7ca333a68O0O494314613bddf84aa24fe45227c52fdd96f7b14a

Einbinden/Einbetten Webseite

Dieser Einbindungscode wird iFrame-Code genannt und wird für die Einbindung via iFrame verwendet. Dieser iFrame-Code führt, wenn in einer Webseite integriert, in einem eigenen Fenster auf der Webseite in die Standardansicht der aktuell ausgewählten Ebene.

CODE
<iframe
    id="edoobox_sprach cb"
    frameborder="0"
    name="edooboxFrame_sprach cb"
    no-scroll
    seamless
    src="https://app1.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6526d7ca333a68O0O494314613bddf84aa24fe45227c52fdd96f7b14a"
    style="border:none; width:100%; height:600px;">
    <a href="https://app1.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6526d7ca333a68O0O494314613bddf84aa24fe45227c52fdd96f7b14a">Übersicht ansehen</a>
</iframe>

<script
    src="https://cdn1.edoobox.com/edoobox.iframe.embedded.v2.2.5.js"
    type="text/javascript"></script>

Bitte beachten: Attribut seamless

Das Attribut seamless ist deprecated, da es aus den Standard-Entwürfen von HTML5 entfernt wurde. Wir empfehlen somit, dieses Attribut nicht mehr zu verwenden.

Info: Attribut data-mobile

Mithilfe dieses Attributs wird anstelle des iFrames auf dem Smartphone ein Button mit Ihrem individuellen Text dargestellt, der mit einem Klick darauf auf die Standardansicht Ihrer Angebote führt.

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

Einbinden/Einbetten Plugin

Dieser Einbindungscode wird Short-Code genannt und wird für die Einbindung via Plugin verwendet. Dieser Short-Code führt, wenn in einer Webseite integriert, in einem eigenen Bereich direkt auf der Webseite in die Standardansicht der aktuell ausgewählten Ebene.

CODE
[edbs_panel label="intern/sprachcb/n2etdoemtg3kwc217g27ttl" language="de" tag="" url="intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/" edcode="" ]

Facebook

In diesem Bereich können Sie einen Einbindungslink, einen iFrame-Code und einen Short-Code für Facebook erstellen. Der Einbindungslink leitet beim Klicken auf Facebook weiter und ermöglicht das Erstellen eines Beitrags zur aktuell ausgewählten Ebene (zum Beispiel ein Angebot) im Bearbeitungsmodus. Dieser Beitrag kann in einem zweiten Schritt geteilt werden.

CODE
https://www.facebook.com/sharer.php?u=https://app1.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6527ad8eb52fd9O0O630800852afc84804bdbf09663155cb3a46e14e8&t=SprachCB

Über den iFrame- und Short-Code können Sie ein kleines Facebook-Symbol auf Ihrer Webseite einbetten. Ihre Kundschaft kann dieses Symbol nutzen, um die eingebundene Ebene (zum Beispiel ein Angebot) zu liken oder zu teilen.

Twitter (X)

In diesem Bereich können Sie einen Einbindungslink, einen iFrame-Code und einen Short-Code für Twitter (X) erstellen. Der Einbindungslink leitet beim Klicken auf Twitter (X) weiter und ermöglicht das Erstellen eines Beitrags zur aktuell ausgewählten Ebene (zum Beispiel ein Angebot) im Bearbeitungsmodus. Dieser Beitrag kann in einem zweiten Schritt geteilt werden.

CODE
https://twitter.com/intent/tweet?source=sharethiscom&url=https://app1.edoobox.com/intern/SprachCB/N2ETDOEMTG3KWC217G27TTL/?edref=intern/sprachcb/n2etdoemtg3kwc217g27ttl&edid=6527ad8eb52fd9O0O630800852afc84804bdbf09663155cb3a46e14e8&text=SprachCB

Über den iFrame- und Short-Code können Sie ein kleines Twitter (X)-Symbol auf Ihrer Webseite einbetten. Ihre Kundschaft kann dieses Symbol nutzen, um die eingebundene Ebene (zum Beispiel ein Angebot) zu liken oder zu teilen.

Einstellungen

Die Einstellungen im Vorschau-Share-Bereich dienen dazu, den Einbindungscode nach Ihren Anforderungen und Arbeitsprozessen anzupassen und zu optimieren.

Vorschau-Share: Die Anpassung der Eigenschaften eines Einbindungscodes

Label

Jedem von Ihnen erstellten Einbindungscode können Sie ein Label hinzufügen. Dadurch können Sie später nachvollziehen, von welchem Einbindungscode die Buchungen stammen. Bitte tragen Sie das Label in Kleinbuchstaben ein.

Sprache

Mit der Sprache legen Sie fest, in welcher Sprache der Einbindungscode das Buchungsfensters standardmässig ausgeben soll. Wenn keine spezifische Sprache für den Einbindungscode festgelegt ist, wird das Buchungsfenster standardmäßig in der Browsersprache des buchenden Teilnehmers angezeigt, sofern die entsprechende Sprache (DE, EN oder FR) im System aktiviert ist.

Tipp: Sprache im iFrame umstellen

Aktivieren Sie im Design Manager unter Seiten Header bei Navigations Menü die Sprachen Auswahl, Ihre Teilnehmenden haben so die Möglichkeit, die gewünschte Sprache für den Buchungsprozess selbst einzustellen.

Tags

Jedes Angebot kann mit Tags versehen werden. Durch Verwendung von Tags im Einbindungscode können alle Angebote mit den entsprechenden Tags der aktuellen Ebene angezeigt werden.

Scroll-To-Top

Im iFrame wird bei jedem Klick der Inhalt des Fensters nach oben verschoben. Dies kann sich für Single-Page-Seiten oder lange Inhaltsseiten als ungeeignet erweisen, da Benutzer nach jedem Klick neu zum iFrame scrollen müssen. Dieser Scroll-Effekt kann durch die Deaktivierung der Funktion «Scroll-To-Top» entfernt werden.

Google Tag Manager

Wenn Sie den Google Tag Manager für diesen Einbindungscode verwenden möchten, kann dieser hier aktiviert werden. Bitte aktivieren Sie diese Option nur, wenn Sie Google Analytics eingerichtet und den Container von edoobox darin importiert haben.

Verwandte Anleitungen

Stichwörter für diese Anleitung

iFrame ¦ Einbinden ¦ Scroll-To-Top ¦ Tag ¦ Label ¦ Einbetten ¦ Tracking

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.