Конструктор всплывающих окон, которые не раздражают пользователя

Рассказываем, как сделали сервис обратного звонка, который соединяет автодилеров с покупателями.
Полноценный конструктор внешнего вида виджета из 160+ настроек
Мы в KTS работаем со стартапами — делаем их много и часто. Однажды к нам пришел клиент с идеей запустить новый сервис обратного звонка с фокусом на автомобильных дилеров. Такие сервисы конвертируют посетителей сайта в звонки для колл-центра, который занимается продажами.
Эта задача решается с помощью специальных инструментов. Подобно Яндекс.Метрике или Google Analytics, их устанавливают на сайт. Все это дополняет автоматизированная система дозвона.
Команда нашего заказчика имела опыт работы с автосегментом, поэтому ребята сразу знали, каким должен быть идеальный продукт именно для этого рынка. Цель, которую они ставили перед собой — запустить лучший сервис обратного звонка и отвоевать у конкурентов долю на рынке автодилеров.
Что не так со всплывающими окнами?
Каждый, кто однажды заходил на сайт какого-нибудь автосалона, наверняка замечал всплывающие окна с текстом в духе “Есть вопросы? Перезвоним через 45 секунд!”. Часто первый импульс — закрыть такую страницу поскорее. Назойливые окна отвлекают, появляясь, когда не надо. От цветов и шрифтов рябит в глазах.

Из-за чего так происходит? В большинстве своем сервисы обратного звонка не дают простых инструментов для быстрой настройки внешнего вида всплывающих окон под стиль того или иного сайта. Любые, даже небольшие изменения, предполагают подключение целой команды — программиста, дизайнера и менеджера. Для бизнеса это неудобно: зачастую получается слишком долго или дорого.

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

1
Решить проблему назойливых всплывающих окон
План-капкан
Продукт, за разработку которого взялась команда KTS, должен был:
2
Не уступать конкурентам по функциональности инструментов
3
Превзойти их по качеству реализации и удобству использования
Чек-лист с задачами на старте получился такой:
1
Гибкость интерфейса
Заложить возможность менять интерфейсы без привлечения программистов
2
Вариативность логики
Научить систему показывать разные всплывающие окна в зависимости от множества условий
3
Система дозвона
Создать эффективную систему дозвона для соединения колл-центра с потенциальным покупателем авто
4
Скорость подключения
Обеспечить очень быстрое подключение к сервису новых дилерских центров
И вот, что теперь представляет из себя сервис
Konget позволяет закрыть всё: начиная от привлечения внимания клиента и заканчивая логикой дозвона до операторов.
Инструменты:
— Виджет
— Лидогенератор
— Сбор данных с форм
— Мобильная панель
— Опросник для trade-in
— Слайдер
— Обработка заявок в виде писем
— Мобильный лидогенератор

Благодаря разработанным инструментам, клиенты сервиса могут полностью автоматизировать процесс получения и обработки лидов на своем сайте.
Как мы разрабатывали сервис
“Ядро” сервиса, то есть самая важная его часть — это инструменты и дозвон. Большой пласт задач касался настройки инструментов. В частности — когда они должны появляться, как должен менять их внешний вид и содержание в зависимости от условий показа.
Конструктор всплывающих окон
Не мучить пользователя бесполезными окнами
Чтобы сообщения в модальных окнах появлялись в нужный момент и были релевантными для пользователя, важно понимать его поведение и мотивацию. Они, само собой, бывают разными.

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

Если же человек зашел на сайт напрямую, то он, скорее всего, уже присмотрел что-то конкретное. Страница попала в его “шорт-лист” и нет нужды отвлекать пользователя дополнительными маркетинговыми сообщениями. Лучше дать ему больше времени на изучение. А персональное предложение, которое простимулирует к покупке, можно сделать, когда он соберется уйти с сайта.

Тонкая настройка против надоедливости
Как учесть все эти нюансы на практике? Для этого мы придумали систему параметризации лидогенераторов и виджетов. Она работает со следующими условиями:

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

Настроить по этим параметрам можно любое модальное окно. Дополнительно мы ввели понятие “сессия”. Она задает ограничение на число показов инструментов за определенный промежуток времени. Например, виджет — не чаще раза в полчаса. А если пользователь открыл несколько вкладок и переходит между ними, сессия учитывается суммарно для всех. Это позволяет избежать появления всплывающего окна по триггеру времени на каждой открытой странице сайта.

Таким образом нам удалось снизить надоедливость всплывающих окон и не заваливать пользователей ненужными сообщениями.
Адаптируем вид и содержание рекламных предложений
Чтобы быстро менять облик всплывающих окон и маркетинговые сообщения внутри этих окон под конкретные сайты, мы сделали визуальный редактор. Получилась эдакая “Tilda для всплывающих окон”. Управление всеми элементами доступно в специальной панели. Меняются тексты, цвет, форма и размер элементов, их расположение. Можно выбирать фон и настраивать анимацию.

С помощью этого инструмента дизайнеры и менеджеры Konget, а также их клиенты-автодилеры могут быстро настраивать рекламные предложения из личного кабинета без программистов.
Перехват форм
Не потерять ни одного клиента
Есть люди, которые с недоверием относятся к любым всплывающим окнам. Они предпочитают “традиционные” формы обратной связи — специально находят их на сайте, заполняют и отправляют. Конечно, эта категория клиентов тоже важна для дилеров.

Даже если заявка была отправлена не из всплывающего окна, Konget всё равно соединит клиента с колл-центром за считанные секунды. Для этой цели мы сделали специальный инструмент, предназначенный для перехвата форм на сайте.
Обычный подход к перехвату форм — “прицепиться” к определенным элементам верстки сайта. Например, к кнопке “Отправить” в форме заявки. В момент, когда пользователь нажимает на кнопку, информация из формы передается в сервис обратного звонка.

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

Чтобы избежать этих проблем, сбор заявок c форм мы организовали через почту. В настройках сайта вводится адрес служебной почты Konget, на которую уходит письмо, как только пользователь отправил заявку через форму обратной связи. Затем Konget берет данные из заявки и, как обычно, соединяет клиента с колл-центром.
“Умный” дозвон
Оптимизируем схему обратного звонка
Чтобы соединить клиента и колл-центр, можно сначала позвонить в колл-центр и затем клиенту. А можно — наоборот, начать со звонка в сторону колл-центра.

Оба способа имеют недостатки. Проблема первого звонка в сторону клиента — человек берет телефон и долго ждет, пока подключится колл-центр. Это бьет по конверсии, потому что клиент нередко вешает трубку еще до ответа оператора.

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

Чтобы разгрузить колл-центр и добраться до клиента, не “заспамив” его звонками, мы придумали “умный” автодозвон. Он работает следующим образом:
1
Звоним в колл-центр
2
Звонок не состоялся
Получаем причины неудачного звонка
3
Выбираем способ следующего звонка
В какую сторону будем звонить
4
Выбираем время для следующего звонка
Подбор происходит по таблице автодозвона
Как это работает
Попытка 1.
Звоним в сторону оператора
Оператор не взял трубку.
Автодозвон назначит повторный звонок в сторону оператора через 10 минут
Попытка 2.
Звоним в сторону оператора
Оператор взял трубку
Звонок в сторону клиента
Клиент не в сети.
Автодозвон назначит следующий звонок в сторону клиента через 60 минут.
Попытка 3.
Клиент ответил, но не дождался ответа оператора
Автодозвон назначит следующий звонок сразу в сторону оператора
Попытка 4.
Успешный дозвон
Алло, это робот!
За непосредственное соединение оператора и клиента, который оставил заявку на сайте дилера, отвечают роботы. Собственный робот — система маршрутизации вызовов IVR — есть у колл-центра. Ему звонит наш робот-дозвонщик, который либо сразу подключается к свободному оператору, либо занимает очередь. “Вы пятый в очереди. Дождитесь ответа оператора” — говорит IVR нашему роботу.

Перед тем, как выводить звонок на клиента, важно убедиться, что оператор свободен и готов общаться. Иначе клиенту придется ждать на линии, слушая “песенки” колл-центра. Еще лучше — не просто вовремя соединить оператора с клиентом, но и позаботиться о том, чтобы оператор точно понимал суть предстоящего разговора.

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

Обычно, пока оператор колл-центра не нажимает нужную кнопку в тоновом режиме, робот проговаривает ему сообщение без остановки. “Нажмите 5 или скажите 5, чтобы позвонить клиенту. Клиент Петр Иванов заказал обратный звонок с формы trade-in на сайте ‘Мазда Ключ Авто’”.

Подключение оператора при этом происходит в случайный момент. Если оно приходится на середину сообщения, оператор вынужден переслушивать информацию по заявке заново. Это увеличивает время на линии, ожидание клиента и конечную стоимость звонка.
Результат
Мы разделили сообщение нашего робота на две части. Вначале он проговаривает информацию для старта звонка: “Нажмите или скажите 5, чтобы позвонить клиенту”. И только после того, как оператор подтвердил, что готов к звонку, мы начинаем проговаривать информацию по самой заявке. “Клиент Петр Иванов заказал обратный звонок с формы trade-in на сайте ‘Мазда Ключ Авто’”. Клиенту звоним уже после проговаривания заявки.
Экономия времени
и цены звонка
6-10%
Обвязка сервиса и нюансы разработки
От ядра к обвязке
Покончив с “ядром” сервиса, мы приступили к проектированию “обвязки”. Это не самый важный функционал, но без него стартап не смог бы запуститься и полноценно работать. Внутри — четыре основные сущности и две большие “фичи”.

Основные сущности:
  1. Клиенты (обычно сеть дилерских центров)
  2. Офисы (куда звонить)
  3. Проекты (по маркам авто)
  4. Сайты (может быть даже для отдельной модели)

Вокруг этого:
  1. Биллинг
  2. Выдача доступов пользователям к основным сущностям

Продукт работает по нетрадиционной для сервисов обратного звонка модели монетизации. Раньше сервисы-конкуренты боролись за клиентов, демпингуя по стоимости минуты звонка. В Konget решили продавать минуты по себестоимости и отдельно взимать плату за сервис.

Поэтому на уровне системы мы разделили плату за сам сервис и за минуты звонков. Надо было учесть демо-период, предоплату без авансов и с авансами, постоплату. Также мы интегрировали в обвязку необходимый документооборот.
Когда настроек все больше:
оптимизируем добавление новых
Изначально все настройки внешнего вида и правила показа хранились в базе в одной большой json структуре. В ней генерировался фронтенд, который просто закидывал все настройки в бэкенд, а там они помещались в одну ячейку таблицы.

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

Мы придумали такое решение: вместо одной колонки, в которой хранился json, выделили по колонке под каждую настройку. Когда у нас добавляется новая настройка, мы делаем миграцию базы встроенными средствами СУБД. Так для всех объектов эти поля автоматически заполняются дефолтными значениями.
Ускоряем развитие сервиса, миграцию, загрузку кода и разработку новых инструментов
Вначале Konget устанавливался только на сайтах автодилеров Москвы, и скорость загрузки не вызывала нареканий. По мере экспансии в регионы стали возникать проблемы с долгой загрузкой инструментов в зонах, которые находились далеко от серверов компании. Чтобы устранить эти проблемы, мы перенесли скрипты и настройки инструментов в CDN. Он позволяет хранить настройки на серверах рядом с теми пользователями, которые их запрашивают.

Каждый из инструментов содержит огромное количество настроек, которые взаимодействуют друг с другом. Одним изменением можно «поломать» продукт. И чем быстрее растет и развивается сервис, тем выше риск.

Поэтому при каждой отправке кода в репозиторий мы автоматически запускаем unit-тесты, которые проверяют логику работы. Если какая-то функциональность выходит из строя, мы тут же об этом узнаем и устраняем проблему еще до того, как тестированием обновления займется тестировщик. Написание тестов под каждую новую задачу занимает порядка 30% времени в разработке, но при этом то время, которое экономится на отладке при запуске обновлений перекрывает затраты на покрытие кода тестами.
1,5 года
Активной разработки
> 2 лет
Поддержки
90%
Функционала покрыто тестами
Разработку новых инструментов на бэкенде мы автоматизировали. Теперь для добавления нового инструмента фронтендеру достаточно декларативно описать структуру настроек, а структура базы создастся автоматически.
Что в результате?
1
После карантина — полет нормальный.
В апреле 2019 года Konget запустился с первым инструментом, виджетами. Ровно спустя год вся страна ушла на карантин. Несмотря на экономическую неопределенность и повсеместное сокращение маркетинговых бюджетов, стартап укрепился в своей нише и продолжил успешно развиваться.

На сегодня инструменты, которые в KTS разработали для Konget, увидели свыше 50 млн уникальных пользователей.
2
Задачи решаются быстро, и для этого не нужны программисты.
Конструктор всплывающих окон дал Konget возможность легко менять их внешний вид и содержание. А также — очень быстро подключать новых клиентов. Сотрудники стартапа самостоятельно настраивают показ рекламных предложений в соответствии с дизайном сайта, заводят в систему клиентов и запускают для них демо-период.
3
Грамотный подбор технологий в противовес назойливому маркетингу.
Система умеет показывать разные всплывающие окна в зависимости от множества условий. Для пользователей, которые предпочитают «традиционные» способы коммуникации, настроен перехват форм. А эффективная система дозвона для соединения колл-центра с потенциальным покупателем авто позволяет быстро обрабатывать заявки.
4
И еще один неожиданный вывод.
Когда мы только начинали работать над проектом, наши заказчики считали, что обеспечить себе место на высококонкурентном рынке можно только заходя на него с набором из нескольких инструментов. На деле оказалось, что уже один качественный инструмент для автодилеров — виджеты — дает возможность получить первые продажи и начать зарабатывать.
Сейчас мы продолжаем развивать сервис, регулярно добавляем новые инструменты и одновременно обеспечиваем бесперебойную работу существующих. За поддержку отвечает выделенная команда внутри KTS.
Заказать разработку вашего сервиса
Не хотите писать? Позвоните нашему менеджеру по телефону +7 926 735-45-32 и расскажите про ваш проект