Buchungswidget einbinden: WordPress, Wix, Jimdo und mehr

Deine Website ist für viele Menschen der erste Anlaufpunkt. Wenn sie dort direkt einen Termin buchen können, ohne die Seite zu verlassen oder erst eine E-Mail zu schreiben, ist die Hürde am niedrigsten. Genau dafür gibt es Buchungswidgets.

Die gute Nachricht: Du brauchst keine Programmierkenntnisse. In den meisten Fällen kopierst du zwei Zeilen Code an die richtige Stelle. In diesem Artikel zeigen wir dir, welche Varianten es gibt und wie die Einbindung in den gängigen Website-Baukästen funktioniert.

Link oder Widget: Was passt zu dir?

Bevor es um Code geht, eine Grundsatzfrage. Es gibt zwei Wege, Kunden von deiner Website zur Buchung zu bringen: einen einfachen Link auf deine Buchungsseite oder ein eingebettetes Widget.

Variante	So sieht es aus	Gut geeignet für
Buchungslink	Button oder Text, der auf deine Buchungsseite führt	Jede Website, auch ohne Code-Möglichkeit
Inline-Widget	Der Buchungskalender erscheint direkt im Seiteninhalt	Eine eigene Seite "Termin buchen"
Popup-Button	Ein Klick öffnet die Buchung in einem Fenster über der Seite	Startseite, Leistungsseiten, Preislisten
Schwebender Button	Ein Button in der Ecke, auf jeder Seite sichtbar	Websites, auf denen gebucht werden soll, egal wo man gerade ist

Du kannst die Varianten auch kombinieren, zum Beispiel einen schwebenden Button auf allen Seiten und ein Inline-Widget auf der Seite "Termine".

So funktioniert ein Buchungswidget

Technisch besteht ein Widget meist aus zwei Teilen: einem Platzhalter, der sagt, wo die Buchung erscheinen soll, und einem Skript, das die Buchungsoberfläche lädt. Die eigentliche Buchung läuft in einem eingebetteten Rahmen ab. Deine Website muss also keine Termine verwalten, sie zeigt nur das Fenster dazu an.

Beim BookBase-Widget passt sich die Höhe des Inline-Kalenders automatisch an den Inhalt an. Es gibt also keine abgeschnittenen Bereiche und keine doppelten Scrollbalken, sofern dein Baukasten den Code direkt in die Seite schreibt.

Der BookBase-Code für alle drei Varianten

In allen Beispielen steht dein-studio für den Namen deiner Buchungsseite. Du findest ihn in deiner Adresse bookbaseapi.com/book/dein-studio. Ersetze ihn durch deinen eigenen Namen.

Inline-Widget

<div data-bookbase-inline data-slug="dein-studio"></div>
<script src="https://bookbaseapi.com/widget.js" async></script>

Der div ist der Platzhalter. An dieser Stelle erscheint der Buchungskalender.

Popup-Button

<button type="button" data-bookbase-popup data-slug="dein-studio">Termin buchen</button>
<script src="https://bookbaseapi.com/widget.js" async></script>

Den Button kannst du wie jeden anderen Button gestalten. Der Text zwischen den Tags ist frei wählbar.

Schwebender Button

<script src="https://bookbaseapi.com/widget.js" data-slug="dein-studio" data-floating="true" data-label="Termin buchen" async></script>

Hier steckt alles im Skript selbst. Mit data-label legst du die Beschriftung fest. Diesen Code fügst du am besten an einer Stelle ein, die auf allen Seiten geladen wird, etwa im Footer-Bereich deines Baukastens.

Wichtig: Das Skript muss pro Seite nur einmal geladen werden. Wenn du Inline-Widget und Popup-Button auf derselben Seite nutzt, reicht ein einziges script-Tag.

Alle Optionen findest du in der Widget-Dokumentation.

Schritt für Schritt in deinem Baukasten

Die Bezeichnungen in den Baukästen ändern sich ab und zu, und manche Funktionen hängen vom gebuchten Tarif ab. Das Prinzip bleibt aber gleich: Du suchst ein Element für eigenen HTML-Code und fügst dort den Code ein.

WordPress

1. Öffne die Seite, auf der die Buchung erscheinen soll, im Block-Editor.
2. Füge einen Block vom Typ "Individuelles HTML" hinzu.
3. Kopiere den Code für das Inline-Widget oder den Popup-Button hinein.
4. Speichere und prüfe die Seite in der Vorschau.

Wenn du einen Page-Builder nutzt, heißt das passende Element meist "HTML" oder "Code". Für den schwebenden Button brauchst du eine Stelle, die auf allen Seiten geladen wird, etwa ein Feld für Code im Footer in deinem Theme. Bei WordPress.com hängt es vom Tarif ab, ob eigene Skripte erlaubt sind.

Wix

1. Öffne den Editor und füge über "Hinzufügen" ein Element zum Einbetten von Code hinzu.
2. Wähle die Option für eigenen HTML-Code und füge den Code ein.
3. Zieh den Rahmen groß genug, damit der Kalender vollständig sichtbar ist.

Wix zeigt eigenen Code in einem eigenen Rahmen mit fester Größe an. Das hat zwei Folgen: Die automatische Höhenanpassung greift nur innerhalb dieses Rahmens, und ein Popup öffnet sich ebenfalls nur darin. Für Wix ist deshalb oft das Inline-Widget mit großzügiger Höhe die beste Wahl, oder ein normaler Wix-Button, der auf deine Buchungsseite verlinkt.

Jimdo

1. Öffne die Seite im Bearbeitungsmodus.
2. Füge ein Element für HTML-Code oder Widgets hinzu, sofern dein Jimdo-Paket das anbietet.
3. Kopiere den Code hinein und speichere.

Falls dein Paket kein Element für eigenen Code enthält, nutze einen Button mit Link auf deine Buchungsseite. Das funktioniert immer.

Squarespace

1. Bearbeite die gewünschte Seite und füge einen Code-Block hinzu.
2. Füge den Code ein und stelle sicher, dass der Block als HTML interpretiert wird.
3. Speichere und prüfe die Seite außerhalb des Editors.

Ob Code-Blöcke mit Skripten möglich sind, hängt vom Squarespace-Tarif ab. Alternativ funktioniert ein Button-Block mit Link auf deine Buchungsseite.

Webflow

1. Zieh ein "Code Embed"-Element an die gewünschte Stelle.
2. Füge den Code ein und speichere.
3. Für den schwebenden Button nutzt du den Bereich für eigenen Code in den Projekteinstellungen, damit er auf allen Seiten geladen wird.
4. Veröffentliche die Seite. Eingebettete Skripte laufen oft erst auf der veröffentlichten Seite, nicht im Designer.

Eigene HTML-Seite

Wenn du deine Website selbst pflegst, fügst du den Platzhalter an der gewünschten Stelle im body ein. Das Skript kann direkt darunter oder vor dem schließenden </body>-Tag stehen. Mehr ist nicht nötig.

Wo das Widget am meisten bringt

Ein Widget wirkt nur, wenn es gesehen wird. Ein paar Erfahrungswerte für die Platzierung:

• Startseite: Ein gut sichtbarer Button im oberen Bereich, nicht erst ganz unten.
• Leistungs- und Preisseiten: Wer gerade liest, was eine Leistung kostet, ist oft bereit zu buchen. Ein Popup-Button direkt daneben spart einen Umweg.
• Eigene Seite "Termin buchen": Hier passt das Inline-Widget, ergänzt um kurze Hinweise zu Anfahrt und Absageregeln.
• Mobil prüfen: Viele Besucher kommen über das Smartphone. Schau dir jede Seite mit Widget auch auf einem kleinen Bildschirm an.

Und vergiss die Orte außerhalb deiner Website nicht. Wie du deinen Buchungslink im Google-Unternehmensprofil, auf Instagram und an weiteren Stellen platzierst, liest du im Artikel Wo dein Buchungslink hingehört.

Häufige Probleme und schnelle Lösungen

Problem	Mögliche Ursache	Lösung
Widget erscheint nicht	Skript fehlt oder wird vom Baukasten entfernt	Prüfen, ob beide Zeilen eingefügt sind und der Tarif Skripte erlaubt
Rahmen erscheint, aber kein Kalender	Name der Buchungsseite falsch geschrieben	data-slug mit deiner Buchungsadresse vergleichen
Kalender abgeschnitten	Baukasten zeigt Code in einem Rahmen mit fester Höhe	Rahmen vergrößern oder auf Link-Button ausweichen
Popup nur in kleinem Bereich	Code läuft in einem eingebetteten Rahmen	Inline-Widget nutzen oder auf die Buchungsseite verlinken
Zwei schwebende Buttons	Skript doppelt eingebunden	Nur ein Skript pro Seite verwenden
Im Editor unsichtbar	Vorschau führt keine Skripte aus	Veröffentlichte Seite prüfen

Kurz zum Datenschutz

Das BookBase-Widget setzt keine Tracking-Cookies. Trotzdem ist ein externer Dienst auf deiner Website eingebunden, und das sollte in deiner Datenschutzerklärung stehen. Was dort hineingehört, erklären wir im Artikel Online-Terminbuchung und DSGVO.

Häufige Fragen

Macht das Widget meine Website langsamer? Das Skript wird mit dem Attribut async geladen. Der Browser lädt es also im Hintergrund, ohne den Aufbau deiner Seite anzuhalten.

Kann ich mehrere Widgets auf einer Seite nutzen? Ja. Du kannst zum Beispiel ein Inline-Widget und zusätzlich einen Popup-Button einsetzen. Wichtig ist nur, dass das Skript einmal eingebunden ist.

Kann ich das Aussehen anpassen? Den Popup-Button gestaltest du wie jeden anderen Button deiner Website. Für die Buchungsoberfläche selbst kannst du mit Pro Farben, Schrift, Logo und Titelbild anpassen und das BookBase-Branding entfernen.

Was passiert, wenn ich meine Leistungen ändere? Nichts an deiner Website. Das Widget zeigt immer den aktuellen Stand deiner Buchungsseite, du musst den Code also nicht neu einfügen.

Checkliste für die Einbindung

• Variante gewählt: Inline, Popup-Button oder schwebender Button
• dein-studio durch den eigenen Namen ersetzt
• Skript nur einmal pro Seite eingebunden
• Veröffentlichte Seite auf Desktop und Smartphone geprüft
• Testbuchung über das Widget gemacht
• Datenschutzerklärung ergänzt

Fazit

Ein Buchungswidget einzubinden dauert meist nur wenige Minuten. Entscheidend ist, die passende Variante für deine Website zu wählen und den Code an einer Stelle einzufügen, an der dein Baukasten ihn wirklich ausführt. Wo das nicht möglich ist, ist ein gut sichtbarer Button mit Link auf deine Buchungsseite eine vollwertige Alternative.

Noch keine Buchungsseite? Dann leg sie zuerst an. Über die Registrierung bist du in wenigen Schritten startklar und kannst den Code direkt ausprobieren.