Online booking on a site built with Claude
One prompt — and your booking form lives on the site Claude built for you.
How it works
Your Klendr booking page — services, free time slots, confirmations and reminders — appears inside your own website in a secure frame. Clients book without leaving your site; every appointment lands in your Klendr calendar instantly, and the form always shows your live availability.
Start with your booking page in Klendr
The widget is not a separate form to fill in — it IS your Klendr booking page, shown inside your site. So build that page first: add your services with durations and prices, upload photos, write your welcome text, then open the branding editor and choose the accent and background colours, the font and the card style. Everything is yours to change: colours, fonts, cover and logo, service list and descriptions, working hours, even a second language. Only then copy the embed code.
Step-by-step setup
Copy your embed code
In Klendr open Integrations → “Embed code”. Pick the widget language (or leave it automatic) and copy the code — your booking link is already in it.
Open the chat where your site lives
Go back to the Claude conversation (or project) you used to build the website. If you have several, pick the one that has the site files.
Send the prompt below
Paste the prompt, then paste your embed code right under it so Claude has both. Claude will place the widget on the page.
Publish and test
Publish the site and make a test booking. It shows up in your Klendr calendar immediately, and the client gets the usual confirmation email.
Prompt for Claude
Copy this and send it to Claude in the chat where you build your site.
Add an online booking widget to my website. Insert the HTML below into the page where clients should book (for example a "Book" page, or a "Booking" section on the home page). Paste it exactly as it is — do not change the iframe URL and do not remove the script: they make the widget resize itself and follow the site language. Rules: - Place it in a centered container, at most about 900px wide, with some padding on mobile. - Do not give the iframe or any parent a fixed height, and do not set overflow:hidden on them — the script sets the height automatically. - Keep the surrounding page design; the widget brings its own styling. - If the site has a "Book now" button, link it to this section. Here is the code:
The embed code
<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>Replace YOUR-SALON with your booking-page name. Your personal, ready-to-paste code is in Klendr → Integrations → “Embed on your website”.
What language will the form be in?
By default the widget follows your website: the code passes your page language to it, so an English page shows an English form. If your site declares no language, the widget uses your salon language from Klendr. Want it fixed for good? In Klendr → Integrations → “Embed code” pick a language before copying the code — it is added to the link as &lang=xx.
What it looks like
On a desktop site
On mobile
These screenshots show one colour scheme as an example. Your form takes your own colours, font and services — set them in Klendr and the widget follows instantly.
Frequently asked questions
Do I need to know how to code?
No. You only copy two blocks of text: the prompt and your embed code. Claude does the rest.
Will it work on a static site?
Yes. The widget is a plain iframe plus a small script — it works on any site, however it was built.
Where do the bookings go?
Into your Klendr calendar, with the usual confirmations and reminders to the client.