Перейти к содержанию

Интеграция Roistat с Tilda

Интеграция Roistat с конструктором сайтов Tilda позволяет загружать заявки посетителей в ваш проект Roistat и автоматически создавать для них сделки в подключенной CRM.

Заявки загружаются на страницу Каталог интеграцийнаcтройки подключенной CRMСписок отправленных заявок:

1.png

Заявки в проекте Roistat и CRM могут создаваться не сразу после отправки формы с сайта, а с небольшой задержкой. Поэтому рекомендуем подождать какое-то время (1-3 минуты), прежде чем обращаться в службу поддержки.

Звонки на номера, размещенные на сайте, созданного в Tilda, можно отслеживать с помощью Коллтрекинга Roistat. Подробнее о настройке читайте на шаге 6 - Разметка номера для отслеживания звонков.

Как работает интеграция

  1. Клиент оставляет заявку в форме Tilda.
  2. После отправки заявки информация передается в Roistat.
  3. Если в проекте Roistat настроена интеграция с CRM, Roistat отправляет созданную заявку в подключенную CRM.

Распределение заявок с нескольких сайтов в разные воронки продаж можно настроить с помощью вебхука или автоматизации маркетинга.

Шаг 1. Установите счетчик Roistat

На каждую страницу, куда заходят посетители, нужно установить счетчик, который позволит Roistat получать данные о посетителях. Сразу будет доступна функциональность промокодирования (для отслеживания продаж через телефон). Счетчик установит в cookie переменную roistat_visit,  которая будет содержать номер визита:

  1. В проекте Roistat откройте раздел Настройки на закладке Код счетчика: 2.png
  2. Нажмите кнопку Сохранить в буфер.
  3. Перейдите в кабинет Tilda в режим редактирования нужной страницы.
  4. Добавьте скопированный скрипт в блок типа HTML-код и сохраните его: 3.png

Счетчик должен быть установлен на каждой странице сайта в единственном экземпляре. Установка нескольких счетчиков приведет к ошибке, и информация о посетителях будет отображаться некорректно.

Если не удается найти элемент body

Если вы не можете найти элемент body, чтобы вставить код счетчика Roistat, то нужно выполнить следующие действия:

  1. Добавить блок Т123 на страницу вашего сайта (если его еще нет): 4.png
  2. Перейти в блок Т123 и нажать кнопку Контент: 5.png
  3. Вставить код счетчика Roistat: 6.png
  4. Опубликовать введенные изменения: 7.png

Шаг 2. Настройте Webhook для передачи заявок из форм Tilda в Roistat

Внимание!

Чтобы заявки из форм Tilda могли быть переданы в Roistat, имена переменных для полей в Tilda должны будут иметь следующий формат:

  • поле с именем: name / Name / NAME;
  • поле с электронной почтой: email / Email / EMAIL;
  • поле с телефоном: phone / Phone / PHONE.

Как добавить имя переменной для поля в Tilda

  1. Откройте настройки страницы вашего сайта в Tilda, на которой размещена форма с полями, значения которых вы хотите передавать в CRM.
  2. Указателем мыши наведите на элемент формы и нажмите Контент: 8.jpg Откроется страница настройки содержимого формы.
  3. В блоке Поля для ввода для поля, значение которого вы хотите передавать в Roistat, заполните поле Имя переменной: 9.jpg
  4. Нажмите Сохранить.

  5. В проекте Roistat откройте Каталог интеграций.

  6. В блоке Конструкторы сайтов выберите Tilda и нажмите кнопку Подключить. Откроется страница настроек интеграции с Tilda.  
  7. В шаге Инструкция  скопируйте содержимое поля Webhook URL: 10.jpg
  8. В вашем кабинете Tilda перейдите в раздел Мои сайты, выберите нужный сайт и в открывшемся подразделе со списком страниц нажмите кнопку Настройки сайта: 11.png

  9. На странице настроек откройте раздел Формы и нажмите Webhook: 12.png Откроется страница настроек Webhook.

  10. В поле Webhook URL вставьте адрес Webhook, скопированный в пункте 3 инструкции.

  11. В разделе Формы откройте настройки нужного вам сервиса: 13.png
  12. В дополнительных настройках поставьте галочку напротив Посылать Cookies: 14.png
  13. Нажмите Сохранить.

Установите скрипт для передачи данных (необязательно)

Внимание!

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

  1. В проекте Roistat на странице настройки интеграции с Tilda откройте шаг Подключение скрипта: 15.jpg
  2. В вашем кабинете Tilda перейдите в разделе Мои сайты, выберите нужный сайт и на странице со списком страниц сайта нажмите кнопку Настройки сайта: 16.png  
  3. На странице настроек откройте раздел Еще.  
  4. В блоке HTML-код для вставки внутрь HEAD нажмите Редактировать код: 17.png

  5. В поле Вставка кода в head вставьте скрипт, скопированный в пункте 1 инструкции: 18.png

  6. Нажмите Сохранить.

  7. Опубликуйте внесенные изменения: 19.png

Шаг 3. Настройка поведения

На шаге 3 Настройка поведения есть три опции: Отправлять заявки в CRM, Инициировать обратный звонок по номеру клиента и Отправка целей:

Если опция Отправлять заявки в CRM будет отключена, то лиды будут создаваться в списке отправленных заявок, но не будут отправляться в CRM. Если включить опцию Инициировать обратный звонок по номеру клиента, то ваши менеджеры будут звонить на номер клиента, который создал заявку.

При необходимости настройте Отправку целей в Google Analytics и Яндекс.Метрику

Шаг 4. Настройка поведения

На шаге Настройка поведения есть две опции: Отправлять заявки в CRM и Отправка целей.

Если опция Отправлять заявки в CRM будет отключена, то лиды будут создаваться в списке отправленных заявок, но не будут отправляться в CRM.

При необходимости настройте Отправку целей в Google Analytics и Яндекс.Метрику.

Шаг 5. Настройте заполнение дополнительных полей сделки в CRM

Если вы хотите, чтобы в сделке в CRM помимо основных полей заполнялись дополнительные поля:

  1. В проекте Roistat на странице настройки интеграции с Tilda откройте шаг Настройка доп. полей.  
  2. Нажмите Добавить поле.
  3. В раскрывающемся списке Выберите поле выберите название дополнительного поля в CRM.

Список полей загружается из подключенной к проекту Roistat CRM.

  1. В поле ниже введите значение дополнительного поля сделки: если вы хотите, чтобы значение было статичным, просто введите текст. Если вы хотите использовать переменные:
    • Введите {orderPrice}, если хотите передавать в дополнительное поле сделки сумму заказа.
    • Введите {field_(имя переменной для поля в Tilda)}, если хотите передавать в дополнительное поле сделки содержимое поля Tilda. Например, {field_city} -- переменная для передачи значения поля Город в Tilda.

Как указать имя переменной поля в Tilda

  1. Откройте настройки страницы вашего сайта в Tilda, на которой размещена форма с полями, значения которых вы хотите передавать в CRM.
  2. Указателем мыши наведите на элемент формы и нажмите Контент: 20.jpg Откроется страница настройки содержимого формы.
  3. В блоке Поля для ввода для поля, значение которого вы хотите передавать в дополнительное поле CRM, заполните поле Имя переменной. Это имя переменной и нужно ввести в настройках интеграции. 21.jpg
  4. Нажмите Сохранить.

При настройке дополнительных полей можно использовать как переменные Roistat, так и переменные из Tilda: 22.png

23.png При использовании переменной из Tilda в дополнительное поле будет передаваться название формы в Tilda.

Если вы хотите использовать свой шаблон комментария при создании заявки, заполните поле Комментарий заявки: 24.png Шаг 5. Настройте отправку заявок из форм в CRM через Roistat в интерфейсе Roistat (необязательно)


Внимание!

Пропустите этот шаг, если вы уже настроили Webhook для передачи заявок в Roistat (см. Шаг 2).

Передача заявок в Roistat уже настроена. О настройке передачи заявок в CRM читайте в документации по интеграции с подключенной CRM (Шаг "Настройте автоматическую отправку сделок в CRM").

Чтобы настроить в интерфейсе Roistat передачу заявок в CRM через Roistat -- механизм отправки заявок, при котором заявки сначала передаются в Roistat, затем отправляются в CRM:

  1. В проекте Roistat откройте раздел Настройки и выберите закладку Заявки с форм сайта.
  2. Нажмите кнопку Добавить форму. Откроется окно Новая форма.
  3. В поле Название введите текст, который будет отображаться в названии заявки: Заявка с формы <Название>.
  4. В качестве типа отправки выберите Кнопка.
  5. В поле Селектор кнопки введите .t-submit. Если на странице несколько форм, то введите #<пробел>.t-submit, например: #form55555555 .t-submit.

Как узнать идентификатор формы

  1. Откройте форму заказа на вашем сайте.

  2. С помощью любого имеющегося у вас инструмента откройте исходный код формы. Например, с помощью вашего браузера: правой кнопкой мыши выделите содержимое формы или страницы заказа, вызовите контекстное меню и выберите Исходный код выделенного фрагмента.

  3. Сделайте поиск по ключевому слову form id или form.
  4. Скопируйте значение идентификатора. 25.jpg

  5. Для поля Имя клиента выберите Результат исполнения JS и введите return $("input[name='имя переменной для поля с именем клиента в Tilda']").val().

О том, как узнать имя переменной для поля в Tilda, читайте в Шаге 4.

  1. Для поля Телефон выберите Результат исполнения JS и введите return $("input[name='имя переменной для поля с номером телефона в Tilda']").val().
  2. Для поля Email выберите Результат исполнения JS и введите return $("input[name='имя переменной для поля с емейлом в Tilda']").val().
  3. Нажмите Сохранить. 26.jpg

Шаг 7. Разметьте номера для отслеживания звонков

Чтобы Roistat подменял номер компании на отслеживаемый, в конструкторе страницы добавьте блок типа HTML-код и вставьте следующий скрипт:

<script type="text/javascript">
$(document).ready(function() {
$('[href="tel:+7XXXXXXXXXX"]').addClass('roistatphone');
});
</script>

Вместо +7ХХХХХХХХХХ укажите нужный номер. При использовании этого скрипта в настройках сценария укажите элемент для подмены "roistatphone".

27.png

HTML-блок можно добавить в любое место сайта.

Интеграция с корзиной Tilda позволяет Roistat обрабатывать заявки из корзины.

Пример комментария:

<payment[smartphone][N][iphone8]> (<payment[smartphone][N][sku]>) ---
<payment[smartphone][N][1000USD]> x <payment[smartphone][N][1]> =
<payment[smartphone][N][1]>
.....
Итого: <payment[amount]>
Iphone8 (SKU:123789) - 1000 USD x 1 = 1000 USD
Iphone X (SKU:150698) - 1500 USD x 3 = 4500 USD
Итого: 5500 USD

Рекомендуемые статьи

Передача заявок в CRM через Roistat (проксилид)