Настройка Tilda для API LawTask

Базовая инструкция представлена по этой ссылке. В тексте далее лишь специфика для Tilda.

Тильда — конструктор сайтов. Рассмотрим несколько альтернативных способов отправки лида из формы Tilda в API LawTask. Используйте тот, что больше нравится.

Способ "напрямую"

API LawTask совместим с Tilda. Можно напрямую отправить данные из штатной формы Tilda в API LawTask по инструкции Tilda:

Шаг 1: Настройка Webhook

Нажмите: Настройки сайта → Формы → Другое → Webhook.
Укажите адрес из документации.
API-метод — POST.
API name: integration_id, API key: ID нашей с вами интеграции.
Сохраните.

Если у вас ещё нет integration_id — запросите его у нас.

Шаг 2: настройка формы

Перейдите на страницу и в меню «Контент» блока с формой отметьте сервис приема данных — Webhook.

Потребуется настроить форму так, чтобы она содержала все обязательные параметры для API. Подробнее в разделе настройки формы. В частности, нужно, чтобы номер телефона был именно в поле phone, а обстоятельства лида в поле situation:

Так, например, если передать телефон в поле tel, вместо phone, то API не примет такой лид.

Город лида лучше всего передать в скрытом поле. Пользователю не потребуется вручную вводить данные, а в API придёт лид с уже заполненными данными.

Точно также, можно передать скрытыми полями другие данные если нужно. Например, данные метрик аналитических систем.

Сохраните и опубликуйте страницу.

Шаг 3: Проверка

Попробуйте заполнить и отправить форму на своём сайте. Если что-то пойдёт не так, то вы получите email от Tilda. Также, журнал ошибок доступен по этому адресу:

https://tilda.ru/projects/leads/errors/?projectid=*****

Не забудьте заменить звёздочки на ID вашего проекта в Tilda.

А какие в итоге получаются лиды можете посмотреть в своём личном кабинете поставщика лидов в системе LawTask (запросите логин и пароль у нас если у вас их нет).

Способ через Webhook

Webhook — скрипт на серверном языке, который будет ловить данные из заполненной формы и отправлять их в API LawTask. Он нужен в как посредник при пересылке если "вилку" Tilda не удаётся совместить с "розеткой" LawTask API напрямую. Т.е. это что-то вроде переходника. И, разумеется, можно добавить ещё какую-то логику вроде валидации, логгирования ошибок и т.п.

Пример кода с готовым вебхуком доступен в GitHub. В нём уже предусмотрена возможность добавить в передаваемые данные технические параметры вроде integration_id, захардкодить город лида и гарантированное передать не пустую строку в параметре situation.

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

Инструкция по подключению вебхука к форме есть в самой Tilda. Если будете писать вебхук самостоятельно, обратите внимание, что в этой инструкции представлен базовый пример webhook для последующей отправки лида почтой. Нам же нужен экспорт напрямую в API LawTask, а не на почту.

Добавление вебхука-посредника для проксирования данных не лучший вариант: мы добавляем в цепочку ещё одно звено, что уменьшает общую надёжности системы. Например, если сервер с вебхуком на тех. обслуживании, то лид не будет передан.

Способ через JavaScript

Альтернативный способ добиться того же самого есть и через JavaScript без всякой северной обработки. Требуется пройти всего несколько шагов:

Шаг 1: добавление скрипта

Достаточно добавить пустой блок (например, блок T123 по Тильде) и просто вставить туда уже готовый JS-код.

Обратите внимание, что код надо вставлять вот так в пустой блок:

<script>
вот тут код
</script>

Этот код навешивает на форму дополнительную логику: если форма заполнена успешно, то он отправит лида в API LawTask. Код работает для любых штатных форм Tilda в любом количестве на странице. Если оставить так, то форма будет работать как и раньше (сохранится валидация и всё прочее от Tilda).

Однако, обратите внимание, что он ищет формы по классу .js-form-proccess. Такой способ поиска форм представлен в самой документации Tilda, но работает только для их штатных форм. Если у вас своя самописная форма, то, вероятно, лучше адаптировать вот этот код (он более универсален, но заменит собой логику отправки формы).

Шаг 2: настройка формы

Откройте редактор страницы в Tilda и выберите форму, с которой вы работаете. Перейдите к настройкам каждого поля в форме. В разделе настроек поля найдите поле для установки атрибута name. Это обычно находится в настройках конкретного поля формы. Укажите соответствующие имена: установите имя для каждого поля в соответствии с требованиями API по инструкции. Например, для поля ввода телефона установите name='phone'.

Цель этого шага в том, чтобы при отправке формы, передавались все необходимые пары ключ-значение. Это важно. Например, если номер телефона лида у вас содержится в поле с атрибутом name = tel, то такой лид не будет принят, ведь API, куда попадут данные, будет проверять именно параметр phone, а не tel. Получится что-то вроде вот такого:

tel = 1234567890
phone = ''

И поскольку phone ничего не содержит, то API посчитает что отправлен лид без номера телефона и не примет его. А в поле tel даже не заглянет. Поэтому, обращайте внимание, чтобы атрибут name у полей полностью соответствовали хотя бы обязательным параметрам API.

Регистр имеет значение, например: Phone — неверно, правильно: phone. 

Недостающие обязательные параметры нужно добавить в форму.

Integration_id — фиксированный технический параметр. Его лучше скрыть от пользователя, чтобы не смущать его непонятным полем в форме.

Для того, чтобы сделать поле скрытым от пользователя:

• Добавьте новое поле.

• Выберите тип поля как "Скрытое" (Hidden).

• Установите атрибут name как integration_id.

• Введите фиксированное значение для этого поля, которое будет отправляться вместе с формой (ID интеграции, который вы получили вместе с инструкцией).

Если вы владеете JavaScript, то разумеется, можете просто добавить недостающие параметры прямо в скрипте:

formData.append('integration_id', 12345); // замените на ваш

Шаг 3: проверка

Самый простой способ проверить всё ли в порядке — консоль. В браузере Chrome откройте вкладку разработчика (F12 на windows) и перейдите в раздел "консоль". В ней вы увидите что происходит когда отправляется форма с лидом.

Если возникнет ошибка — вы увидите её в череде сообщений в консоли.