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

Возможна интеграция с Tilda, чтобы человек оформлял заказ или оставлял заявку на лендинге Тильды, а информация о заказы и платежи передавались в систему. 

Есть 2 способа интеграции:

• Прямая интеграция для бесплатных позиций
• Интеграция через формы оплаты для бесплатных или платных позиций

1. Как настроить прямую интеграцию для бесплатных позиций?

1. В разделе Настройки — Интеграции — Tilda скопируйте свой индивидуальный токен.

2. Готовим страницу в конструкторе Tilda
3. В настройках сайта в разделе Формы выбираем Webhook и указываем скопированный токен

5. Остальные поля заполняем как на скрине и сохраняем.

6. Переходим обратно к конструктору страницы, к редактированию формы.
7. Включаем нужный сервис

8. Добавляем скрытое поле в форму. 

• Тип скрытое
• Имя переменной offer (именно так, без пробелов!)
• Значение берем из списка позиций на платформе

9. Проверяем, что поле email и другие не содержат имени переменной

и нажимаем Опубликовать, чтобы применить изменения.

Данная интеграция работает только для бесплатных позиций.

2. Как настроить интеграцию через формы оплаты?

1. Необходимо создать форму оплаты, которая будет открываться при нажатии оплатить. Если тарифов несколько, то для каждого тарифа надо создать свою форму оплаты с 1 платным оффером. 
2. Готовим страницу в конструкторе на Тильде.
3. На тильде находим блок, при нажатии на который должна открываться форма оплаты и переходим к редактированию блока

4. Нажимаем на кнопку оплаты и проверяем, какой URL справа в настройках у нас указан. Здесь должна быть ссылка на popup, который потом позволит открыть нужную форму оплаты. В нашем примере тут указано #popup:tarif1 
*Если тарифов несколько, то у следующего можно указать #popup:tarif2 и #popup:tarif3

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

5. Добавляем через “+” новый блок — Popup: HTML-код в попапе. 

и переходит в Контент.

6. Возвращаемся к форме оплаты, которую мы сделали в 1 пункте

Копируем код для вставки и вставляем его в разделе “Контент” в блоке “Popup: HTML-код в попапе”

И указываем ссылку на popup из пункта 4. #popup:tarif1 
*У следующих тарифов надо будет указать #popup:tarif2 и #popup:tarif3 соответственно.

Для корректного отображения рекомендуем добавить еще код

<style> 
iframe {
height:100% !important; 
}
</style>

7. Нажимаем сохранить. Опубликовываем страничку. Готово 😉 При нажатии на “Оплатить” откроется созданная форма оплаты, к которой прикручена нужная позиция на оплату. Информация о заказе передастся в систему платформы.

Скрипты для передачи дополнительных данных

Код для работы партнерских ссылок

Внизу страницы добавляем блок HTML-код и вставляем содержимое

<script> $(document).ready(function () { setTimeout(function(){ /* Добавление поля fuid в форму */ function makeFuidField() { let $form = $('form'); if ($form.length && !$form.find('input[name="fuid"]').length) { $('<input>', { 'type': 'hidden', 'name': 'fuid', }).prependTo($form); console.log('fuid field added'); } } makeFuidField(); /* Заполнение партнерского кода из get параметра fuid */ function fillFuid() { let params = (new URL(document.location)).searchParams; $fuid = $('form input[name="fuid"]'); if ($fuid.length) { $('form input[name="fuid"]').val(params.get("fuid")); console.log('fuid sets'); } } $('form button[type="submit"]').click(function () { fillFuid(); }); fillFuid(); }, 2000); }); </script>

Добавление скрипта передачи данных с полей форм 

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

$(document).on( "click", "form button[type=submit]", function() { var tmpValEmail = $(this).find('input[name=email]').val(); var tmpValName = $(this).find('input[name=name]').val(); var tmpValPMask = $(this).find('input.t-input-phonemask').attr('data-phonemask-code'); var tmpValPhone = $(this).find('input.t-input-phonemask').val().replace(/[^A-Z0-9]/ig, ""); var tmpValFuid = $(this).find('input[name=fuid]').val(); var tmpValRedirect = $(this).find('input[name=redirect]').val(); var tmphref = $(this).attr('data-success-url'); tmphref = tmpValRedirect+'?email='+tmpValEmail1+'&name='+tmpValName+'&phone='+tmpValPMask+tmpValPhone+'&fuid='+tmpValFuid; $(this).attr('data-success-url',tmphref); });

Не забыть дополнительно еще указать редирект скрытым полем (name указываем redirect) в настройках формы