Что такое виджет SupportHub
Кнопка в углу сайта, которая открывает панель с чатом, а когда есть контент — ещё со статьями базы знаний и новостями.
Виджет — это один внешний JavaScript-файл, который вы вставляете на свой сайт. После загрузки он сам добавляет на страницу кнопку и панель с вкладками и подключается к нашему API. Никаких iframe и никакого бэкенда с вашей стороны не нужно.
Из чего состоит виджет
Кнопка и панель
Кнопка в правом нижнем углу — по умолчанию с иконкой чата и надписью. Панель 400×640 на компьютере и на весь экран на телефоне (до 640 px); там, пока панель открыта, плавающей кнопки нет, а закрывают панель крестиком в шапке. Настраиваются цвет, текст и иконка кнопки, логотип и его форма.
Вкладки
Главная · Чат · Помощь · Новости · Сервис. «Помощь» и «Новости» видны, только если включены в конструкторе и для них есть контент — опубликованные публичные статьи и оглашения для клиентов. «Сервис» — ваша страница из раздела «Мини-приложение»: видна, когда вкладка включена и задан её адрес.
WebSocket
Подключается, когда у посетителя появляется обращение. Приносит ответы оператора, сообщения о событиях обращения (взято, передано, отложено, закрыто — те же, что остаются в истории) и отметку «прочитано».
ID посетителя
ID посетителя (vs_*) хранится в пяти местах: cookie, localStorage, sessionStorage, IndexedDB и старый общий ключ localStorage. Если браузер очистил часть из них, посетитель всё равно вернётся в свою переписку.
Как настраивается
Все параметры живут в одном конфиге cfg, который редактируется в НастройкиКонструктор виджета (/settings/widget-builder). На широком экране слева — список разделов, в центре — настройки, справа — живое превью; на узком превью открывается кнопкой «Превью».
Разделы: «Брендинг», «Приветствие», «Вкладки», «Формы и темы», «Чат», «Часы работы», «Системные сообщения», «Email-мост», «Расширенные» (свой CSS, звук уведомления, cookie-домен), «Закреплённый баннер», «Кнопки ответа», «Мини-приложение», «Приветствия / отсутствие», «Набор иконок», «Набор эмодзи», «Приватность».
Разделы со значком молотка помечены как «в разработке»: настроек в них пока нет. Некоторые поля в рабочих разделах тоже пока ни на что не влияют; это отмечено на страницах этих разделов.
Изменения сами сохраняются в черновик. Чтобы их увидели посетители, нажмите «Опубликовать» в верхней панели; «Отменить» возвращает черновик к опубликованной версии.
Где и как доступен
Поддерживаемые браузеры
Бандл собран esbuild под target: es2018, так что нужен современный браузер; IE11 не поддерживается.
Загрузка и кеш
Бандл (/widget-bundle) грузится асинхронно и не блокирует отрисовку страницы; ответ сжимается gzip. Опубликованный конфиг сервер обычно вставляет прямо в начало бандла, так что отдельного запроса за /config нет; если это не удалось, виджет запросит конфиг сам.
Бандл вместе с конфигом браузер кеширует на 5 минут (Cache-Control: public, max-age=300, stale-while-revalidate=86400). Поэтому опубликованные изменения и обновления виджета доходят до посетителя не сразу: обычно в течение нескольких минут, иногда — со следующей загрузки страницы после этого.
Cross-domain
Виджет работает на любом домене: ID проекта передаётся в параметре ?ws= адреса скрипта, а CORS на бэкенде разрешает любой источник (*). Чтобы принимать сообщения только со своих сайтов, перечислите домены в Конструктор виджетаПриватностьРазрешённые домены и опубликуйте. После этого отправка сообщений, ответов, файлов и данных посетителя с других доменов получает отказ 403. Пустой список — разрешены любые домены.
Cross-subdomain
Если сайт живёт на нескольких поддоменах (example.com + app.example.com) и вы хотите, чтобы посетитель сохранял одну переписку, задайте домен cookie с точкой в начале (.example.com) в Конструктор виджетаРасширенныеCookie-домен (опционально) или атрибутом data-cookie-domain=".example.com" прямо в теге — атрибут важнее конфига. Без этого cookie привязан к одному хосту, и на разных поддоменах посетитель получает разные ID. Слишком широкий домен (.com, .co.uk) браузер не примет. Подробнее — в справочнике для разработчиков.