Kompatibilität:

WebSite X5 Evo und Pro

Die Verwaltung von Buchungen per Telefon oder E-Mail kann viel Zeit in Anspruch nehmen: Verfügbarkeiten müssen geprüft, Anfragen beantwortet und der Kalender ständig aktualisiert werden.


Bookeo ist ein Online-Dienst, mit dem Sie Buchungen für Termine, Unterricht, Kurse, Führungen und andere Aktivitäten organisieren und annehmen können. Mit dem optionalen Objekt Bookeo können Sie das Buchungssystem direkt in eine Seite Ihrer mit WebSite X5 erstellten Website integrieren, sodass Ihre Kunden Verfügbarkeiten prüfen und online buchen können.


Ein Beispiel für das Ergebnis finden Sie auf der Seite Vorschau.



Um Bookeo in Ihre Website zu integrieren, müssen Sie den vom Dienst bereitgestellten HTML-Code abrufen, ihn in das Bookeo-Objekt einfügen, die Seite veröffentlichen und anschließend Bookeo die Adresse dieser Seite mitteilen.


Bevor Sie beginnen

Für diese Anleitung benötigen Sie:

  • ein Bookeo-Konto, in dem die buchbaren Dienstleistungen oder Aktivitäten bereits eingerichtet wurden;
  • das in WebSite X5 installierte optionale Objekt Bookeo;
  • eine Website-Seite, die für Buchungen vorgesehen ist;
  • die Möglichkeit, die Website online zu veröffentlichen.


Das Bookeo-Objekt dient dazu, das Buchungssystem in Ihre Website zu integrieren. Die Konfiguration der Dienstleistungen, Verfügbarkeiten, Preise und aller weiteren Optionen muss direkt in Ihrem Bookeo-Konto erfolgen.


3 kostenlose Monate für WebSite X5 Benutzer

Für WebSite X5 Benutzer gibt es eine Sonderaktion: Wenn Sie Ihren WebSite X5 Lizenzschlüssel auf der Bookeo-Aktionsseite eingeben, erhalten Sie die ersten 3 Monate des Dienstes kostenlos.


So erhalten Sie den HTML-Code von Bookeo

Zunächst müssen Sie die Integration in Ihrem Bookeo-Konto einrichten und den Code kopieren, der anschließend in Ihre Website eingefügt wird.

  1. Melden Sie sich bei Ihrem Bookeo-Konto an.
  2. Öffnen Sie Settings > Theme and Layout > Website integration.
  3. Wählen Sie im Menü Page location die Option Embed a widget in my web site.
  4. Legen Sie im Bereich Optionsfest, wie sich das Buchungssystem verhalten soll:
    • Wählen Sie unter Second screen, ob die folgenden Seiten innerhalb der Website eingebettet bleiben oder im Vollbild geöffnet werden sollen.
    • Wählen Sie unter Mobile, ob das Buchungssystem auf mobilen Geräten eingebettet bleiben oder im Vollbild angezeigt werden soll.
  5. Suchen Sie im Bereich Widget den unter Punkt 1 angezeigten Code.
  6. Markieren und kopieren Sie den vollständigen Code.


Schließen Sie die Bookeo-Konfigurationsseite noch nicht: Nach der Veröffentlichung Ihrer Website müssen Sie dorthin zurückkehren.


So fügen Sie Bookeo in WebSite X5 ein

Nachdem Sie den HTML-Code kopiert haben, können Sie ihn in die für Buchungen vorgesehene Seite einfügen.

  1. Öffnen Sie Ihr Projekt in WebSite X5.
  2. Falls noch nicht geschehen, wechseln Sie zu Schritt 3 – Sitemap und erstellen Sie eine Seite, zum Beispiel mit dem Namen „Buchungen“.
  3. Gehen Sie zu Schritt 4 – Seiten und öffnen Sie die neu erstellte Seite.
  4. Ziehen Sie das Bookeo-Objekt in das Layout-Raster.
  5. Doppelklicken Sie auf das Objekt, um das Einstellungsfenster zu öffnen.
  6. Fügen Sie den von Bookeo kopierten HTML-Code in das dafür vorgesehene Feld ein.
  7. Legen Sie fest, ob für das Objekt eine feste Höhe beibehalten werden soll.
  8. Klicken Sie auf OK, um die Einstellungen zu übernehmen.


Wann eine feste Höhe sinnvoll ist

Während des Buchungsvorgangs kann sich der von Bookeo angezeigte Inhalt je nach Schritt ändern.


Lassen Sie die Option für eine feste Höhe deaktiviert, wenn sich der für das Buchungssystem reservierte Bereich automatisch an die einzelnen Schritte anpassen soll.


Aktivieren Sie die Option, wenn der für das Objekt vorgesehene Bereich immer gleich groß bleiben soll. Überprüfen Sie in diesem Fall nach der Veröffentlichung Ihrer Website alle Schritte des Buchungsvorgangs, um sicherzustellen, dass sämtliche Inhalte vollständig sichtbar sind.


So veröffentlichen Sie die Seite und schließen die Integration ab

Bookeo muss die Adresse der Seite kennen, in die Sie den Code eingefügt haben. Daher müssen Sie Ihre Website zunächst veröffentlichen, bevor Sie die Konfiguration abschließen können.

  1. Wechseln Sie zu Schritt 5 – Export.
  2. Veröffentlichen Sie Ihre Website online.
  3. Öffnen Sie die Seite mit dem Bookeo-Objekt in Ihrem Browser.
  4. Kopieren Sie die vollständige Adresse der Seite aus der Adressleiste des Browsers.
  5. Kehren Sie zu Ihrem Bookeo-Konto zurück und öffnen Sie bei Bedarf erneut Settings > Theme and Layout > Website integration.
  6. Fügen Sie im Bereich Widget unter Punkt 2 die Adresse der veröffentlichten Seite ein.
  7. Klicken Sie auf Test booking, um die Integration zu überprüfen.
  8. Wenn das Buchungssystem ordnungsgemäß funktioniert, klicken Sie auf OK, um die Einstellungen zu speichern.


Bookeo verwendet die angegebene Adresse als Standardseite für das in Ihre Website eingebettete Buchungssystem.


So überprüfen Sie das Buchungssystem

Bevor Sie die Seite Ihren Kunden zur Verfügung stellen, sollten Sie eine Testbuchung durchführen.


Überprüfen Sie dabei insbesondere, dass:

  • das Buchungssystem korrekt geladen wird;
  • der gewünschte Service bzw. die gewünschte Aktivität ausgewählt werden kann;
  • Termine und Verfügbarkeiten angezeigt werden;
  • alle Schritte des Buchungsvorgangs erfolgreich abgeschlossen werden können;
  • keine Inhalte abgeschnitten werden;
  • die Seite sowohl auf Desktop-Computern als auch auf Smartphones einwandfrei funktioniert;
  • eine gegebenenfalls festgelegte feste Höhe für alle Ansichten ausreicht.


Wenn Sie den Code oder die Einstellungen des Bookeo-Objekts ändern, veröffentlichen Sie die Website erneut und wiederholen Sie den Test.


Was Sie tun können, wenn Bookeo die Seitenadresse nicht akzeptiert

Beim Speichern der Seitenadresse überprüft Bookeo, ob die Seite erreichbar ist und den Code des Buchungssystems enthält.


Wenn Bookeo die Seitenadresse nicht akzeptiert:

  • vergewissern Sie sich, dass die Website veröffentlicht wurde;
  • prüfen Sie, ob die eingegebene Adresse vollständig und korrekt ist;
  • stellen Sie sicher, dass die Seite öffentlich erreichbar und nicht passwortgeschützt ist;
  • kontrollieren Sie, ob Sie den vollständigen HTML-Code in das Bookeo-Objekt eingefügt haben;
  • veröffentlichen Sie die Seite erneut, damit die aktuelle Version online verfügbar ist;
  • öffnen Sie die Seite erneut im Browser und wiederholen Sie den Test.


Wenn Bookeo die Seite nicht erreichen oder den eigenen Code nicht finden kann, wird das Speichern der Integration möglicherweise verhindert.

Möchten Sie das Objekt sofort auf Ihrer Website verwenden? Installieren Sie jetzt das Bookeo-Objekt – kostenlos.