Online booking on Tilda: embed your Klendr form
One T123 HTML block — your booking form right on your Tilda page.
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 on your website” and copy your personal code — your booking link is already filled in.
Add an HTML block in Tilda
In the Tilda editor click “+ Add block”, open the Other category and pick T123 “HTML code”.
Paste the code
Open the block’s Content panel, paste the code and save the block.
Publish
Publish the page. The form loads with your services and live time slots and adjusts its height automatically.
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
Does it work on Tilda’s free plan?
The T123 HTML block requires a paid Tilda plan — that is a Tilda limitation, not a Klendr one.
Will the form match my page width?
Yes — the frame takes the full width of the block and grows in height automatically, no scrollbars.
Where do the bookings go?
Into your Klendr calendar, with the usual confirmations and reminders to the client.