Terminbuchung in die Website einbinden: die vier Wege

Wir betreiben ein eigenes Buchungssystem und bauen es bei unseren Kunden ein. Die Beispiele unten sind die, die wir tatsächlich ausliefern. Das Muster ist aber nicht unseres: Nahezu alle Systeme arbeiten nach demselben Prinzip, deshalb übertragen sich die Punkte auf andere Anbieter.

Weg 1: die Script-Zeile

Sie kopieren eine Zeile in den Quelltext Ihrer Seite. Der Browser Ihres Besuchers lädt daraufhin ein kleines Programm vom Server des Anbieters, und dieses Programm baut an der betreffenden Stelle das Buchungsfenster auf. Bei uns lautet die Zeile:

<script src="https://app.mde-digital.de/booking.js" data-shop="ihr-betrieb"></script>

Das Attribut data-shop benennt den Betrieb, um dessen Kalender es geht. Alles andere — Leistungen, Dauer je Leistung, Mitarbeiter, Öffnungszeiten, die Akzentfarbe des Fensters — liegt im Konto und nicht im Code. Das ist der eigentliche Vorteil dieser Bauart: Die eingebaute Zeile bleibt für immer dieselbe, auch wenn Sie ein halbes Jahr später Leistungen umbenennen, Preise anheben oder eine Kollegin einstellen.

Zwei Darstellungsarten stehen zur Wahl:

• Fest in der Seite (Voreinstellung): Das Fenster sitzt dort, wo die Zeile steht, und wächst mit dem Inhalt mit. Mit dem Zusatz data-target="#termin" landet es stattdessen in einem bestimmten Abschnitt, egal wo im Quelltext die Zeile steht.
• Als aufklappendes Fenster: Mit dem Zusatz data-mode="popup" erscheint statt des Kastens ein Knopf „Termin buchen“, der die Buchung über die Seite legt. Praktisch, wenn die Buchung auf jeder Unterseite erreichbar sein soll, ohne das Layout zu verändern.

Wohin die Zeile gehört, hängt vom Unterbau ab: In Baukästen gibt es dafür meist einen Baustein für eigenen HTML-Code, in WordPress einen Block für Custom HTML, bei einer selbst gebauten Seite setzt sie der Entwickler direkt. Wenn Ihr Baukasten keinen eigenen HTML-Code zulässt — das kommt in einfachen Tarifen vor —, scheidet dieser Weg aus, und Weg 3 wird zum Hauptweg.

Weg 2: der iframe

Ein iframe ist ein Rahmen, in dem eine fremde Seite innerhalb Ihrer Seite läuft. Er ist die ältere Technik und funktioniert überall, hat aber einen bauartbedingten Haken: Der Rahmen kennt die Höhe seines Inhalts nicht. Entweder Sie geben ihm zu viel Höhe, dann klafft unter dem Buchungsfenster eine leere Fläche, oder zu wenig, dann bekommt Ihre Seite mittendrin einen zweiten Scrollbalken. Auf dem Telefon ist das besonders unangenehm. Zudem übernimmt ein iframe weder Schrift noch Farben Ihrer Seite.

Wir setzen ihn deshalb nicht ein. Wo ein System ausschließlich diesen Weg anbietet, ist er trotzdem gangbar — geben Sie dem Rahmen dann großzügig Höhe und prüfen Sie das Ergebnis an einem echten Telefon, nicht nur im verkleinerten Browserfenster am Schreibtisch.

Weg 3: Link statt Einbau

Nicht jeder Einstieg muss ein eingebautes Fenster sein. Legen Sie den Buchungsschritt auf eine eigene Unterseite — sagen wir ihre-domain.de/termin — und verweisen Sie von überall sonst nur dorthin. Das ist der einzige Weg, der auch außerhalb Ihrer Website trägt:

• Google-Unternehmensprofil: Für Aktionen wie „Termin vereinbaren“ lassen sich laut Google-Unternehmensprofil-Hilfe bis zu zehn Links je Kategorie hinterlegen (abgerufen am 27. Juli 2026). Dieser Link führt direkt auf Ihre Terminseite — der kürzeste Weg von der Google-Karte in Ihren Kalender.
• Instagram und Facebook: Im Profil lassen sich zwar mehrere Links hinterlegen, prominent angezeigt wird aber der erste. Für einen Betrieb, der von Terminen lebt, gehört an diese Stelle meist die Terminseite und nicht die Startseite.
• E-Mail-Signatur und Nachrichten: Ein Satz mit Link unter jeder Mail erspart das Hin und Her über mögliche Uhrzeiten.
• Aufkleber und Aufsteller im Laden: Ein QR-Code am Tresen führt auf dieselbe Seite. Gedacht für Kunden, die beim Bezahlen den nächsten Termin gleich mitnehmen wollen, aber ihren Kalender nicht im Kopf haben.

Damit ein solcher Link funktioniert, muss das Ziel ohne Erklärung verständlich sein: zwei Sätze oben, worum es geht, darunter das Buchungsfenster. Keine Zwischenseite, kein Formular davor.

Weg 4: der Knopf, der immer mitläuft

Der Einbau, der im Alltag den größten Unterschied macht, ist kein Widget, sondern ein farblich abgesetzter Knopf in der Navigation: „Termin buchen“, auf jeder Unterseite sichtbar, auf die Terminseite verweisend oder das aufklappende Fenster öffnend. Auf dem Telefon gehört er in die dauerhaft sichtbare Leiste und nicht ins ausgeklappte Menü, weil er sonst zwei Klicks entfernt ist.

Unsere Regel beim Aufbau einer Seite: Von jeder beliebigen Stelle aus ist die Buchung mit einem Klick erreichbar. Das kostet nichts, ist in fünf Minuten geändert und lässt sich anschließend an der Zahl der Online-Buchungen ablesen.

Fünf Stolpersteine beim Einbau

• Ein Einwilligungsbanner schluckt das Script: Werkzeuge, die pauschal jedes fremde Script sperren, sperren auch das Buchungsfenster — der Besucher sieht dann an dieser Stelle nichts. Rufen Sie Ihre Seite nach dem Einbau einmal in einem frischen Browserfenster auf, so wie ein Neukunde sie sieht.
• Zwischenspeicher im Browser: Unsere booking.js wird eine Stunde lang zwischengespeichert. Nach einer Änderung am Widget sehen wiederkehrende Besucher deshalb kurzzeitig noch die vorherige Fassung. Beim Testen hilft ein Neuladen ohne Zwischenspeicher.
• Das Design der Seite färbt ab: Globale Gestaltungsregeln Ihrer Website für Knöpfe, Eingabefelder oder Überschriften können in das eingebaute Fenster hineinwirken. Ein Blick auf das fertige Widget direkt nach dem Einbau erspart späteres Rätselraten.
• Eingebaut, aber nicht eingerichtet: Ein Widget ohne gepflegte Leistungsdauern, Öffnungszeiten und Puffer produziert Termine, die Ihnen den Tag zerlegen. Der Einbau ist die halbe Stunde, die Einrichtung ist die eigentliche Arbeit.
• Der Absatz in der Datenschutzerklärung fehlt: Ein eingebautes Buchungsfenster lässt Kundendaten über einen Dienstleister laufen. Das gehört in Ihre Datenschutzerklärung, und mit dem Anbieter brauchen Sie einen Vertrag zur Auftragsverarbeitung.

Zum letzten Punkt haben wir zwei eigene Artikel: Welche Absätze eine Website überhaupt braucht, steht unter Brauche ich eine Datenschutzerklärung? — die fünf Kriterien speziell für Buchungssysteme unter DSGVO-konforme Online-Terminbuchung.

Was Sie einbauen — und was das System nicht kann

Damit Sie den Einbau richtig planen, hier ehrlich der Umfang dessen, was hinter der einen Zeile steckt:

• Zeiten je Leistung: Dauer pro Leistung, Einwirkzeiten für Termine mit Pause in der Mitte und Nachpuffer für Aufräumen oder Anfahrt.
• Warteliste: Ist ein Tag voll, tragen sich Kunden ein und rücken nach, wenn jemand absagt.
• Kundenkartei und Erinnerungen: Notizen zum Kunden im System, automatische Erinnerung per E-Mail vor dem Termin.
• Newsletter, getrennt vom Buchen: Werbung nur mit eigener Einwilligung, nicht als Nebenprodukt der Terminvergabe.
• Anfrageformular statt Kalender: Für Betriebe, deren Aufwand vorher nicht feststeht: Anfrage mit Postleitzahl und Fotos statt festem Zeitfenster.

Nicht enthalten: Zahlungen, Anzahlungen und Gutscheine. Wer online kassieren will, braucht dafür ein anderes Werkzeug. Ebenso wenig verwaltet das System Räume, Kabinen oder Geräte — buchbar sind Leistungen und Mitarbeiter. Das gehört in einen Artikel über den Einbau, weil beides die Frage betrifft, ob eine Zeile Code Ihr Problem überhaupt löst.

Wer baut es ein, und was kostet es

Liegt Ihre Website bei uns, setzen wir die Zeile selbst. Liegt sie woanders, bekommen Sie sie mit einer Anleitung für Ihr System — und wenn Sie uns Zugang geben, machen wir es. Der Preis für das Buchungssystem: 99 € im Monat, dazu einmalig 290 € für die Einrichtung, die entfällt, sobald Sie gleichzeitig ein Website-Paket beauftragen. Das Ganze in Aktion — Dashboard und Buchungsfenster — sehen Sie auf Online-Terminbuchung, die vollständige Übersicht steht auf /preise.

Fazit

Der Einbau ist der einfachste Teil: eine Zeile, ein Speichern, fertig. Entscheidend sind die beiden Fragen daneben — ob der Einstieg an einer Stelle sitzt, an der Kunden ihn wirklich finden, und ob im Hintergrund Zeiten und Puffer so eingestellt sind, dass die Buchungen zu Ihrem Tag passen. Wer beides klärt, braucht danach nichts mehr am Code zu ändern.