Установка чат-виджета на сайт: как добавить онлайн-поддержку

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

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

Какое решение нужно принять до того, как виджет появится на сайте?

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

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

На каких страницах и в какой момент показывать виджет?

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

Страница	Задача виджета	Триггер	О чем первое сообщение
Тарифы	Снять возражение перед покупкой	30 секунд или попытка ухода	Какой тариф подходит команде
Страницы продукта	Записать на демонстрацию	Второй просмотр страницы продукта	Хочет ли увидеть функцию на своих данных
База знаний и документация	Поймать нерешенный вопрос	Поиск по сайту не дал результата	Нашел ли он то, за чем пришел
Оформление заказа	Предотвратить отказ	60 секунд без действий в форме	На каком поле возникла заминка
Блог и статьи	Не мешать	Нет	Виджет остается свернутым

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

Установка: от кода до первого настоящего сообщения

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

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

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

Что писать в приветствии и о чем спрашивать в предчате?

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

Предчат — вопрос баланса. Если не спрашивать ничего, вы никого не догоните, когда диалог оборвется на середине; если сразу запросить четыре поля, половина посетителей уйдет, не написав. Практичное решение — распределить сбор данных по ходу разговора: первое сообщение свободным текстом, контакты — только после того, как диалог к чему-то привел. Подробнее о такой поэтапной квалификации написано в материале о том, как собирать заявки чат-ботом на сайте. Частые ответы сохраните как «Готовые ответы»: оператор отправляет объяснение одним нажатием вместо того, чтобы набирать его десять раз в день, и формулировки остаются едиными.

Что происходит с сообщениями после окончания рабочего дня?

Большинство посетителей не знают вашего графика. Если сообщение, написанное ночью, будет прочитано в девять утра, человек должен понимать это заранее: иначе ожидаемый ответ не приходит, посетитель уходит к конкуренту, и второго шанса не будет. Функция «Автоответ вне рабочих часов» настраивается по каналам, то есть для веб-чата можно задать интервал, отличный от WhatsApp. Сообщение, пришедшее в закрытые часы, не теряется: посетитель видит, когда вы вернетесь, а диалог утром попадает в очередь открытым.

Текст автоответа важен. «Сейчас мы недоступны» — это закрытая дверь, а «ответим завтра в 9:00 первым делом, если срочно — напишите сюда» — мост, и после такой фразы просьба оставить почту звучит естественно. Сравнить ту же логику на других каналах, особенно выбор шаблонов и временных окон, можно в статье про настройку автоответов в WhatsApp. Для праздничных дней заведите отдельный календарь: правило рабочих часов, продолжающее работать в выходной день, раздражает сильнее всего.

Кто отвечает в чате: распределение, SLA и график дежурств

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

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

Где заканчивается бот и начинается человек?

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

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

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

Где диалог из чата хранится в CRM?

Чат приходит из канала без карточки, поэтому легко повисает в воздухе: посетитель анонимен, диалог закрывается, а когда через две недели тот же человек звонит, найти переписку никто не может. Этот шаг настройки касается дисциплины учета больше, чем техники. История появляется в тот момент, когда диалог привязан к контакту. «Справочник контактов» собирает всех, кто писал в общий ящик, в один список и объединяет разговоры одного человека из разных каналов, так что тема, начатая в веб-чате и продолженная почтой, не выглядит как два разных клиента.

Функция «История клиента 360» показывает рядом с диалогом заметки, метки и открытые сделки, и оператору не приходится спрашивать у посетителя, о чем говорили в прошлый раз. На стороне продаж качественный диалог должен превращаться в сделку, и определить заранее, на каком этапе и с какими полями это происходит, дешевле, чем потом чистить данные. Сопоставить место нового канала с общей последовательностью внедрения поможет руководство по внедрению CRM.

Какие показатели действительно стоит смотреть?

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

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

Какие ошибки чаще всего допускают в первые тридцать дней?

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

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

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

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

Замедляет ли чат-виджет сайт?

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

Диалог теряется, если посетитель написал и закрыл вкладку?

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

На скольких страницах запускать виджет?

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

Могут ли бот и оператор отвечать в одном диалоге?

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