Гайд по интеграции · Tilda

Онлайн-запись на Тильде: встраиваем форму Klendr

Один HTML-блок T123 — и форма записи прямо на вашей странице в Тильде.

КороткоВ редакторе Tilda добавьте блок T123 «HTML-код», вставьте код Klendr (ниже), замените YOUR-SALON на имя вашей страницы записи и опубликуйте. Форма записи отобразится прямо на странице Тильды, а записи попадут в календарь Klendr. Займёт около 3 минут.

Как это работает

Ваша страница записи Klendr — услуги, свободные слоты, подтверждения и напоминания — появляется внутри вашего собственного сайта в защищённой рамке. Клиенты записываются, не покидая ваш сайт; каждая запись мгновенно попадает в календарь Klendr, а форма всегда показывает актуальные свободные окна.

Авто-высота — форма растёт вместе с содержимым, без внутренних скроллбаров

Клиенты всегда видят актуальные свободные окна

Каждая запись мгновенно попадает в календарь Klendr

Подтверждения, напоминания и перенос записи работают как обычно

Сначала — страница записи в Klendr

Виджет — это не отдельная форма, которую нужно заполнять: это и есть ваша страница записи Klendr, показанная внутри вашего сайта. Поэтому сначала соберите её: добавьте услуги с длительностью и ценами, загрузите фотографии, напишите приветственный текст, а затем в редакторе брендинга выберите цвет акцентов и фона, шрифт и стиль карточек. Меняется всё: цвета, шрифты, обложка и логотип, список услуг и описания, рабочие часы и даже второй язык. И только потом копируйте код для вставки.

Поменяете что-то позже — сайт обновится сам: код остаётся прежним, к сайту больше возвращаться не нужно.

Пошаговая настройка

Скопируйте код вставки

В Klendr откройте Интеграции → «Встроить на ваш сайт» и скопируйте персональный код — ваша ссылка записи уже подставлена.

Добавьте HTML-блок в Тильде

В редакторе Tilda нажмите «+ Добавить блок», откройте категорию «Другое» и выберите T123 «HTML-код».

Вставьте код

Откройте панель «Контент» блока, вставьте код и сохраните.

Опубликуйте

Опубликуйте страницу. Форма загрузится с вашими услугами и живыми слотами и сама подстроится по высоте.

Код для вставки

<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>

Замените YOUR-SALON на имя вашей страницы записи. Персональный готовый код — в Klendr → Интеграции → «Встроить на ваш сайт».

На каком языке будет форма?

По умолчанию виджет следует за вашим сайтом: код передаёт ему язык страницы, поэтому на русской странице форма будет русской. Если сайт язык не указывает, виджет возьмёт язык вашего салона из Klendr. Нужен один язык навсегда? В Klendr → Интеграции → «Код для вставки» выберите язык перед копированием кода — он добавится в ссылку как &lang=xx.