Интеграция в Tilda сервиса BookForm от Яндекс. Мануал для ленивых

Привет! Не так давно появилась задача на сайт психотерапевта, который сделан на Тильде, интегрировать какой-то сервис, позволяющий клиентам самостоятельно записываться онлайн в календарь доступных дат. Эти даты должен был сформировать сам терапевт, добавить возможные услуги и варианты оплаты.

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

1. Заходим на сайт Bookform и регистрируемся. Шаги там простые (название компании, электронная почта, телефон, имя пользователя). Можно зарегистрироваться полностью, или зайти через аккаунт Яндекса, если он у вас есть.

2. Проходим этап настройки услуги (название, фотография опционально, карта с указанием места предоставления услуги)

3. Этап настройки календаря, продолжительности услуги по времени и её стоимости. Справа увидите примерный виджет, который будут видеть будущие клиенты.

4. Далее попадаете в окно с виджетом. Один уже создан по умолчанию и вам просто надо на него нажать.

5. Попадаем в поле выбора нужного нам вида виджета. Я занимался интеграцией на сайт, поэтому взял виджет для сайта. Он так и называется "Встроенный виджет для сайта". Он прямо посредине. После его выбора, внизу появляются 2 поля с кодами с кнопками "Скопировать код". Именно они нам и нужны для интеграции.

1. Копируем код из первого поля и переходим в настройки нашего сайта в Тильде. Выбираем "Настройки сайта". В левой колонке в самом низу выбираем "Еще". Находим "Html-код для вставки внутрь HEAD" - редактировать код. В открывшееся поле вставляем скопированный первый код из настроек Букформа.

2. Теперь код номер 2 из Букформа. Я хотел сделать всплывающее окно, чтобы при нажатии на кнопку "Записаться" на сайте именно в этом окне был виджет. За основу я взял идею "ПопАп из Зеро Блока". Что делал дальше. По шагам..

1. Добавил блок BF503. В его настройках ширину установил 100%
2. Добавил ЗероБлок. Внутри него убрал цвет фона. Нажал "+" слева сверху экрана добавил поле для кода "Add HTML"
3. Сделал нужную мне ширину и высоту этого блока, адаптировал их для всех разрешений экрана. Внутрь этого блока вставил код номер 2 из Букформа.
4. Ниже Зероблока поставил 123 блок и добавил туда код (он ниже), в котором заменил #rec на мои значения. Их можно найти в настройках блоков, которые добавили в предыдущих шагах.

<style>

.shirina{

background:none !important;

right: 0 !important;

left: 0 !important;

}

.parpadding{

padding:0 !important;

}

</style>

<script>

var ZeroPopID = '#rec1234567890'; //Прописываем ID Zero

var PopWindID = '#rec1234567890'; //Прописываем ID PopUp окна BF503

//Переносим ZeroBlock в POPup + Добавляем новый клас в POPup

$(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID));

$(PopWindID + " .t-popup__container").parent(".t-popup").addClass("parpadding")

</script>