Интеграция в 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 на мои значения. Их можно найти в настройках блоков, которые добавили в предыдущих шагах.

На нужную мне кнопку на сайте повесил ссылку вида #popup:usluga (это название, usluga, должно быть присвоено блоку BF503)

Всё. Теперь при нажатии на нужную мне кнопку на сайте появляется виджет от БукФорма с календарём для записи или оплаты.

Задача решена. Может быть ее можно решить и проще, но у меня в голову пришел только такой вариант.

Времени заняло полчаса. Если у вас получится упростить - замечательно!

За код "Зеро в Поп Апе" спасибо Диме Храбалову из Mo-Tilda. Ссылка на страницу исходник: