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

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

Одна секция Custom Liquid — и форма записи прямо в вашем магазине Shopify.

КороткоВ админке Shopify откройте Магазин → Темы → Настроить, добавьте на страницу секцию «Custom Liquid» и вставьте в неё код Klendr. Сохраните — форма записи появится в магазине, а записи попадут в календарь Klendr. Займёт около 3 минут. Используйте именно Custom Liquid, а не текстовый редактор страницы: обычный редактор вырезает скрипт, который нужен виджету.

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

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

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

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

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

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

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

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

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

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

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

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

Откройте редактор темы

Админка Shopify → Магазин → Темы → Настроить. В верхней панели выберите страницу, на которой клиенты будут записываться (например, страницу «Запись»).

Добавьте секцию Custom Liquid

Нажмите «Добавить секцию», выберите «Custom Liquid» и вставьте код в поле Liquid. Custom Liquid сохраняет скрипт целиком, а текстовый редактор страницы его удалил бы.

Сохраните и проверьте

Нажмите «Сохранить» и откройте страницу в магазине. Сделайте тестовую запись — она сразу появится в календаре Klendr.

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

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