Tilda + Recca

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

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

---

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

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

Webhook URL выглядит так:

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

API-ключ (токен) выглядит так:

rec_tilda_xxxxxxxxxxxx

---

Шаг 2. Настройте webhook в Tilda

1. Войдите в панель управления Tilda
2. Откройте нужную страницу с формой
3. Выберите блок с формой → Контент → прокрутите вниз до «Подключённые сервисы»
4. Нажмите «Webhook» → «Добавить»
5. Заполните поля:

Поле	Значение
Webhook URL	https://api.recca.ru/hooks/leads
API Method	HEADER
API Name	X-Recca-Token
API Key	Ваш токен из Recca (например rec_tilda_xxxxxxxxxxxx)

6. Дополнительные настройки — оставьте без галочек
7. Нажмите «Добавить»

Важно: webhook нужно добавить на каждой странице, где есть форма. Если форм несколько — добавьте webhook на каждую.

---

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

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

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

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

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

---

Шаг 4. Добавьте скрипт в 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. Откройте сайт с параметрами: https://ваш-сайт.ru/?recca=TEST&promo=ТЕСТ
2. Убедитесь, что скрипт сохранил данные — откройте DevTools → Application → Cookies и проверьте recca_ref и recca_promo
3. Перейдите на страницу с формой
4. Заполните и отправьте форму
5. Проверьте раздел «Заявки» в Recca — новая заявка должна появиться с пометкой источника

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

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