Виджет, который не отпускает молча: большое обновление виджета в Пробите

Виджет в Пробите давно умел открываться сам, когда посетитель тянется курсором к вкладке, чтобы уйти. Но открывалось маленькое окно над кнопкой в углу, и его видели краем глаза: человек уже решил уйти, и окошко в углу этого решения не меняло. Я смотрел на это на своём лендинге и понимал, что виджету не хватает голоса.

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

Два режима: обычный и агрессивный

Главное решение обновления: режим выбирает владелец сайта, а не я. Окно, которое выпрыгивает посреди чтения, — это репутация вашего сайта. Кому-то это уместно, кому-то нет, и решать за вас я не имею права. Поэтому в «Виджете звонка» теперь два режима.

• Обычный — как было всегда: круглая кнопка в углу, по нажатию маленькое окно с формой, номером и мессенджерами. После обновления у всех стоит именно он, ничего само не меняется.
• Агрессивный — крупное окно, в котором кроме формы есть блок ваших доводов: почему стоит оставить номер прямо сейчас. Раскрывается при попытке уйти и по таймеру.

Внутри окна те же поля и кнопки, что в обычном: выбор услуги, имя, телефон, согласие, номер для звонка, мессенджеры, чат. Агрессивный режим не добавляет вопросов в форму. Он делает окно заметным и даёт место для одного аргумента.

Три вида окна — под разные сайты

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

Панель справа

Панель во всю высоту экрана, сайт за ней затемнён. Помещается всё: доводы, форма, номер и мессенджеры, без прокрутки. Сначала панель занимала половину экрана, но на широком мониторе это 960 точек при форме в 460, и справа оставалось пустое поле. Теперь ширина панели равна ширине формы.

Треть слева

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

Окно по центру

Привычный попап: окно по центру, сайт затемнён целиком. Левая треть окна — тёмная колонка с доводами, справа форма. Так довод и действие стоят рядом, и окно, по-моему, читается лучше остальных.

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

Когда окно раскрывается само

Поводов два, оба включаются галочками.

• Попытка уйти. Курсор ушёл за верхний край окна, к вкладке или адресной строке. Это единственный сигнал ухода, который приходит до ухода. Работает только на компьютере и не раньше восьми секунд после загрузки: в первые секунды рука часто ещё «там», откуда человек пришёл.
• Таймер. Окно раскрывается через заданное число секунд на странице. Таймер есть только в агрессивном режиме и считает лишь время, пока вкладка открыта перед глазами: ушёл человек в соседнюю вкладку на десять минут — значит, страницу он не читал, и выпрыгивать навстречу ему не нужно. На телефоне таймер — единственный повод, ухода курсором там нет.

Отдельно задаётся, как часто окну можно раскрываться само: раз за визит, раз в сутки или раз в неделю. Счётчик общий для обоих поводов. И одно правило работает всегда: тому, кто уже обратился, окно само не показывается. Если человек нажимал кнопку виджета, писал в чат или оставил заявку, догонять его попапом — навязчивость без всякой выгоды.

Оба повода пишутся в «События»: exit_intent для ухода и timer_open для таймера. Я сделал так, чтобы спор «помогает ли агрессивный режим» решался не мнением, а цифрами вашего сайта: видно, какой повод сработал и чем закончился визит. Это тот же принцип, что во всём Пробите: сначала честные данные, потом выводы. Почему это важно для рекламы, я подробно писал в статье о том, почему автостратегии Директа не обучаются без конверсий.

Доводы пишете вы, а не я

В агрессивном окне есть блок преимуществ: заголовок и до шести пунктов. Здесь я долго решал, что поставить по умолчанию. Красивые обещания вроде «перезвоним за две минуты» или «бесплатный выезд» — это обещания конкретной конторы. Поставь я их за вас, ваш посетитель прочитает то, чего вы, возможно, не делаете.

Поэтому заводские пункты — только то, что верно про любой обратный звонок:

• Перезвоним сами — звонок для вас бесплатный
• Ответим на вопросы и подскажем, с чего начать
• Разговор ни к чему не обязывает
• Номер нужен только для звонка — без рассылок

Это рабочий минимум, но настоящая сила блока — в ваших словах. Когда я писал доводы для разных ниш, для медицины главными доводами оказались анонимность и цена до выезда врача, для юриста — честная оценка перспективы и стоимость до начала работы, для налогового консультанта — ответ на вопрос «положен ли мне вычет». Каждый раз это то, чего человек боится или хочет узнать, а не общие слова про «профессиональный подход». Стёрли все строки — блока нет, окно просто крупнее.

Цвета под ваш сайт

Раньше в виджете настраивался один цвет. Теперь их четыре: основной (кнопка, «Жду звонка», отметки), фон окна, цвет текста и цвет блока преимуществ. Есть готовые наборы, включая тёмное окно, а рядом с полями — набросок окна в масштабе, который перерисовывается, пока вы подбираете цвета.

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

Экран «спасибо» вместо строчки

Раньше после отправки под кнопкой появлялась строчка «Заявка принята». Она терялась внизу окна, и человек не был уверен, ушла ли заявка, — и нажимал второй раз. Теперь форма сменяется крупным текстом и картинкой.

Текст вы пишете сами, по умолчанию — «Спасибо за обращение, мы вам перезвоним». Картинка — заводской рисунок звонящего телефона с часами, нарисованный в цветах вашего виджета, или своя: фото менеджера, логотип, что угодно, что скажет человеку «вам сейчас позвонят». Мне нравится, когда в тексте после отправки есть практичная просьба. Например, юристу: «подготовьте документы по вопросу». Человек ждёт звонка, и ему есть чем заняться.

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

Телефон: шторка, которую всегда можно закрыть

Самые важные исправления этого обновления — про телефон. Я проверял их на своём OnePlus, и одна находка была неприятной: шторка на Android уезжала верхом за край экрана вместе с крестиком. Браузер считает высоту экрана без своих панелей, и шторка в 94% от неё оказывалась выше видимой части. Закрыть окно было нечем, а человек, которого нельзя отпустить, закрывает не окно, а вкладку.

Теперь шторка считается по видимой части экрана, над ней всегда остаётся полоса затемнения (тап по ней закрывает окно), а крестик держится у верха и не уезжает с прокруткой. Шторка подстраивается и под размер телефона. На низких экранах вроде iPhone SE содержимое ужимается, чтобы до кнопки «Жду звонка» не приходилось листать. На совсем низких, например когда телефон положили боком, доводы уходят: форма и номер важнее. На узких — меньше поля по бокам.

Что осталось прежним

• Виджет по-прежнему не ломает сайт. Он рисуется в своём изолированном слое, чужие стили на него не действуют, а его стили — на сайт. Своего счётчика Метрики он не ставит.
• Клик в мессенджер — событие, а не заявка. Заявки рождаются только из звонка и формы.
• Защита от накрутки работает так же. Крупное окно не открывает дорогу ботам: заявки по-прежнему проходят оценку доверия. Как это устроено в общих чертах — в статье про накрутку в Яндекс.Директе.

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

Как включить

1. Обновите Пробит до свежей версии — кнопкой в CRM, как обычно.
2. Откройте «Виджет звонка» и выберите режим «Агрессивный».
3. Выберите вид окна: панель справа, треть слева или окно по центру.
4. Отметьте поводы: попытка уйти и, при желании, таймер — например, 30–40 секунд. Задайте частоту.
5. Перепишите доводы своими словами, подберите цвета, напишите текст после отправки.
6. Сохраните и откройте свой сайт — окно уже новое.

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

Итог

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

Если Пробита у вас ещё нет, возьмите демо на 30 дней — карта не нужна, а виджет со всеми режимами уже внутри. Агентствам с несколькими сайтами пригодится мультилицензия: один код виджета на все сайты, заявки — в одну CRM. А про то, зачем вообще отдельная CRM рядом с сайтом, я писал в главной статье кластера — коробочная CRM: плюсы, минусы и когда она нужна.

Частые вопросы

Агрессивный режим включится у меня сам после обновления?

Нет. После обновления виджет работает в обычном режиме, как раньше. Агрессивный режим, вид окна и таймер включаются в «Виджете звонка» только вами.

Работает ли таймер на телефоне?

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

Не будет ли окно выскакивать на каждой странице?

Нет. Частоту вы задаёте сами: раз за визит, раз в сутки или раз в неделю. Тому, кто уже открывал виджет, писал в чат или оставил заявку, окно само не показывается.

Можно ли подстроить виджет под цвета сайта?

Да. В настройках четыре цвета: основной, фон окна, текст и блок преимуществ, плюс готовые наборы. Рамки и подписи виджет пересчитывает сам, поэтому работает и тёмное окно.

Как понять, помогает ли агрессивный режим?

В разделе «События» видно, что раскрыло окно: уход со страницы или таймер. Рядом — заявки этого визита, так что сравнить можно на своих цифрах.