Online-Buchung auf Shopify: das Klendr-Formular einbetten
Ein Custom-Liquid-Abschnitt — dein Buchungsformular direkt in deinem Shopify-Shop.
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
Einbettungscode kopieren
In Klendr Integrationen → „Einbettungscode“ öffnen und den persönlichen Code kopieren — dein Buchungslink ist schon darin.
Theme-Editor öffnen
Shopify-Admin → Onlineshop → Themes → Anpassen. Wähle oben die Seite, auf der Kunden buchen sollen (zum Beispiel eine Seite „Buchen“).
Custom-Liquid-Abschnitt hinzufügen
Klicke „Abschnitt hinzufügen“, wähle „Custom Liquid“ und füge den Code in das Liquid-Feld ein. Custom Liquid behält das Skript, der Texteditor würde es löschen.
Speichern und testen
Auf Speichern klicken und die Seite im Shop öffnen. Mache eine Testbuchung — sie erscheint sofort im Klendr-Kalender.
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
Warum nicht in den Seiteneditor einfügen?
Shopifys Texteditor entfernt Script-Tags, dann könnte das Formular seine Höhe nicht anpassen. Der Custom-Liquid-Abschnitt lässt den Code unverändert.
Funktioniert das in jedem Shopify-Tarif?
Ja. Custom Liquid gibt es in Online-Store-2.0-Themes in allen Tarifen; in älteren Themes fügst du den Code direkt in die Template-Datei ein.
Wohin gehen die Buchungen?
In deinen Klendr-Kalender, mit den üblichen Bestätigungen und Erinnerungen an den Kunden.