Перейти к основному содержимому

🌐 Виджет

Встраиваемый чат для вашего сайта. В селекте «Платформа» канал так и называется — «Виджет».

Виджет — это чат в реальном времени. Посетитель пишет прямо со страницы, обращение попадает в «Поддержка» → «Чаты», оператор отвечает из Fixorix. Других способов связи (обратный звонок, email-форма) виджет не предлагает.

Создание

Виджет создаётся в разделе «Каналы» (левое меню, группа «Проект») кнопкой «Создать». В окне «Создание канала» в поле «Платформа» выберите «Виджет» — дальше мастер из трёх шагов.

Шаг 1 — «Создание канала». Заполните поля и нажмите «Далее».

ПолеОбязательноЧто вводить
НазваниедаИмя канала в списке. Подсказка: «Например: Чат поддержки».
ОписаниенетЗаметка для себя. Подсказка: «Например: виджет на лендинге».
Укажите домен сайтадаДомен, на котором будет работать чат. Подсказка: «Например: example.ru или localhost».

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

Шаг 3 — «Виджет готов». Здесь выдаются код установки, HMAC-секрет и техническая информация (Widget ID, Host). Кнопка «К списку каналов» закрывает мастер.

Подробное пошаговое руководство с примером кода — Установка виджета.

HMAC-секрет показывается один раз

Секрет вида widsk_… выдаётся на шаге «Виджет готов» и больше нигде не отображается. Сохраните его сразу — он нужен для опознания пользователей (см. ниже). Если секрет потерян, выпустите новый кнопкой «Сбросить секрет».

Домен виджета

Домен нужен, чтобы виджет разрешили загружать на вашем сайте.

  • Список разрешённых доменов общий для проекта: домен, добавленный при создании или редактировании любого виджета, начинает работать для всех виджетов этого проекта.
  • Домен указывайте без порта: localhost, а не localhost:3000. Порт при проверке отбрасывается, и виджет со страницы на нестандартном порту получит отказ.
  • Схему https:// убирать не обязательно — введённое значение нормализуется автоматически.
  • Страница чата встраивается только по HTTPS. По http://localhost браузер заблокирует фрейм, даже если домен localhost разрешён.

Карточка виджета

Клик по строке канала открывает справа панель «Детали виджета»:

ПолеЧто показывает
НазваниеИмя канала (если не задано — «Без названия»).
ОписаниеЗаметка, если она была заполнена.
ДоменДомен, привязанный к виджету.
ПлатформаПилюля «Виджет».
СтатусПилюля «Работает» или «Остановлен».
Скрипт для вставки на сайтГотовый код установки с кнопкой «Скопировать».
ID виджетаИдентификатор виджета (он же Widget ID из сниппета).
ID клиентаВнутренний идентификатор клиента.
HMAC-секретСекция с кнопкой «Сбросить секрет».

Код установки

Сниппет лежит в карточке виджета (строка «Скрипт для вставки на сайт») и на вкладке «Детали». Над кодом — переключатель из двух режимов и ссылка «Документация по подключению».

РежимЧто даётЧто нужно на вашей стороне
«Без авторизации»Обычный анонимный чат: посетитель пишет, не представляясьВставить одну строку кода на страницы сайта
«С авторизацией»Чат открывается от имени вошедшего на сайт пользователя: одна история переписки на всех его устройствах, у оператора виден контактСчитать подпись посетителя на сервере (HMAC-секрет) и передать её виджету

Переключение режима меняет только текст сниппета: настройки виджета от этого не зависят.

  • В режиме «Без авторизации» код — это одна строка script с адресом загрузчика и идентификатором виджета.
  • В режиме «С авторизацией» к нему добавляется вызов инициализации с полями widgetId, userId, userHash и, при желании, email. Значения userId и userHash подставляет ваш сайт — в сниппете на их месте стоят заглушки, которые нужно заменить.

Кнопка «Скопировать» копирует код целиком в том режиме, который выбран сейчас.

Начните с простого

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

Пошаговое руководство с готовым примером — Установка виджета.

Настройки виджета

Настройки правятся в панели «Редактирование виджета» — иконка карандаша в строке канала. Четыре вкладки: «Основные», «Вид», «Чат», «Детали». На вкладках «Вид» и «Чат» рядом показывается живое превью. Изменения сохраняются кнопкой «Сохранить», после чего появляется уведомление «Виджет обновлён».

Вкладка «Основные»

НастройкаЧто делает
НазваниеИмя канала в списке. Обязательное поле.
ОписаниеСвободная заметка.
Привязанный доменДомен, на котором работает виджет. При некорректном вводе появляется «Введите корректный домен».
Смена домена

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

Вкладка «Вид»

НастройкаЧто делает
Основной цветЦвет кнопки-лаунчера и шапки чата.
Оттенок текстаДополнительный цвет оформления чата.
Позиция виджета«Слева» или «Справа» — угол экрана, в котором появляется кнопка чата.
Показывать аватар оператораПереключатель. Подсказка: «Лицо оператора в чате повышает доверие. Выключите для строгого корпоративного стиля.»

Вкладка «Чат»

НастройкаЧто делает
Задержка автооткрытия, секЧерез сколько секунд чат откроется сам. Значение -1 (и любое значение меньше единицы) отключает автооткрытие; задержка больше 60 секунд обрезается до 60.
Приветственное сообщениеПервое сообщение, которое увидит посетитель. До 256 символов.
Пока не работает

Настройки «Показывать аватар оператора» и «Приветственное сообщение» сохраняются и видны в предпросмотре, но на сайт клиента не передаются — посетитель видит аватар и приветствие, заданные по умолчанию.

Настроек рабочего времени пока нет

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

Вкладка «Детали»

ПолеЧто показывает
Widget IDИдентификатор виджета — он же подставляется в сниппет.
HostДомен, привязанный к виджету.
Уникальный ключИдентификатор клиента.
Код установкиСниппет с кнопкой «Скопировать».
HMAC-секретСекция с кнопкой «Сбросить секрет».

Остановка виджета

В строке канала есть кнопка «Выключить виджет» / «Включить виджет», а текущее состояние показывается пилюлей в колонке «Статус»: «Работает» или «Остановлен». После действия появляется уведомление «Виджет выключен» или «Виджет включён»; если переключить не удалось — «Не удалось изменить состояние виджета. Попробуйте ещё раз.».

Что происходит при выключении:

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

Остановка удобна, когда сайт на техобслуживании или отдел поддержки временно не работает.

Уже открытые диалоги не удаляются

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

Что умеет чат в виджете

Сообщения

  • Текст оформляется Markdown: жирный, курсив, зачёркивание, инлайн-код и блоки кода, маркированные и нумерованные списки, цитаты, горизонтальные линии, ссылки (открываются в новой вкладке). Заголовки, таблицы, картинки и сырой HTML не поддерживаются — разметка отбрасывается, текст остаётся. Одиночные переносы строк сохраняются.
  • Enter — отправить, Shift+Enter — перенос строки.
  • Кнопка со смайликом открывает эмодзи-пикер с категориями: «Часто используемые», «Смайлики и люди», «Животные и природа», «Еда и напитки», «Путешествия и места», «Активности», «Объекты», «Символы», «Флаги».

Вложения

  • Кнопка «Прикрепить файл» в поле ввода. Файлы выбираются по одному, предел размера — 10 МБ.
  • Выбранный файл показывается чипом с именем и крестиком «Убрать вложение»; при ошибке загрузки появляется «Не удалось загрузить файл».
  • В ленте картинки (png, jpg, gif, webp, bmp, avif) показываются превью; клик открывает полноэкранный просмотр с кнопкой «Закрыть» и закрытием по Esc. Остальные файлы, включая SVG, показываются чипом-ссылкой для скачивания.

Лента

  • Ответ-цитата: над сообщением видна плашка с автором и текстом оригинала; клик по ней прокручивает ленту к исходному сообщению и подсвечивает его.
  • Разделители дней: «Сегодня», «Вчера» или дата.
  • Умный автоскролл: лента сама уезжает вниз, если посетитель уже внизу или сам написал; если он читает выше и приходит ответ — появляется кнопка «Новые сообщения ↓».
  • История догружается порциями при прокрутке вверх — позиция чтения при этом не сбивается.
  • Пока устанавливается соединение, показывается «Подключение…», а если оно затянулось — «Не удаётся подключиться, пробуем ещё…».

Кнопки под сообщением

Сообщение от сценария может содержать ряды кнопок (инлайн-клавиатуры). Кнопка-ссылка помечена 🔗 и открывает адрес в новой вкладке, запрос контакта — 📞, геолокации — 📍. Обычная кнопка отправляет свой текст ответом от лица посетителя; после первого нажатия все кнопки этого сообщения становятся неактивными.

Опознанный пользователь

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

Как это устроено:

  1. При создании виджета выдаётся HMAC-секрет (префикс widsk_). Он хранится только на вашем сервере и в браузер не попадает.
  2. Ваш сервер считает подпись: userHash = HMAC-SHA256(HMAC-секрет, userId), результат — шестнадцатеричная строка в нижнем регистре.
  3. userId и userHash передаются виджету — параметрами в адресе сниппета либо через window.fixorixWidget.init({ ... }).
  4. Fixorix сверяет подпись и открывает чат от имени этого пользователя.

Если подпись не сошлась, чат всё равно откроется — но анонимно, как для обычного посетителя.

Сброс секрета

Кнопка «Сбросить секрет» есть в карточке виджета и на вкладке «Детали». Перед сбросом запрашивается подтверждение: «Текущий HMAC-секрет перестанет работать сразу после сброса. Продолжить?». Новый секрет показывается один раз — «Секрет сброшен. Сохраните новый — он показывается только один раз.».

Старый секрет отзывается не мгновенно

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

Продолжение диалога

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

Ограничения

  • Шапка чата зашита жёстко — «FXRX / Чат поддержки»; заменить её на свой логотип и название компании нельзя.
  • Виджет предлагает только чат: обратного звонка, email-формы и формы «представьтесь перед чатом» в нём нет.
  • Настроек рабочего времени и текста вне рабочего времени нет.
  • Посетитель не может отредактировать или удалить своё сообщение.
  • «Печатает…», реакции и отметки «доставлено» и «прочитано» в виджете не поддерживаются — как и в остальных каналах.
  • Размеры и шрифты чата не настраиваются: панель имеет фиксированный размер и на узком экране раскрывается почти на всю ширину.
  • Стили виджета нельзя переопределить со стороны сайта — он изолирован от вашего CSS, чтобы оформление страницы его не ломало.

Удаление

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

Каналы · Установка виджета · Поддержка