Tilda — конструктор сайтов, позволяющий онлайн собирать и публиковать сайты из готовых блоков. Данные из сайта можно отправлять на сторонние источники. Рассмотрим пример отправки данных в Бипиум.
1. Введение
Бипиум позволяет принимать и обрабатывать данные из форм сайта на Tilda.
Например, у нас есть сайт созданный на Tilda, с формой обратной связи.
Мы хотим, чтобы при нажатии кнопки Отправить введенные в форму данные сохранились в Бипиум.
2. Принцип работы
- Ваш сайт отправляет введенные пользователем в форме данные в Бипиум.
- Бипиум принимает запрос и запускает сценарий обработки полученных данных.
- На основе полученных данных в Бипиум создается новая запись в соответствующем каталоге.
3. Реализация
3.1. Подготовка полей формы в Tilda
Для передачи данных в Бипиум необходимо задать имена переменных для всех полей формы. Для нашего примера зададим следующие имена:
Имя - name
Эл. почта - email
Телефон - phone
Чем мы можем помочь? - comment
3.2. Подготовка каталога для данных в Бипиум
Для того, чтобы принимать данные из сайта, в Бипиум необходимо подготовить каталог, куда мы будем сохранять отправленные данные. Типы полей в Бипиум и Tilda отличаются, поэтому мы подготовили список соответствия популярных полей Tilda к полям в Бипиум:
- Email = Контакт с выбранным значением Электронная почта
- Телефон= Контакт с выбранным значением Телефон
- Имя = Текст
- Поле для ввода в одну строку = Текст
- Поле для ввода в несколько строк = Текст с выбранным значением Многострочный текст
- Выпадающий список = Выбор значения или Статус. Варианты ответа в Тильда - это элементы выбранного поля в Бипиум
- Вопрос с вариантами ответа = если Вид ответа - Один вариант ответа (радиокнопки), то Выбор значения или Статус, если Вид ответа - Несколько вариантов ответа (галочки), то Набор галочек или Статус (с настройкой Можно выбрать несколько)
Варианты ответа для полей Выпадающий список и Вопрос с вариантами ответа в Tilda должны быть идентичными элементам соответствующих полей в Бипиум, включая регистр
- Оценочная шкала = Число
- Галочка = Переключатель
- Дата = Дата
Tilda не передает информацию о выбранном формате для поля типа Дата, из-за чего мы не сможем отличить формат ДД-ММ-ГГГГ от формата ММ-ДД-ГГГГ и поэтому рекомендуем выбирать либо ДД-ММ-ГГГГ, либо ГГГГ-ММ-ДД
- Время = Текст с выбранным значением Текст по маске и настройкой 11:11
- Количество = Число
- Ссылка = Контакт с выбранным значением Сайт/ссылка
- Скрытое поле = Текст
- Калькулятор = Число
Создадим в Бипиум новый каталог и добавим такие же поля, которые у нас есть на нашем сайте, в соответствии со списком соответствия выше:
В свойствах каждого поля в поле ID-поля укажите имя переменной соответствующего поля, который мы задали в шаге 3.1. Важно сохранять регистры букв, в соответствии с указанием в Tilda. После указания текстового ID он сразу отображается слева от названия поля.
Это позволит соотнести поля из Tilda с полями в Бипиум.
Когда все поля добавлены, сохраните каталог, нажав соответствующую кнопку в правом верхнем углу. Посмотрите ID созданного каталога: он указан в адресной строке после /catalog/
Например, если адрес выглядит так: https://tilda-demo.bpium.ru/#/section/2/catalog/16/view/0/records значит ID-каталога 16. Запомните этот ID - он понадобится нам в следующем шаге.
3.3. Подготовка инструмента приема данных
В Бипиум есть возможность создания специальных ссылок для приема данных из сторонних сервисов. Этот инструмент называется Внешние запросы. Создать внешний запрос для приема данных можно в каталоге Внешние запросы. По умолчанию этот каталог находится в отделе Управление. Переходим в этот каталог и нажимаем кнопку Добавить:
Заполните поля как на скриншоте выше.
Также у Внешнего запроса должен быть сценарий, который обрабатывает полученные данные. Сценарий указывается в поле Выполнить. Добавим новый сценарий. Для этого нажмите кнопку Добавить в «Сценарии»:
Появится окно создания записи сценария. Скачайте готовый файл сценария по ссылке ниже.
https://drive.google.com/file/d/14LPBO8VCxH0L_eUBBV0E55-xi6jCH2HQ/view?usp=sharing
Нажмите кнопку Загрузить и выберите скачанный файл:
Нажмите на загруженный файл. У вас откроется схема сценария. В данной схеме нужно нажать на компонент УКАЖИТЕ ID КАТАЛОГА, указать в нем ID-каталога, который создали в предыдущем шаге и сохранить сам файл сценария:
Теперь сохраним запись сценария:
Также сохраним запись внешнего запроса:
Ссылка для приема данных подготовлена, она формируется следующим образом:
[Домен]/api/webrequest/[URL-идентификатор], где:
[Домен] - это Ваш домен системы Бипиум. Например: https://tilda-demo.bpium.ru/
[URL-идентификатор] - это значение, которое мы ввели в записи внешнего запроса в поле URL-идентификатор
Для домена из примера полная ссылка будет следующая:
https://tilda-demo.bpium.ru/api/webrequest/getRequest
3.4. Подключение вебхука на Tilda
Перейдем в настройки нашего сайта на Tilda. Нужно перейти в блок Формы и найти раздел Webhook:
Укажем адрес, созданный в предыдущем шаге и добавим этот Webhook:
После создания Webhook в Tilda будет отправлен тестовый запрос на указанный адрес. Проверить, что все действия выше проделаны правильно можно в каталоге Процессы. В данном каталоге должна быть одна запись со статусом Завершен:
3.5. Подключение вебхука к форме
Осталось только подключить созданный в Tilda Webhook к нужной нам форме. Для этого переходим к настройке блока с формой на нужной странице и включаем галочку: WEBHOOK: [НАШ АДРЕС]
Сохраняем изменения и публикуем страницу.
4. Тестирование
Перейдем на наш сайт, заполняем форму ввода данных и нажимаем кнопку Отправить
Заходим в Бипиум, открываем созданный нами каталог и проверяем, что создана новая запись с нашими, введенными на сайте, данными:
Возможная ошибка
Если после выполнения всех инструкций статьи возникает следующая ситуация:
- запрос из Tilda успешно отправляется;
- Бипиум принимает запрос;
- создаётся новая запись;
- но все (или некоторые) поля в записи остаются пустыми (см. скриншот ниже),
Такая проблема говорит о некорректном маппинге данных. Бипиум получил данные, но не смог их подставить. Проверьте соответствие заполненных ID полей. Важно учесть, что лишние пробелы до или после указанного текста в ID поля также нарушают работу маппинга данных.
