Online-Buchung auf einer mit Claude gebauten Website

So funktioniert es

Deine Klendr-Buchungsseite — Leistungen, freie Zeiten, Bestätigungen und Erinnerungen — erscheint in einem sicheren Rahmen direkt auf deiner eigenen Website. Kunden buchen, ohne deine Seite zu verlassen; jeder Termin landet sofort in deinem Klendr-Kalender.

Beginne mit deiner Buchungsseite in Klendr

Das Widget ist kein separates Formular, das du ausfüllst — es IST deine Klendr-Buchungsseite, angezeigt auf deiner Website. Baue also zuerst diese Seite: Leistungen mit Dauer und Preisen anlegen, Fotos hochladen, Begrüßungstext schreiben und im Branding-Editor Akzent- und Hintergrundfarbe, Schrift und Kartenstil wählen. Alles ist änderbar: Farben, Schriften, Titelbild und Logo, Leistungsliste und Beschreibungen, Arbeitszeiten, sogar eine zweite Sprache. Erst danach kopierst du den Einbettungscode.

Schritt-für-Schritt-Einrichtung

Prompt für Claude

Kopiere ihn und schicke ihn Claude in dem Chat, in dem du deine Website baust.

Füge meiner Website ein Online-Buchungs-Widget hinzu.

Setze das HTML unten auf die Seite, auf der Kunden buchen sollen (zum Beispiel eine "Buchen"-Seite oder einen Buchungsbereich auf der Startseite). Füge es genau so ein, wie es ist — ändere die iframe-URL nicht und entferne das Skript nicht: sie sorgen für die automatische Höhe und die Sprache des Widgets.

Regeln:
- Platziere es in einem zentrierten Container von höchstens etwa 900px Breite, mit etwas Abstand auf Mobilgeräten.
- Gib weder dem iframe noch einem Elternelement eine feste Höhe oder overflow:hidden — die Höhe setzt das Skript.
- Lass das umgebende Design unverändert; das Widget bringt sein eigenes Styling mit.
- Wenn die Seite einen "Jetzt buchen"-Button hat, verlinke ihn auf diesen Abschnitt.

Hier ist der Code:

Der Einbettungscode

<iframe src="https://klendr.me/book/YOUR-SALON?embed=1"
  style="width:100%;border:0;height:640px" title="Booking" id="klendr-frame"></iframe>
<script>(function(){var f=document.getElementById('klendr-frame');
function tell(){try{f.contentWindow.postMessage(
{type:'klendr:hostlang',lang:document.documentElement.lang||''},'*');}catch(e){}}
addEventListener('message',function(e){var d=e.data;if(!d)return;
if(d.type==='klendr:height'&&d.height){f.style.height=(d.height+8)+'px';}
if(d.type==='klendr:ready'){tell();}});
f.addEventListener('load',tell);})();</script>

Ersetze YOUR-SALON durch den Namen deiner Buchungsseite. Deinen persönlichen, fertigen Code findest du in Klendr → Integrationen → „Auf deiner Website einbetten“.

In welcher Sprache erscheint das Formular?

Standardmäßig folgt das Widget deiner Website: der Code übergibt ihm die Seitensprache, auf einer deutschen Seite erscheint also ein deutsches Formular. Gibt die Seite keine Sprache an, nutzt das Widget die Sprache deines Salons aus Klendr. Fest einstellen? In Klendr → Integrationen → „Einbettungscode“ vor dem Kopieren eine Sprache wählen — sie wird als &lang=xx an den Link angehängt.

So sieht es aus

Auf der Website (Desktop)

Auf dem Handy

Die Screenshots zeigen beispielhaft ein Farbschema. Dein Formular übernimmt deine Farben, Schrift und Leistungen — stelle sie in Klendr ein, das Widget folgt sofort.

Häufige Fragen

Anleitungen für andere Plattformen