Online-Terminbuchung in deine Website einbinden

Mit Bookito können deine Kunden freie Termine selbst wählen. Du kannst einen Buchungslink setzen, die Buchung direkt auf deiner Website zeigen oder sie nach einem Klick in einem Fenster öffnen.

Hier findest du die passenden Schritte für deine Website. Für den Einstieg brauchst du eine eingerichtete Bookito-Buchungsseite und Zugriff auf den Website-Editor.

Bookito und Preise ansehen · Demo-Salon ausprobieren

In dieser Anleitung: Einbauweg wählen · Bookito vorbereiten · Einbauen · WordPress · Ohne Website · Einbau prüfen

Welcher Einbauweg passt?

Weg	Was sehen deine Kunden?	Was brauchst du?
Buchungslink	Ein Button oder Textlink öffnet deine Bookito-Buchungsseite.	Einen Editor, in dem du einen Link setzen kannst.
Direkt auf der Website	Die Buchung steht innerhalb deiner Seite.	Einen Bereich für den Einbettungscode und die Erlaubnis, das Bookito-Script zu laden.
Fenster nach Klick	Ein Button öffnet die Buchung über deiner Website.	Den Buttoncode und das Bookito-Script.
Fester Buchungsbutton	Ein Button unten rechts bleibt beim Scrollen erreichbar und öffnet das Buchungsfenster.	Den entsprechenden Scriptcode und genug Platz neben der übrigen Navigation.

Schematische Darstellung mit Beispieldaten. Keine aktive Buchung.

Link: Deine Website «Termin buchen» Bookito-Buchungsseite

Direkt auf der Website: Deine Website enthält eine Fläche «Leistung auswählen · Beispielzeit wählen».

Fenster nach Klick: Deine Website «Termin buchen» Buchungsfenster mit «Schliessen».

Wenn du zunächst einen einzelnen Button ergänzen möchtest, beginne mit dem Buchungslink. Dafür musst du auf deiner Website keinen Buchungscode ausführen.

Deine Buchungsseite vorbereiten

Richte in Bookito deine buchbaren Leistungen mit Dauer und Preis ein.
Prüfe Mitarbeiterzuordnung und Arbeitszeiten. Berücksichtige Pausen, Abwesenheiten und benötigte Puffer.
Öffne in deinem Konto «Buchungslink & Website». Dort findest du unter «Dein Buchungslink» die Adresse deiner Buchungsseite.
Prüfe die Buchungsseite bis zur Auswahl einer Leistung und Zeit. Schliesse dabei keine Buchung ab.

Eine Website-Einbettung erzeugt keine freien Termine. Wenn auf der Buchungsseite keine Zeiten angeboten werden, prüfe zuerst die Leistungen, Zuordnungen und Verfügbarkeit in Bookito.

Wichtig: Die eigene Buchungsseite und die Vorschau in deinem Bookito-Konto können echte Termine anlegen. Auch der Demo-Salon auf der Startseite speichert Demo-Buchungen und versendet echte Bestätigungsmails. Diese Demo-Buchungen werden nach zwei Stunden automatisch gelöscht; es findet kein Salonbesuch statt.

Buchungslink, Fläche oder Fenster einbauen

Einen Buchungslink setzen

Kopiere unter «Buchungslink & Website» deinen Buchungslink.
Ergänze im Website-Editor einen Button mit dem Text «Termin buchen».
Füge den kopierten Buchungslink als Ziel ein und speichere die Seite.
Öffne die Vorschau deiner Website und prüfe, ob der Button zur richtigen Buchungsseite führt.

Für einen Textlink funktioniert derselbe Weg. Verwende einen klaren Linktext wie «Termin buchen», damit Besucher das Ziel verstehen.

Die Buchung direkt anzeigen

Öffne in Bookito «Buchungslink & Website».
Wähle unter «Was soll angezeigt werden?» zunächst «Buchungsseite: Alle Leistungen». Kunden wählen dann ihre Leistung selbst. Eine einzelne Leistung oder ein aktives Anfrage-Formular kannst du gezielt auswählen.
Wähle unter «Wie soll die Buchung erscheinen?» die Option «Direkt auf der Website».
Kopiere den vollständigen «Einbettungscode» in einen dafür geeigneten Codebereich deiner Website. Speichere und öffne die Website-Vorschau.

Die Buchungsfläche braucht ausreichend Breite und Höhe. Prüfe besonders auf dem Handy, ob die ganze Auswahl erreichbar bleibt. Ergänze unter der Fläche einen normalen Link zu deiner Buchungsseite als weiteren Zugangsweg.

Ein Buchungsfenster öffnen

Wähle im selben Bereich «Fenster nach Klick» und kopiere den vollständigen Code. Er enthält den Buchungsbutton und das zugehörige Script. Füge beides auf deiner Website ein und prüfe das Fenster nach einem Klick.

Die Variante «Fester Buchungsbutton» erzeugt stattdessen einen Button unten rechts. Prüfe, ob er auf dem Handy wichtige Inhalte, Cookie-Einstellungen oder andere Schaltflächen überdeckt.

Den Aufbau am Democode erkennen

Die folgenden Beispiele sind nur zum Lesen oder für eine eigene Testseite gedacht. Sie verwenden die separate, nicht speichernde Code-Demo unter /demo, nicht den echten Demo-Salon der Startseite. Ersetze sie für deinen Betrieb durch den vollständigen Code aus deinem Konto.

Buchungslink zur Demo:

<a href="https://bookito.ch/demo">Terminbuchung ausprobieren</a>

Demo direkt innerhalb einer Seite:

<div data-bookito-inline="https://bookito.ch/embed/demo"></div>
<script async src="https://bookito.ch/embed.js"></script>

Demo als Fenster nach Klick:

<button data-bookito-popup="https://bookito.ch/embed/demo">
  Terminbuchung ausprobieren
</button>
<script async src="https://bookito.ch/embed.js"></script>

Demo mit festem Button:

<script async src="https://bookito.ch/embed.js"
  data-bookito-floating="https://bookito.ch/embed/demo"
  data-button-text="Terminbuchung ausprobieren"
  data-accent="#FF5722"></script>

Für eine eigene Einbindung kopierst du den passenden Code aus Bookito. Wenn du mehrere Buchungsflächen auf derselben Seite einbaust, muss das Bookito-Script nur einmal geladen werden. Ein normaler Link auf deine Buchungsseite bleibt als Alternative sinnvoll.

Bookito in WordPress einbauen

Mit einem normalen Button

Öffne die gewünschte Seite im WordPress-Editor. Füge einen Buttons-Block hinzu oder wähle einen vorhandenen Button. Beschrifte ihn mit «Termin buchen» und setze deinen kopierten Bookito-Buchungslink als Linkziel.

Prüfe das Ziel in der Seitenvorschau. Dieser Weg benötigt keinen ausführbaren Einbettungscode und ist auch möglich, wenn dein Editor Scripts nicht erlaubt.

Mit einem HTML-Bereich

Für die direkte Buchungsfläche oder das Buchungsfenster brauchst du einen Bereich, der den vollständigen Bookito-Code ausführen darf. Im Block-Editor kommt dafür der Block «Individuelles HTML» infrage.

WordPress kann Script- und Framecode je nach Benutzerrechten und Installation entfernen. Prüfe nach dem Speichern, ob der vollständige Code erhalten bleibt. Ein Code-Block, der Quelltext nur sichtbar anzeigt, führt die Buchung nicht aus.

Bei WordPress.com gelten zusätzlich die Möglichkeiten deines Hostingtarifs. Prüfe dort die Freigabe für den benötigten Code. Wenn der Code nicht zulässig ist, verwende den Buchungslink oder frage deinen Website-Verantwortlichen.

Diese Anleitung verwendet Bookitos vorhandenen Buchungslink und Einbettungscode. Ein natives Bookito-WordPress-Plugin ist dafür nicht vorausgesetzt.

Weiterführende WordPress-Hilfe: Buttons-Block, Individuelles HTML und Benutzerrechte und HTML bei WordPress.com.

Du hast keine eigene Website?

Du kannst deinen Buchungslink direkt mit Kunden teilen. Zum Beispiel in einer Nachricht, einer E-Mail-Signatur oder einem Profil, das einen Website-Link erlaubt.

Prüfe nach dem Einfügen, ob der Link zur richtigen Buchungsseite führt. Welche Linkfelder ein Profil anbietet, hängt vom jeweiligen Anbieter ab. Das Teilen eines Links richtet keine zusätzliche Plattformintegration ein.

Du möchtest später eine eigene Website? Beschreibe deinen Bedarf über die Bookito-Kontaktseite. Eine Website und die optionale Einrichtung werden separat angeboten.

Einbau prüfen und Fehler eingrenzen

Öffne die Website-Vorschau am Computer und auf einem schmalen Handybildschirm. Prüfe den Ablauf bis vor den Buchungsabschluss.

Richtiges Ziel: Öffnet der Button den richtigen Betrieb oder die gewählte Leistung? Prüfe bei der direkten Buchungsfläche auch die angezeigten Leistungen.
Freie Zeiten: Werden passende Zeiten angeboten? Falls nicht, öffne denselben Buchungslink direkt. Fehlen die Zeiten auch dort, prüfe die Einstellungen in Bookito.
Bedienung: Sind Text, Zeitauswahl und Schaltflächen lesbar? Kannst du die Buchung mit der Tastatur erreichen und ein Fenster wieder schliessen?
Websitecode: Bleibt die Fläche leer, prüfe, ob der Editor den Code gespeichert hat und das Script laden darf. Bei einer Sicherheitsrichtlinie oder einem Einwilligungswerkzeug muss der Website-Verantwortliche den benötigten Datenweg prüfen.
Weiterer Zugang: Funktioniert der normale Buchungslink auch dann, wenn die eingebettete Ansicht nicht geladen wird?

Bei einer Einbettung lädt deine Website Inhalte von Bookito. Prüfe mit dem Website-Verantwortlichen, welche Hinweise und Einstellungen für deine Website erforderlich sind. Diese Einbauanleitung ersetzt keine rechtliche Beurteilung.

Ein angezeigter Termin beweist noch keinen vollständigen Buchungs-, E-Mail- oder Kalenderablauf. Wenn du später einen vollständigen Test brauchst, plane ihn bewusst mit einem eigenen Testtermin. Beachte, dass der Abschluss echte Buchungen und Nachrichten auslösen kann.

Nächster Schritt

Prüfe zuerst, ob Bookito zu deinen Leistungen und Zeiten passt. Das aktuelle Angebot und die Testbedingungen findest du auf der Produktseite.

Bookito und Preise ansehen · Demo-Salon ausprobieren · Einrichtung anfragen