Кратко#
- Что это. Виджет «Задать вопрос» встраивается в сайт одной строкой и превращается в окно чата в правом нижнем углу каждой страницы. Посетитель пишет, менеджер отвечает из раздела «Входящие обращения».
- Что умеет. Чат с менеджером, быстрые темы, вложения, форма «Оставьте контакт» и «Перезвоните мне», копия переписки на почту, оценка диалога, показ того, кто на связи, разговор, который не пропадает при переходе между страницами. Работает на телефоне и в тёмной теме.
- Что передаёт менеджеру. Какой товар смотрел посетитель, откуда пришёл и с какого устройства, поэтому менеджер не переспрашивает.
- Подключение. Одна строка
<script async src="…/loader.js">в теме сайта. Ничего устанавливать и менять в шаблонах страниц не нужно, сайт не замедляется. - Безопасность. Окно живёт отдельно от стилей и скриптов сайта, сервер отвечает только сайтам из списка разрешённых адресов, согласие на обработку данных фиксируется, есть ограничения от спама и кнопка аварийного выключения.
- Если что-то сломалось. Сайт продолжает работать как обычно, а вместо чата показывается запасной контакт.
Оглавление#
- Кратко
- Что умеет виджет
- Как это выглядит для посетителя
- Состояния виджета
- Согласие и персональные данные
- Подключение к сайту
- Настройка
- Сведения для разработчика сайта
- Проверка после подключения
- Если что-то не работает
- Частые вопросы
Что умеет виджет#
| Возможность | Как работает для посетителя |
|---|---|
| Кнопка «Задать вопрос» | Закреплена в правом нижнем углу, показывает, есть ли кто-то на связи, и открывается одним нажатием без регистрации |
| Быстрые темы | Кнопки «Подобрать датчик», «Цена и КП», «Техподдержка», «Перезвоните мне»: сообщение отправляется одним нажатием. Набор тем настраивает руководитель |
| Чат с менеджером | Менеджер подключается к чату, посетитель видит его имя и должность и слышит, когда тот печатает |
| Вложения | Скрепка: до трёх файлов за раз (jpg, png, pdf, docx, xlsx, zip), каждый до 10 МБ |
| Форма контакта | Если никто не ответил, после первого сообщения виджет просит имя и телефон или почту |
| «Перезвоните мне» | Короткая форма только с телефоном |
| Копия переписки | Меню чата: «Отправить переписку на почту» (не чаще трёх раз в час) |
| Оценка | Меню чата: от 1 до 5 звёзд и комментарий, виден менеджеру |
| Продолжение разговора | Разговор хранится в браузере: при переходе на другую страницу или обновлении он на месте |
| Контекст страницы | Название и артикул открытого товара, источник перехода и метки передаются менеджеру автоматически |
| Тёмная тема и телефон | Виджет подстраивается под тему устройства; на узком экране окно занимает весь экран |
| Клавиатура | Enter отправляет, Shift+Enter переносит строку, Esc сворачивает окно; элементы доступны с клавиатуры и подписаны для программ чтения с экрана |
Как это выглядит для посетителя#
Кнопка и приветствие#
В правом нижнем углу кнопка «Задать вопрос». Под надписью видно, кто сейчас отвечает: аватары менеджеров на связи и подпись «Менеджеры на связи».
Если на связи никого нет или идёт нерабочее время, значок меняется на «Отвечаем в рабочее время». Написать всё равно можно.
- Шапка: кто отвечает и обычный срок ответа.
- «Вы смотрите: …»: название открытого товара, которое видит и менеджер.
- Быстрые темы. Первые три отправляют готовую фразу и помечают обращение направлением «Продажи» или «Техподдержка».
- Поле ввода и скрепка для файлов.
- Строка согласия на обработку персональных данных. Отдельной галочки нет: нажатие «Отправить» считается согласием, ссылки «согласие» и «политика» ведут на страницы сайта, кнопка «Текст согласия» раскрывает полный текст.
Разговор#
Пока менеджер не взял чат, посетитель видит «менеджеры на связи, подключаемся».
После подключения в шапке появляются имя и должность менеджера (фамилия посетителю не показывается), а в переписке строка «К чату подключается …». Пока менеджер печатает, посетитель видит «[имя] печатает».
Пример диалога.
| Кто | Сообщение |
|---|---|
| Посетитель | Нужен датчик уровня на бак 400 литров, ставим на самосвал |
| (система) | К чату подключается Сергей |
| Менеджер | Здравствуйте! Подойдёт датчик ТД-150 нужной длины. Напишите, пожалуйста, высоту бака, и я подготовлю предложение |
| Посетитель | Высота 1100 мм |
| Менеджер | Принял, пришлю коммерческое предложение на почту в течение часа. Какой адрес указать? |
Меню, оценка и завершение#
Кнопка с тремя точками открывает меню: «Отправить переписку на почту», «Оценить диалог», «Завершить диалог». После закрытия чата можно оценить диалог или начать новый.
Если никто не ответил#
Сообщение сохраняется сразу. Чтобы менеджер смог связаться, виджет предлагает оставить имя и телефон или почту. После отправки обращение помечается «нужен менеджер», а посетитель видит подтверждение.
Кнопка «Перезвоните мне» открывает такую же форму, но спрашивает только телефон.
Состояния виджета#
| Ситуация | Что видит посетитель | Что происходит с обращением |
|---|---|---|
| Менеджеры на связи, рабочее время | «Менеджеры на связи», обычный срок ответа | Менеджер получает всплывающую карточку и подключается |
| Рабочее время, но никто не на связи | «Подключаемся», затем форма контакта | Обращение ждёт в «Не распределены», срок ответа считается |
| Нерабочее время, выходной | «Отвечаем в рабочее время», форма контакта | Срок ответа начнёт идти с начала рабочего дня |
| Сервер недоступен более 5 секунд | Кнопка с запасным контактом (по умолчанию письмо на корпоративный адрес) | Сайт работает как обычно |
| Чат выключен кнопкой | Запасной контакт вместо чата | Новые сообщения не принимаются, открытые чаты остаются у менеджеров |
| Адрес сайта не в списке разрешённых | Окно не открывается | Запросы отклоняет сервер (см. настройку) |
Согласие и персональные данные#
- Согласие запрашивается один раз, при первой отправке: нажатие «Отправить» считается согласием. На сервере сохраняются версия текста и время. Повторно согласие запрашивается, только если версия текста изменилась.
- В браузере посетителя (в локальном хранилище) лежат только служебные значения: идентификатор разговора, отметка о согласии, сведения о переходе и введённый контакт. Если хранилище недоступно, виджет работает до закрытия вкладки.
- На сервере хранятся переписка, вложения, контакт (если посетитель его оставил), страница, источник, тип устройства и версия согласия.
- Срок хранения: анонимные чаты без контакта удаляются через 12 месяцев после последнего сообщения, обращения с контактом или клиентом через 3 года. Открытые обращения не удаляются.
- Ссылки «согласие» и «политика» должны вести на опубликованные страницы сайта. Подготовьте их до включения чата.
Подключение к сайту#
Одна строка#
Добавьте в тему сайта, в общий шаблон страниц перед закрывающим тегом </body>:
<script async src="https://<адрес сервера>/static/site-chat/loader.js?v=1"></script>
Вместо <адрес сервера> подставьте адрес сервера системы (его выдаёт администратор). Больше ничего устанавливать не нужно.
Пример для сайта на InSales#
- Откройте «Сайт» → «Счётчики и коды».
- В поле «HTML-разметка для вывода на всех страницах магазина» вставьте строку
<script …>из примера выше (в конец поля). - Нажмите «Сохранить».
- Откройте любую страницу магазина в обычном окне: справа внизу должна появиться кнопка «Задать вопрос».
Если на странице уже есть другой чат (например, чат другого сервиса), уберите его, чтобы кнопки не накладывались друг на друга.
Что делает loader.js#
- Небольшой файл
loader.jsпосле загрузки страницы подгружает сам виджет и не блокирует показ сайта. - Адрес сервера берётся из строки подключения. При необходимости его можно задать атрибутом
data-base(например,data-base="https://chat.example.ru"). - Параметр
v=1в адресе меняют, когда нужно обновить виджет у всех посетителей, минуя кэш браузера. - Повторное подключение игнорируется: на странице всегда один виджет.
Настройка#
Настройки находятся в разделе «Входящие обращения» → «Настройки» (видны руководителю).
| Что | Для чего |
|---|---|
| Адреса сайта | Список адресов, которым отвечает сервер. Адрес пишется с протоколом и без пути: https://www.example.ru. Если сайт доступен с www и без, внесите оба. Адрес не внесён: браузер блокирует запросы, окно не открывается |
| Быстрые темы | Название кнопки, направление (продажи или техподдержка), текст сообщения. Отметка «Перезвонить» превращает кнопку в форму «Перезвоните мне» |
| График работы | Рабочие дни и часы, часовой пояс. От него зависят подпись «Отвечаем в рабочее время» и срок первого ответа |
| Тексты | Приветствие, подпись запасного контакта, подсказки |
| Запасной контакт | Что показать, если сервер недоступен |
| Аварийное выключение | Кнопка «Аварийно выключить чат»: сайт перестаёт принимать сообщения, пока вы не нажмёте «Включить чат» |
Изменения вступают в силу после «Сохранить». Виджет обновляет настройки сам, перезагружать сайт не нужно.
Сведения для разработчика сайта#
- Изоляция. Окно создаётся в изолированном «теневом» дереве страницы (Shadow DOM): стили сайта на него не влияют, а стили виджета не меняют сайт. Поверх страницы окно рисуется с максимальным слоем, закреплено в правом нижнем углу.
- Размер. Загрузчик около одного килобайта, сам виджет около 70 КБ без внешних библиотек. Файлы кэшируются браузером на сутки.
- Запросы. Виджет ходит на сервер системы по защищённому соединению: создание сессии, отправка сообщений, получение новых сообщений примерно раз в 3 секунды, отправка файлов. Идентификатор сессии передаётся заголовком
X-Chat-Token. Сервер отвечает только адресам из списка разрешённых. - Политика безопасности сайта (CSP). Если на сайте включена строгая политика, разрешите загрузку скриптов с адреса сервера (
script-src), запросы к нему (connect-src) и встроенные стили виджета (style-src 'unsafe-inline'). - Хранилище. Используется локальное хранилище браузера (ключи
exz_chat_*), файлы cookie виджет не ставит. - Что читается со страницы. Адрес и заголовок страницы, название, артикул и цена товара из разметки страницы, метки перехода (utm), страница, с которой пришёл посетитель, тип устройства и язык. Значения полей форм сайта не читаются.
- Ограничения от спама. Сообщение до 4000 символов, не более 30 сообщений за 10 минут с одного посетителя, слишком быстрая отправка (быстрее секунды) отклоняется, три файла до 10 МБ.
- Браузеры. Современные версии Chrome, Edge, Firefox, Safari и их мобильные версии. В узком окне (до 600 пикселей) чат раскрывается на весь экран.
Проверка после подключения#
- Откройте страницу сайта в обычном окне и нажмите «Задать вопрос».
- Напишите вопрос и нажмите Enter.
- В системе, у пользователя со статусом «на связи», должна всплыть карточка «Новый чат с сайта».
- Нажмите «Подключить чат», ответьте и убедитесь, что ответ появился в окне на сайте.
- Откройте сайт с телефона и проверьте, что окно раскрывается на весь экран.
- Закройте окно и обновите страницу: разговор должен остаться на месте.
- Отправьте письмо на корпоративный адрес с другого ящика: через минуту оно должно появиться в списке «Не распределены».
Если что-то не работает#
| Симптом | Вероятная причина | Что сделать |
|---|---|---|
| Кнопки «Задать вопрос» нет | Строка не добавлена или добавлена не на все страницы | Проверьте исходный код страницы: должна быть строка loader.js. Сохраните изменение и обновите страницу без кэша (Ctrl+F5) |
| Кнопка есть, окно не открывается или ничего не отправляется | Адрес сайта не внесён в список разрешённых | Добавьте адрес с протоколом и без пути, с www и без |
| Вместо чата кнопка с запасным контактом | Сервер недоступен или чат выключен | Проверьте «Настройки»: не нажато ли «Аварийно выключить чат». Если нет, обратитесь к администратору |
| Менеджер не видит новый чат | Никто не «на связи» | Менеджеры включают статус «На связи». Обращение ждёт в «Не распределены» |
| Виджет перекрывает другую кнопку на сайте | Другой плавающий элемент в том же углу | Сдвиньте элемент сайта или уберите лишний чат |
| Посетитель не может приложить файл | Больше трёх файлов, файл больше 10 МБ или недопустимый тип | Сообщите ограничения посетителю |
| Строгая политика безопасности блокирует загрузку | В CSP не разрешён адрес сервера | Добавьте адрес в script-src и connect-src |
| Ссылки «согласие» и «политика» не открываются | Страницы сайта не опубликованы | Опубликуйте страницы согласия и политики |
Аварийное выключение. При сбое или спам-атаке откройте «Настройки» → «Аварийно выключить чат» и подтвердите. Сообщения перестанут приниматься, открытые чаты останутся у менеджеров. Когда причина устранена, нажмите «Включить чат».
Откат. Чтобы убрать виджет с сайта, удалите строку loader.js из темы сайта.
Частые вопросы#
Нужно ли посетителю вводить имя и телефон, чтобы написать? Нет. Достаточно вопроса и нажатия «Отправить». Контакт запрашивается, только если никто не ответил.
Чат не пропадёт, если посетитель перейдёт на другую страницу? Нет. Разговор хранится в браузере и продолжается на следующей странице и после обновления.
Как менеджер узнаёт, о каком товаре спрашивают? Виджет передаёт название и артикул открытой страницы. Менеджер видит их в карточке обращения.
Замедляет ли виджет сайт? Нет. Он загружается после показа страницы и не блокирует её.
Можно ли поставить виджет на несколько сайтов? Да. Добавьте в список разрешённых адресов каждый сайт и подключите ту же строку на каждом.
Что видит посетитель в нерабочее время? Подпись «Отвечаем в рабочее время». Он может написать и оставить контакт, обращение сохранится, срок ответа начнётся с начала рабочего дня.
Можно ли временно отключить чат? Да, кнопкой «Аварийно выключить чат» в настройках. Строку с сайта удалять не нужно.