Terminbuchung auf der Website einbinden

Das Telefon klingelt zur falschen Zeit, die Website steht schon. Fünf Wege, das Buchungsformular auf die Seite zu bringen, und was jeder davon im Alltag bedeutet.

Von Sven Gauditz Veröffentlicht 29. Oktober 2026 6 Min. Lesezeit

Die Werkstatt hat eine ordentliche Website, und trotzdem klingelt um 7:40 Uhr das Telefon, wenn alle unter einem Auto liegen. Der Termin soll dorthin, wo die Kundschaft ohnehin schaut: auf die eigene Seite. Dafür gibt es fünf Wege, die sich in Aufwand, Aussehen und Pflege deutlich unterscheiden.

Kurz gesagt: Am flexibelsten ist ein Script-Tag. Eine Zeile Code setzt das Buchungsformular direkt in Ihre Seite, ohne Rahmen und ohne Plugin. Ein iframe zeigt eine fremde Seite in einem Fenster, ein Plugin braucht ein passendes CMS, und ein Link oder QR-Code kommt ohne jeden Einbau aus. Wer seine Seite nicht bearbeiten kann, startet mit dem Link.

Die fünf Wege im Überblick

Weg	Aufwand	Aussehen	Passt, wenn
Script-Tag	Eine Zeile Code einfügen	Läuft in Ihrer Seite, übernimmt Ihre Farben und Ihr Logo	Sie einen Code- oder HTML-Block einfügen können
iframe	Eine Zeile Code, dazu Höhe und Breite anpassen	Eigenes Fenster mit eigenem Dokument	Ein System nur diesen Weg anbietet
Plugin	Installieren, konfigurieren, pflegen	Abhängig vom Plugin und Ihrem Theme	Sie ohnehin alles in WordPress verwalten
Link zur Buchungsseite	Kein Einbau	Eigene Seite des Anbieters	Sie keine Website haben oder nichts ändern wollen
QR-Code	Link in einen QR-Code verwandeln	Wie der Link	Tresen, Flyer, Schaufenster, Visitenkarte

Script-Tag: das Formular direkt in der Seite

Ein Script-Tag lädt ein kleines Programm vom Anbieter nach, das an der Stelle des Tags das Formular aufbaut. Bei PixTermin sieht das so aus:

<script src="https://pixtermin.com/embed.js"
        data-widget="ihr-widget-key"
        data-mode="inline"
        data-scheme="light"
        async></script>

Den Schlüssel hinter data-widget zeigt Ihnen die Verwaltung unter „Widget & Design“, fertig kopierbar. Mit data-mode wählen Sie, wie das Formular erscheint: inline direkt im Text, button als Knopf „Termin buchen“, der das Formular in einem Fenster über der Seite öffnet, oder modal, das sich sofort als Fenster öffnet. Weitere Angaben wie data-lang für die Sprache oder data-target für einen bestimmten Platz auf der Seite sind optional.

Der Vorteil liegt im Aufbau: PixTermin zeichnet das Formular in einem Shadow DOM. Das ist ein abgeschotteter Bereich im Browser, in dem Stile von außen nicht hineinwirken und Stile von innen nicht auslaufen (MDN). Ihr Theme kann das Formular also nicht verstellen, und das Formular verstellt Ihr Theme nicht. Es ist kein iframe, die Seite behält eine einzige Struktur, und die Höhe passt sich dem Inhalt an. Mehrere Formulare auf einer Seite sind möglich.

Einen Haken hat es: Sie müssen an der Stelle, an der Sie den Code einfügen, HTML erlauben. Bei manchen Baukästen und Rollen in Redaktionssystemen ist das gesperrt. Dann bleibt der Link.

iframe: ein Fenster auf eine andere Seite

Ein iframe bettet ein komplettes fremdes Dokument in Ihre Seite ein (MDN). Das ist robust, weil nichts aufeinander einwirken kann, aber es hat Folgen im Alltag. Der Rahmen hat zunächst eine feste Größe von 300 × 150 Pixeln, die Sie selbst auf Ihr Layout anpassen. Wächst das Formular, etwa weil der Kunde ein Pflichtfeld vergessen hat und eine Fehlermeldung erscheint, muss die Höhe mitwachsen, sonst entsteht ein zweiter Scrollbalken im Fenster. Auf dem Handy wirkt ein Scrollbereich im Scrollbereich unbeholfen.

Wer einen iframe nutzt, gibt ihm ein title-Attribut, damit Screenreader ankündigen, was dahinter liegt. Ein iframe ist sinnvoll, wenn ein Anbieter nur diesen Weg kennt oder Ihr System Skripte grundsätzlich blockiert, Fremdinhalte aber zulässt.

Plugin, Link und QR-Code

Ein Plugin gibt es für WordPress und einige andere Systeme. Es ist bequem, solange es gepflegt wird, und es hängt an Ihrer Installation: Updates, Versionsstände, Zusammenspiel mit dem Theme. Wie sich das gegenüber einem Script-Tag verhält, steht im Beitrag WordPress-Terminbuchung ohne Plugin.

Der Link ist der einfachste Weg. Jeder PixTermin-Betrieb hat eine eigene Buchungsseite unter /b/ihr-betrieb, mit Ihrem Logo und Ihren Farben. Sie verlinken sie im Menü, in der E-Mail-Signatur, bei Google Business oder in Social-Media-Profilen. Auch ohne Website können Kundinnen und Kunden so buchen.

Ein QR-Code ist derselbe Link in anderer Form. Erzeugen Sie ihn aus der Adresse Ihrer Buchungsseite mit einem beliebigen QR-Generator und drucken Sie ihn auf den Tresenaufsteller, die Rechnung oder das Schaufenster. Wer vor dem Laden steht und nicht anrufen will, bucht direkt am Handy.

Ladezeit und Datenschutz

Ein nachgeladenes Skript kostet Ladezeit, das lässt sich messen. Das PixTermin-Skript ist rund 125 kB groß und wird komprimiert mit etwa 33 kB übertragen (gemessen am 29.10.2026). Mit dem Attribut async lädt der Browser es parallel zur Seite, statt den Seitenaufbau anzuhalten (MDN). Ein iframe lässt sich mit loading="lazy" erst laden, wenn er in die Nähe des sichtbaren Bereichs kommt. Das lohnt sich, wenn das Formular weit unten auf der Seite steht.

Zum Datenschutz gilt bei jedem Weg dasselbe: Sobald das Formular lädt, ruft der Browser Daten vom Server des Anbieters ab, der damit die IP-Adresse sieht. Das gehört in Ihre Datenschutzerklärung. PixTermin liegt auf Servern in Deutschland, lädt seine Schriften vom eigenen Server und setzt keine Marketing-Cookies. Die Checkliste dazu finden Sie in Online-Terminbuchung und DSGVO.

Welcher Weg passt zu welchem Betrieb?

Die Werkstatt mit WordPress-Seite nimmt das Script-Tag und legt es auf die Seite „Termin“. Ein HTML-Block genügt, das Formular sieht aus wie der Rest der Seite, und niemand muss ein Plugin pflegen.

Die Praxis mit Baukasten-Website prüft zuerst, ob der Baukasten ein HTML- oder Einbettungselement kennt. Wenn ja, ist das der Weg. Wenn nein, verlinkt sie die Buchungsseite im Menüpunkt „Termin“. Anleitungen für einzelne Systeme gibt es für Wix, IONOS und Strato.

Die Ferienwohnung ohne eigene Website kommt mit der Buchungsseite aus. Den Link setzt sie in Profile und Anzeigen, den QR-Code in die Gästemappe. Die Seite zeigt Zeitraum und Einheit mit Fotos, genau wie ein eingebundenes Formular.

Das Studio mit Laufkundschaft druckt den QR-Code auf Flyer und ins Schaufenster und hängt zusätzlich ein Formular auf die Website.

Die Wege schließen sich nicht aus. Script-Tag auf der Website, Link in der E-Mail-Signatur und QR-Code am Tresen zeigen auf dieselben Leistungen und denselben Kalender. Alle Buchungen laufen in derselben Verwaltung zusammen.

Schritt für Schritt mit PixTermin

Konto anlegen. Der kostenlose Tarif reicht zum Ausprobieren und hat kein Ablaufdatum.
Leistung und Zeiten festlegen. Die Branchen-Vorlagen richten Leistungen, Öffnungszeiten und Formularfelder vor, Sie passen sie an.
Unter „Widget & Design“ eine Formular-Vorlage, Erscheinungsbild, Farben und Logo wählen. Die Vorschau zeigt das echte Widget.
Den Einbau-Code kopieren.
Auf Ihrer Seite einen HTML- oder Code-Block einfügen und den Code hineinsetzen. Bei WordPress heißt er „Individuelles HTML“.
Eine Testbuchung durchführen, am besten vom Handy und aus einem privaten Browserfenster.

Ändern Sie später Farben oder Logo, übernimmt der eingebaute Code das beim nächsten Laden. Das Farbschema (hell oder dunkel) steht dagegen im Code selbst: Wählen Sie ein anderes, kopieren Sie das Snippet neu.

Nach dem Einbau prüfen

Handy. Gehen Sie die Buchung auf einem Telefon vom ersten bis zum letzten Schritt durch. Tippen sich die Zeiten gut, bleibt das Formular im Bildschirm, ist der Absenden-Knopf erreichbar?
Hell und dunkel. Mit data-scheme legen Sie fest, ob das Formular hell, dunkel oder passend zum Gerät erscheint. Sieht es auf Ihrem Seitenhintergrund lesbar aus?
Sprache. Das Formular spricht Deutsch, Englisch, Russisch und Polnisch. Mit data-lang erzwingen Sie eine Sprache, etwa auf einer englischen Unterseite.
E-Mails. Kommt die Bestätigung an, auch im Spam-Ordner? Erreicht die Benachrichtigung über die neue Buchung Ihr Postfach?
Datenschutzerklärung. Ergänzen Sie den Anbieter als Empfänger, bevor das Formular öffentlich läuft.
Aufräumen. Stornieren Sie die Testbuchung, damit der Slot wieder frei ist.

Messen Sie die Ladezeit der Seite vor und nach dem Einbau, etwa mit dem Lighthouse-Bericht in den Entwicklerwerkzeugen von Chrome. Dann wissen Sie, was das Formular kostet, und raten nicht.

Häufige Fragen

Kann ich mehrere Buchungsformulare auf einer Seite zeigen?

Ja. Jeder Script-Tag startet ein eigenes Formular. Das ist nützlich, wenn eine Seite zwei Angebote bewirbt und jedes Formular einen eigenen Ablauf braucht.

Was sehen Besucher, wenn PixTermin einmal nicht erreichbar ist?

Ihre Seite lädt normal weiter. An der Stelle des Formulars erscheint die Meldung, dass der Terminbucher gerade nicht erreichbar ist. Ein Telefonhinweis direkt darunter fängt diesen Fall ab.

Reicht der Link zur Buchungsseite, wenn ich keine Website habe?

Ja. Die Buchungsseite ist eine vollständige Strecke mit Ihrem Logo und Ihren Farben, die auch auf dem Handy funktioniert. Verlinken Sie sie dort, wo Ihre Kundschaft Sie findet: Google-Profil, Instagram, E-Mail-Signatur, QR-Code im Laden.

Brauche ich Programmierkenntnisse?

Nein. Sie kopieren eine Zeile aus der Verwaltung und fügen sie in einen HTML-Block Ihrer Seite ein. Wer das nicht selbst tun will, schickt die Zeile an die Person, die die Website betreut.