Дефанс
х Авито

разработка сайта на Tilda

HTML + CSS +JS

интеграция

На Tilda невозможное возможно. Запустили сайт с двойным сценарием
и интеграцией

Сайт

Дефанс х Авито

О ПРОЕКТЕ

🧠

Два сценария: мгновенная покупка или отложенное решение

💌

Возврат пользователя через персональное предложение на почту

💰

Сохранение пользователя в воронке даже без моментальной оплаты

Дефанс — страховая компания с 2007 года, развивающая цифровые продукты для защиты клиентов от финансовых рисков. В данном проекте необходило было интегрировать продукт клиента в сценарий проверки автомобиля через Авито Автотеку. А пользователь мог оформить страховку сразу после проверки авто или сохранить предложение на будущее.

Цель и задачи

Главная цель — встроить страховой продукт в сценарий Автотеки и не терять пользователя после проверки автомобиля. В момент, когда человек уже выбирает машину, ему нужно дать простой путь: оформить страховку со скидкой сразу или сохранить предложение на потом.

У клиента уже были готовые дизайн-макеты, но не было реализации и рабочей логики. Лендинги нужно было не просто собрать на Tilda, а встроить в реальный пользовательский сценарий и связать с внешними системами.

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

✅

принять пользователя с уже заполненными данными из Автотеки

✅

дать выбор — купить сразу или сохранить предложение

✅

реализовать сбор и передачу данных в Mindbox

✅

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

Tilda использовали как витрину, но основную логику реализовали через кастомный JavaScript, интеграции через Albato и работу с API.

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

Понравились кейсы? Оставьте заявку для бесплатной консультации

Обсудить проект

Понравились кейсы? Оставьте заявку для бесплатной консультации

Обсудить проект

Решение

Реализовали переключение сценариев через элемент toggle. Основной сложностью было объединить два разных пользовательских сценария в одном интерфейсе. По просьбе клиента это сделали через переключатель «уже купил авто / еще не купил авто».

Переключение полностью управляет состоянием формы, текстами и кнопками. Реализовано через HTML + CSS + JavaScript, как обходное решение ограничений Tilda.

Сценарий «Защитить автомобиль за.»

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

Ключевая часть — корректная передача данных на endpoint клиента. Мы настроили логику так, чтобы все параметры (включая данные пользователя и авто) доходили до системы оплаты без потерь.

Гистограмма: количество вопросов по специализациям

Подстановка промокода из URL

Промокод передается в ссылке и автоматически подставляется в интерфейс. Пользователь его не вводит вручную.

Логику реализовали на JavaScript: параметр считывается из URL, отображается на странице и дальше передается в систему. В том числе сохраняется в Mindbox как часть пользовательских данных.

Во втором сценарии пользователь заполняет форму и получает подтверждение через попап. Мы отключили стандартные браузерные алерты и заменили их на кастомные, чтобы управлять логикой и подсказывать пользователю следующий шаг. Попапы встроены в сценарий и реагируют на состояние формы.

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

Здесь реализована связка:
форма → Albato → Mindbox → email → лендинг № 2. Мы настроили передачу данных между системами так, чтобы пользователь мог продолжить сценарий без повторного ввода и дойти до оплаты.

Что мы сделали для достижения такого результата?

Погрузились в продукт и сценарий пользователя

Разобрали логику Автотеки, точки входа, параметры URL и поведение пользователя

Адаптировали макеты под реальный сценарий

Пересобрали экраны под динамические состояния, данные из URL и логику переходов

Продумали структуру с учетом двух сценариев

Развели пользовательские потоки на фронте и заложили управление состояниями через код на JavaScript

Реализовали интерфейс на Tilda с кастомной логикой

Собрали лендинги и добавили JavaScript для управления данными и сценариями

Собрали нестандартные элементы на коде

Тоггл, формы, попапы и кнопки реализовали через HTML, CSS и JavaScript

Настроили интеграции и передачу данных

Связали лендинги с Albato, Mindbox и API, контролировали структуру запросов

Подготовили страницу к запуску

Проверили сценарии, редиректы, параметры и стабильность всей связки

Особенности проекта

Проект требовал не просто аккуратной верстки, а сборки полноценной логики на фронте. Нужно было связать несколько систем, управлять состояниями и передавать данные без серверной части.
Ключевые особенности проекта:

✔️

нестандартная реализация на Tilda с большим объемом кода JavaScript

✔️

работа с динамическими данными из URL (VIN, модель, промокод и др.)

✔️

управление двумя сценариями пользователя в одном интерфейсе

✔️

кастомные формы и «фейковые» поля для передачи данных в интеграции

✔️

связка нескольких систем: Albato, Mindbox и API клиента

✔️

обход ограничений Tilda при работе с логикой и запросами

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