Buchungslink auf der eigenen Website einbinden

• Link teilen — du verschickst den Buchungslink per WhatsApp, E-Mail, in der Mail-Signatur oder auf deinem Google Business-Profil. Kunden landen auf einer eigenen Buchungsseite.
• Auf der Website einbinden — die Buchung erscheint direkt auf deiner Website. Kunden bleiben auf deiner Seite. Das ist der Weg, den wir empfehlen, wenn du eine Website hast.

1. Stelle sicher, dass Online-Buchungen in deinem Profil aktiviert sind und dass du mindestens eine Leistung und deine Arbeitszeiten hinterlegt hast — sonst hat das Widget nichts anzuzeigen.
2. Öffne die Karte Buchungslink & Website in den Einstellungen. (Nicht eingeloggt? Dann kommt zuerst die Anmeldung.)
3. Klick auf HTML kopieren. Der Code ist bereits mit deinem persönlichen Buchungslink ausgefüllt — du musst nichts anpassen.
4. Du pflegst deine Website nicht selbst? Klick auf An Webmaster senden. Damit öffnet sich eine vorbereitete E-Mail mit Code und Anleitung, die du weiterleiten kannst.

So sieht der Code aus:

<iframe
  src="https://handwerkerpro.ch/book/DEINE-BETRIEBS-ID"
  title="Termin online buchen"
  width="100%"
  height="900"
  style="border:0;width:100%"
  loading="lazy"
></iframe>

Nimm nicht diesen Beispiel-Code — er enthält keine echte Betriebs-ID. Kopiere immer den Code aus deinen Einstellungen.

Du brauchst überall dasselbe: ein Element für eigenen HTML-Code (oft „Embed“, „Code“ oder „HTML“ genannt) an der Stelle, wo die Buchung erscheinen soll.

WordPress

1. Seite oder Beitrag bearbeiten.
2. Neuen Block einfügen und nach Eigenes HTML (englisch Custom HTML) suchen.
3. Code einfügen, Seite aktualisieren, fertig.

Im alten Classic-Editor: oben rechts auf den Tab Text wechseln und den Code dort einfügen. Mit Elementor: Widget HTML verwenden.

Wix

1. Im Editor auf Hinzufügen → Einbetten → HTML einbetten.
2. Im Element auf Code eingeben klicken und den Code einfügen.
3. Das Element auf dem Raster grösser ziehen — mindestens 900 Pixel hoch, sonst wird das Widget abgeschnitten.

Jimdo

1. Element hinzufügen → Weitere Elemente → Widget / HTML.
2. Code einfügen und speichern.

Squarespace, Webflow und andere

1. Squarespace: Block Code hinzufügen und den Code einfügen.
2. Webflow: Element Embed aus dem Add-Panel ziehen.
3. Eigene Website / TYPO3 / Joomla: den Code direkt in die HTML-Vorlage der Seite einfügen.

Der Code ist auf 900 Pixel Höhe eingestellt — das passt für die meisten Betriebe. Wenn im Widget ein eigener Scrollbalken erscheint (typisch bei vielen Leistungen oder vielen freien Terminen), erhöhe den Wert bei height auf 1100 und lade die Seite neu.

Das Widget kann seine Höhe nicht selbst an deine Seite melden. Darum gilt: lieber etwas zu hoch als zu knapp — leerer Raum unten stört weniger als ein Scrollbalken im Widget.

1. Öffne die Seite in einem privaten Fenster — so siehst du sie wie ein Kunde.
2. Buche einen Testtermin durch alle vier Schritte hindurch (Leistung, Datum, Zeit, Kontaktdaten).
3. Prüfe in HandwerkerPro unter Kalender, ob der Termin angekommen ist — und lösche den Testtermin danach wieder.
4. Schau die Seite zusätzlich auf dem Handy an.

• Deine Website braucht HTTPS. Läuft sie noch über „http://“, blockieren Browser die Einbindung. Dein Hoster stellt HTTPS in der Regel kostenlos bereit.
• Das Widget bringt sein eigenes Aussehen mit — helle Darstellung und ein hellgrauer Hintergrund, unabhängig davon, ob deine Website hell oder dunkel ist. Es wirkt dadurch wie ein eigener Abschnitt auf deiner Seite.
• Kein zweiter Cookie-Hinweis. Eingebettet zeigt das Widget keinen eigenen Cookie-Banner und setzt keine Cookies — die Einwilligung deiner Besucher regelt allein deine Website.
• Kein Platz für HTML-Code? Manche günstigen Website-Baukästen erlauben keinen eigenen Code. Dann verlinke stattdessen einen Button oder Menüpunkt Termin buchen direkt auf deinen Buchungslink — am besten so, dass er in einem neuen Tab öffnet.
• Der Link bleibt gleich. Du kannst das Widget beliebig oft einbinden (Startseite, Kontaktseite, Landingpage) — alle Buchungen landen im selben Kalender.