Tilda + Recca

Настройка интеграции: 5 шагов

Подключение сайта на Tilda к Recca занимает 5–10 минут. После настройки все заявки с форм будут автоматически попадать в раздел «Лиды» вашего кабинета.

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

---

Шаг 1. Создайте интеграцию в Recca

1. Откройте app.recca.ru и войдите в аккаунт
2. В кабинете своей ноды перейдите в Интеграции → Подключение сайта
3. Нажмите «Создать интеграцию»
4. Выберите платформу Tilda и укажите адрес вашего сайта
5. Скопируйте токен — Recca показывает его один раз

Адрес приёмника заявок:

https://api.recca.ru/hooks/leads

Токен выглядит так:

rec_tilda_xxxxxxxxxxxx

---

Шаг 2. Создайте webhook в настройках сайта Tilda

1. Войдите в панель управления Tilda
2. Откройте Настройки сайта → Формы
3. В списке сервисов приёма данных выберите Webhook
4. Заполните поля:

Поле	Значение
Адрес скрипта (Webhook URL)	https://api.recca.ru/hooks/leads
Метод передачи ключа (API Method)	в заголовках, HEADER
Имя ключа (API Name)	X-Recca-Token
Значение ключа (API Key)	Ваш токен из Recca (например rec_tilda_xxxxxxxxxxxx)

5. Нажмите «Добавить»

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

Токен принимается только в заголовке (X-Recca-Token или Authorization: Bearer). Передать его в адресе (?token=…) нельзя: адрес целиком попадает в журналы серверов, а с ним и токен, поэтому Recca такие запросы отклоняет. Если полей для ключа в вашей версии панели нет, напишите нам в поддержку — подскажем, как подключить форму.

---

Шаг 3. Включите webhook у формы

Теперь он есть в списке сервисов:

1. Откройте страницу с формой
2. Кликните по блоку формы → Контент
3. Отметьте Webhook среди сервисов приёма данных
4. Сохраните и опубликуйте страницу

Важно: пройдите так по каждой странице с формой. Не отметили — заявки с этой страницы не придут, и Recca об этом не узнает. Если панель предложит добавить сервис сразу ко всем формам сайта — согласитесь, это то же самое одним движением.

---

Шаг 4. Добавьте скрытое поле промокода в форму

Чтобы промокод из URL передавался вместе с заявкой, добавьте скрытое поле в форму:

1. Откройте блок формы → Контент
2. Добавьте новое поле с типом «Скрытое поле» (Hidden)
3. Задайте имя поля: Promo
4. Сохраните

Скрипт из Шага 5 автоматически заполнит это поле промокодом из URL.

Также рекомендуем добавить второе скрытое поле с именем recca — для реферального кода из ссылки.

---

Шаг 5. Добавьте скрипт в head всех страниц

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

Как добавить:

1. В панели Tilda перейдите в Настройки сайта → Вставка кода → блок «HTML-код для вставки внутрь HEAD» → «Редактировать код»
2. Вставьте этот скрипт:

<script>
function getUrlParameter(name) {
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

function setCookie(name, value, days) {
    var date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + date.toUTCString() + '; path=/; SameSite=Lax';
}

function getCookie(name) {
    var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : '';
}

window.addEventListener('DOMContentLoaded', function() {
    var promo = getUrlParameter('promo');
    var recca = getUrlParameter('recca');

    if (promo) setCookie('recca_promo', promo, 30);
    if (recca) setCookie('recca_ref', recca, 30);

    promo = promo || getCookie('recca_promo');
    recca = recca || getCookie('recca_ref');

    function fillFields() {
        if (promo) {
            var f = document.querySelector('input[name="promo"]') || document.querySelector('input[name="Promo"]');
            if (f) f.value = promo;
        }
        if (recca) {
            var f = document.querySelector('input[name="recca"]');
            if (f) f.value = recca;
        }
    }

    fillFields();
    new MutationObserver(function() { fillFields(); }).observe(document.body, { childList: true, subtree: true });
});
</script>

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

---

Как это работает

Сценарий с реферальной ссылкой

1. Партнёр делится ссылкой: https://ваш-сайт.ru/?recca=ABC123
2. Посетитель переходит по ссылке — скрипт сохраняет код ABC123 в cookies
3. Посетитель ходит по страницам сайта — код не теряется
4. Посетитель заполняет форму на любой странице
5. Tilda отправляет webhook в Recca с данными формы + кодом партнёра
6. Recca создаёт заявку, привязывает к партнёру, отправляет уведомления

Сценарий с промокодом

1. Партнёр делится ссылкой с промокодом: https://ваш-сайт.ru/?promo=ЛЕТО2024
2. Посетитель переходит — промокод сохраняется в cookies
3. При отправке формы промокод автоматически попадает в скрытое поле Promo
4. Recca определяет участника по промокоду и фиксирует событие

Приоритет атрибуции

Если в заявке есть и промокод, и реферальный код — промокод имеет приоритет при определении участника. Это позволяет использовать именные промокоды.

---

Поддерживаемые поля форм

Recca автоматически распознаёт стандартные поля Tilda:

Поле формы	Варианты имён
Имя	Name, name, Имя, ФИО
Телефон	Phone, phone, Номер телефона, Телефон
Email	Email, email, Почта, E-mail
Комментарий	Comment, comment, Комментарий, Сообщение
Промокод	Promo, promo, promocode
Реферальный код	recca, Recca

Названия полей на русском и английском поддерживаются автоматически — специальная настройка не нужна.

---

Проверка интеграции

После настройки отправьте тестовую заявку:

1. Откройте сайт по НАСТОЯЩЕЙ ссылке участника программы — своей или любого партнёра из раздела «Рефералы» (придуманный код вроде ?recca=TEST Recca не узнает, и заявка придёт без партнёра — будто связка не работает)
2. Убедитесь, что скрипт сохранил данные — откройте DevTools → Application → Cookies и проверьте recca_ref и recca_promo
3. Перейдите на страницу с формой
4. Заполните и отправьте форму
5. Проверьте раздел «Заявки» в Recca — новая заявка должна появиться с пометкой источника

Устранение проблем

Проблема	Решение
Заявка не приходит	Проверьте webhook URL и токен в настройках формы Tilda
Промокод не передаётся	Убедитесь, что добавлено скрытое поле Promo в форму
Реферальный код теряется	Проверьте, что скрипт добавлен в HEAD сайта и страницы переопубликованы
Ошибка 400 при отправке	Проверьте, что токен не отозван в разделе «Интеграции»
Партнёр не виден в заявке	Клиент пришёл без кода — укажите привёдшего кнопкой «Указать, кто привёл» в строке заявки
Заявка без имени и телефона при подключении	Это проверочная отправка конструктора; такие больше не становятся заявками, старую переведите в «Отказ»