Онлайн-запись на сайте, созданном в Claude

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

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

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

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

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

Промпт для Claude

Скопируйте и отправьте Claude в том же чате, где вы делаете сайт.

Добавь на мой сайт виджет онлайн-записи.

Вставь HTML ниже на страницу, где клиенты должны записываться (например, на страницу «Запись» или в секцию записи на главной). Вставь его ровно как есть — не меняй адрес в iframe и не удаляй скрипт: они отвечают за автоподбор высоты и за язык виджета.

Правила:
- Помести его в центрированный контейнер шириной примерно до 900px, с отступами на мобильных.
- Не задавай фиксированную высоту ни iframe, ни родительским блокам и не ставь им overflow:hidden — высоту выставляет скрипт.
- Оформление страницы вокруг оставь как есть, виджет приносит свои стили.
- Если на сайте есть кнопка «Записаться», сделай, чтобы она вела на эту секцию.

Вот код:

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

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

Как это выглядит

На сайте (компьютер)

На телефоне

На скриншотах — одна цветовая схема для примера. Ваша форма возьмёт ваши цвета, шрифт и услуги: задайте их в Klendr, и виджет сразу подхватит.

Частые вопросы

Гайды для других платформ