WordPress Website einbinden (WP Plugin / iFrame)

Die edoobox kann problemlos in eine WordPress Website eingebunden werden.

Hierzu stehen Ihnen zwei Möglichkeiten zu Verfügung:

Option 1: Einbindung über das WordPress Plugin EMPFOHLEN

Info: Vorteile vom WP Plugin gegenüber der iFrame Integration:

Suchmaschinenoptimierung (Rewrite der URL / Meta Daten / Integration über die API)
Direkte Verlinkung auf Kategorien und Angebote
Strukturierte Daten vom Angebot im JSON-LD Format

Option 2: Einbindung über ein iFrame 

Einbindung über das WordPress Plugin

Bitte beachten Sie, dass der kostenlose Support für diesen Themenbereich eingeschränkt ist. Falls Sie umfangreichere Unterstützung wünschen, bieten wir Ihnen gerne kostenpflichtige Services an.

Installieren Sie das WordPress Plugin in Ihrem WordPress über den Navigationspunkt Plugin > Installieren.

Suchen Sie nach dem Plugin edoobox in der Suche. Das Plugin muss zuerst über die Schaltfläche installieren installiert werden und danach über die Schaltfläche aktivieren A in der WordPress Installation aktiviert werden.

Link zum WordPress Plugin unter  edoobox Wordpress Plug-In

In der linken Navigation erscheint nun ein neuer Menüpunkt «edoobox»B. Klicken Sie diesen an, um Einstellungen vorzunehmen. Die folgenden Felder müssen ausgefüllt werden:

Privater API Key
Sie finden den Privat API Key in Ihrem edoobox V1 Konto unter den Einstellungen in der Box «API Zugangsverwaltung» C .

Secret API Key
Den Secret API Key finden Sie gleich unterhalb des Privat API Key. Der Secret API Key wird nur einmalig beim Erstellen vom Private API Key angezeigt. Legen Sie diesen an einem geheimen und sicheren Ort ab.

edoobox Konto Kürzel
Sie finden das Konto Kürzel D an oberster Instanz der Baumstruktur.

Design auswählen
Wählen Sie, ob Sie das Standard-Design oder das Design der Website übernehmen möchten.
Option 1: Standard Design lädt das Standard-Design vom WordPress Design (Design muss auf Bootstrap basieren).
Option 2: Design der Website übernehmen lädt das Standard-Design für die Webseite.

Shortcode generieren
Generieren Sie sich als Nächstes den Shortcode in dem Sie mit einem Rechtsklick auf das Hauptverzeichnis (Konto Kürzel) oder die gewünschte Kategorie klicken und «Vorschau - Share» E anwählen.

Öffnen Sie «Einbinden / Einbetten Plugin»  F und klicken Sie einmal auf den Shortcode G um diesen zu kopieren.

Fügen Sie den kopierten Shortcode an der Stelle ein, wo Sie Ihre Angebote anzeigen möchten. Verwenden Sie dazu in WordPress den Block «Shortcode». Veröffentlichen Sie die Seite, Fertig!

Tipp: Shortcode Anpassungen

Sie können eine Kategorie oder auch nur einen einzelnen Kurs anzeigen.

Beispielcode für das ganze edoobox Konto mit dem Kürzel Demo.
[edbs_panel language="de" url="demo" ]

Beispielcode für die Anzeige der Kategorie „Deutsch“.
[edbs_panel language="de" url="demo/Deutsch" ]

Beispielcode für die Anzeige vom Kurs „Kurs.ed.168062“.
[edbs_panel language="de" url="demo/Deutsch/Niveau%20A1/Kurs.ed.168062" ]

Ergänzen Sie den Code manuell um ein Label oder einen Tag.
[edbs_panel language="de" url="demo" label="Startseite" tag="Intensivkurs" ]

Für den Kalender kann der Code wie folgt ergänzt werden.
[edbs_panel language="de" url="demo/Deutsch/" label="Startseite" tag="Intensivkurs" view="v1" start="2019-08-20" ]

Wenn Sie ein Shortcode auf der Startseite einfügen, muss eine Root Seite definiert werden, die nach dem Klick die Angebotsdetails öffnen.
[edbs_panel language="de" url="demo/Deutsch/" label="Startseite" root="www.ihreURL.com/unser_angebot" ]

Tipp: CSS Anpassungen

Ist die Schriftart noch zu gross oder klein?
Passen Sie z. B. den Angebots-Titel per CSS Widget im Design Manager im Template Seiten Footer an.

Aufbau vom Shortcode

Der Shortcode besteht aus mehreren Variablen. Bsp: [edbs_panel language=“de“ url=“demo/Deutsch/“ label=“facebook“ tag=“Outdoor“ root=“https://app1.edoobox.com/“ ]

edbs_panel > edoobox Shortcode Name

language > definierte Sprache z. B. de

url > Kürzel/Kategorie oder Kurs z. B. demo/Deutsch/

label > definiertes Label, um die Quelle zu definieren z. B. Facebook

tag > Filterung der Angebote über die Tagging-Funktion von edoobox

root > Definieren Sie hier die URL, die aufgerufen werden soll, wenn ein Benutzer einen Klick tätig. z. B. möchten Sie auf der Startseite die Kurse anzeigen aber dann auf einer Unterseite die Detailansicht der Kurse. Definieren Sie hier die Ziel-URL z. B. https://app1.edoobox.com/

WordPress Support

WordPress ist ein Open-Source CMS System. Das edoobox Plugin ist mit dem Core System von WordPress getestet. Je nach zusätzlichen Plugins auf Ihrer WordPress Installation kann es Konflikte in den Plugins geben. Falls Sie ein Debugging in Ihrem WordPress System wünschen, verrechnen wir dies zusätzlich zu den Abonnements Gebühren.

Debug-Modus

Mit unserem neuen Debug-Modus können Sie unserem Support-Team einen geheimen Debug-Code generieren, der Ihnen Einsicht in Ihre WordPress-Plugin-Einstellungen gibt. Auf diese Weise kann das Support Team Probleme schneller lösen. Den Code generieren Sie in den Optionen 1 unter Debugger Code, mit Klick auf «Code generieren» 2 :

Bitte beachten: Mögliche Probleme

Bitte keine Werte nach dem ? übergeben. z. B. ?edref=demo
Um das WordPress Plugin zu verwenden, muss die URL Rewrite Funktion im WordPress aktiviert werden.
Das WordPress Plugin benötigt mind. PHP: 5.5
Das Konto oder Kategorien dürfen nicht auf den Status Intern gesetzt sein

Bitte beachten: Startseite

edoobox kann Nicht ohne einer definierte Seite  auf der Startseite eingebunden werden. In der URL muss mindestens ein / vorhanden sein wie zum Beispiel http://www.beispiel.de/buchungen . Erstellen Sie eine eigene Seite für das edoobox Plugin.

Bitte beachten: Sprach-Ausgabe

Mit dem WP Plugin müssen die Sprachen nicht wie beim iFrame definiert werden, sondern werden im Buchungsmodus (ab Klick auf die Schaltfläche jetzt anmelden) automatisch im Browser des Buchenden erkannten und ausgegeben. Bedeutet, dass wenn in edoobox Deutsch und Englisch aktiviert sind und der Buchende Deutsch als Browsersprache aktiv hat, wird ab dem Teilnehmerformular die deutsche Sprache ausgegeben.

Bitte beachten: Aktualisierung im Frontend

Wenn Sie in Ihrem edoobox-Konto Änderungen vornehmen und diese nicht direkt sichtbar werden auf Ihrer Webseite, dann hilft es oft, die Webseite neu zu laden. Wird die Änderung auch nach einigen Minuten nicht angezeigt, lohnt es sich, den Cache im Browser oder den Cache von einem Caching Plugin (z.B. WPRocket / WPCache usw.) zu löschen. Danach sollte die Aktualisierung im Frontend (Ihrer Webseite) ersichtlich sein.

Bitte beachten: Shortcode Pro

Mit dem Shortcode Pro haben Sie die Möglichkeit, an einer von Ihnen definierte Stelle (z. B. auf der Startseite), Ihre nächsten Angebote kurz vor dem Start hervorzuheben. Definieren Sie in der Variabel «limit» die Anzahl Angebot, die angezeigt werden sollen. Mit HTML Kenntnisse können Sie diese optisch zusätzlich personalisieren und eigene Vorlagen generieren. Die passenden Variablen finden Sie unter «Beispielvariablen / Werte erweitern». Wir stellen Ihnen zwei Vorlagen zur Verfügung. Die Vorlage Tabellenansicht / Listenansicht kann nicht verändert werden, kann aber für eine eigene Vorlage verwendet werden.

Einbindung über ein iFrame

Wählen Sie in der WordPress Navigation unter dem Menüpunkt «Seiten» die entsprechende Seite aus, in welcher Sie das edoobox iFrame einbinden möchten oder erstellen Sie eine neue Seite.

Generieren Sie sich als Nächstes den iFrame Code in dem Sie mit einem Rechtsklick auf das Hauptverzeichnis (Konto Kürzel) oder die gewünschte Kategorie klicken und «Vorschau - Share» H anwählen.

Öffnen Sie «Einbinden / Einbetten Webseite»  I und klicken Sie einmal auf den iFrame Code J um diesen zu kopieren.

Für Benutzer von WordPress Version kleiner als 5.0.3 wählen Sie «Text» L und fügen Sie den iFrame Code ins leere Textfeld ein.

Für Benutzer von WordPress Version grösser als 5.0.3 wählen Sie den Inline-Code M unter dem Plus an und fügen Sie den iFrame Code ins leere Textfeld ein.

Nun können Sie nach Belieben vor und/oder nach dem Code einen passenden Text einfügen und die Darstellung ändern.