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

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

Разница почти всегда в самом виджете: где он стоит, когда разворачивается, что написано на кнопке, видно ли его с телефона, сколько он весит. Каждая из этих настроек меняет то, начнёт человек диалог или пролистает мимо.

Что такое виджет чата на сайте

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

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

Из каких элементов собран виджет

В свёрнутом состоянии посетитель видит только кнопку. Всё остальное появляется после клика.

Элемент	Что делает	Что в нём настраивают
Кнопка-иконка	Свёрнутый вид виджета, единственное, что видно по умолчанию	Форма, цвет, иконка, подпись рядом, положение на экране
Окно диалога	Разворачивается по клику, в нём идёт переписка	Ширина, цвет шапки, логотип, название компании
Приветственное сообщение	Первая фраза, которую видит посетитель	Текст, условия и момент показа
Поле ввода	Через него человек пишет и прикладывает файлы	Текст-подсказка, разрешённые вложения
Форма контактов	Собирает email или телефон, чтобы ответ нашёл человека	Какие поля спрашивать и на каком шаге диалога
Статус ответа	Показывает, отвечают сейчас люди или нет	Часы работы, текст для нерабочего времени
Карточка оператора	Имя и фото того, кто отвечает	Показывать реальных сотрудников или общий профиль

Как виджет выглядит и где стоит

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

Откройте свой сайт на телефоне, дойдите до корзины и до формы оплаты и посмотрите, что происходит с кнопкой чата на каждом шаге.

Цвет и иконка

Цвет кнопки берут либо из палитры бренда, либо контрастный к фону страницы. Первый вариант выглядит аккуратнее, второй заметнее. Если чат для вас основной канал обращений, выбирайте заметный контрастный цвет.

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

Когда виджет появляется

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

Самый спокойный вариант — оставить виджет свёрнутым. Диалог начинают только те, у кого уже есть вопрос. Так делают сайты с высокой посещаемостью, где обращений и так больше, чем успевает разобрать команда.

Чаще виджет разворачивается сам через несколько секунд. Если приветствие выскакивает на второй секунде, человек закрывает его рефлекторно, ещё не прочитав. Можно ставить задержку в 30–60 секунд: к этому моменту посетитель уже понял, что за страница перед ним.

Третий вариант — показывать приветствие по поведению: на конкретной странице, при повторном визите, при долгом чтении страницы тарифов, при попытке уйти.

Приветственное сообщение

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

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

Виджет чата на мобильных

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

На что смотреть в мобильной версии:

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

Чат Carrot quest адаптирован под смартфоны: быстро открывается, не моргает и не исчезает при скролле, поэтому диалог не обрывается на середине. Если обращения приходят ещё и из мобильного приложения, чат встраивают в него через мобильный SDK, и переписка остаётся в той же карточке клиента.

Что стоит за окном виджета

Виджет — только видимая часть. Отвечать в него может оператор, сценарный бот, ИИ-бот или все по очереди, а сообщения приходят ещё и из мессенджеров — Telegram, VK, MAX. Как эта связка устроена со стороны поддержки: кто стоит на первой линии, в какой момент бот передаёт диалог человеку и что для этого нужно настроить — разобрали в статье про чат поддержки.

В МТС Линк ИИ-бот в чате закрывает 30% вопросов и вдвое сократил очередь диалогов — подробности в кейсе МТС Линк.

Как виджет влияет на скорость загрузки

Скрипт чата грузится вместе со страницей и добавляет ей вес. Мы измерили, насколько именно: взяли несколько популярных онлайн-чатов, поставили каждый на тестовый сайт и сравнили скорость загрузки и оценки ранжирования. Часть сервисов снижала оценку Lighthouse на 10–30 пунктов, скрипт Carrot quest в том замере сказывался на скорости меньше всего. Результаты и методику мы выложили в исследовании о влиянии онлайн-чатов на скорость загрузки.

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

Где хранятся переписки

Через виджет проходят имена, телефоны и почты, то есть персональные данные. По 152-ФЗ их нужно хранить на серверах в России. Выясните заранее, где лежат данные и есть ли сервис в реестре отечественного ПО. Carrot quest хранит данные на серверах в РФ и входит в реестр.

По каким метрикам понять, что виджет настроен верно

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

Метрика	Что показывает	О чём говорит просадка
Конверсия посетителей в диалог	Доля тех, кто написал, от всех, кто видел виджет	Виджет незаметен, стоит не в том месте или приветствие не цепляет
Доля закрытий приветствия	Сколько человек свернули окно, не ответив	Приветствие разворачивается слишком рано или не по теме страницы
Конверсия в диалог с мобильных отдельно	То же, что первая метрика, но только для телефонов	Мобильная версия виджета настроена как десктопная
Доля брошенных диалогов	Человек написал и ушёл, не дождавшись	Никто не дежурит или обещанное время ответа не выдерживается

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

Пять ошибок в настройке виджета

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

Приветствие просит контакты до вопроса. «Оставьте телефон, и мы перезвоним» в первом сообщении отсекает тех, кто ещё ничего не спросил. Сначала вопрос и ответ, контакты — дальше по диалогу.

Бот не умеет передавать диалог человеку. Сценарный бот отвечает только то, что в нём прописано, и на вопрос вне сценария начинает ходить по кругу. Выход к оператору нужен на каждом шаге.

Диалоги падают в общую кучу. Без правил распределения вопрос про оплату уходит тому, кто свободен, а не тому, кто в теме. Диалоги можно раздавать по очереди или по загрузке операторов, а внутри — маршрутизировать по теме обращения, каналу и сегменту клиента.

Переписка никуда не уходит из чата. Контакт остался в диалоге, в CRM не попал, менеджер о нём не знает. Интеграцию с CRM стоит настраивать сразу, а не когда наберётся сотня потерянных заявок.

Коротко

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

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

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

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

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

Чем виджет чата отличается от онлайн-консультанта?

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

Можно ли поставить виджет чата на конструктор сайтов вроде Tilda?

Да. Конструкторы позволяют вставить произвольный код на страницу или во все страницы сразу — туда и добавляют скрипт чата. У популярных CMS вроде WordPress и 1С-Битрикс есть готовые модули, которые ставят виджет без ручной вставки кода.

Где лучше разместить виджет чата на сайте?

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

Через сколько секунд показывать приветственное сообщение?

Ориентируйтесь на 30–60 секунд вместо первых секунд после захода. Ещё лучше привязать показ не ко времени, а к поведению: к конкретной странице, повторному визиту или долгому чтению тарифов.

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

Цвет, форму кнопки, иконку, логотип и тексты меняют в интерфейсе сервиса. Более глубокая переделка вёрстки зависит от того, доступно ли это в сервисе вообще.

Нужно ли согласие на обработку персональных данных в чате?

Да, если через чат вы собираете email, телефон или имя. Ссылку на политику обработки данных размещают в самом виджете, а данные по 152-ФЗ должны храниться на серверах в России.

Сколько виджетов чата можно поставить на один сайт?

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