Интеграция в 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>

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

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

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

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

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

Спасибо ребятам из саппорта БукФорма за быструю обратную связь.

========================

Если у вас есть проект, которому нужен сайт - обращайтесь! Всегда рад новым проектам и сотрудничеству. Меня можно найти здесь:

{ "author_name": "Александр Киршин", "author_type": "self", "tags": ["rec1234567890","rec","popup"], "comments": 7, "likes": 1, "favorites": 35, "is_advertisement": false, "subsite_label": "services", "id": 104582, "is_wide": false, "is_ugc": true, "date": "Sat, 01 Feb 2020 17:35:26 +0300", "is_special": false }
Объявление на vc.ru
0
7 комментариев
Популярные
По порядку
Написать комментарий...
1

Подскажите плиз. Все сделала по инструкции, но у меня выходит попап пустой, без виджета. В чем может быть загвоздка?

Ответить
0

Напишите мне в Телеграм. Разберемся

Ответить
0

Александр, спасибо большое, что написал про нас. Ещё и так подробно! Очень ценим. Ван лав 🤗

Ответить
0

Спасибо за сервис и адеватный саппорт. Буду теперь рекомендовать сервис.

Ответить
0

Круто! Круто! Круто! Спасибо за подробнейшую инструкцию и проделанную работу.

Ответить
0

у  меня что-то тоже не вышло

Ответить

Комментарии