Как установить виджет Chatix на сайт

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

Для установки не нужны токены сторонних сервисов. Chatix сам создаёт публичный ключ канала и готовый HTML-фрагмент. От владельца сайта нужны доступ к настройкам агента и возможность вставить код перед закрывающим тегом </body>.

Что подготовить#

Перед подключением проверьте:

• AI-агент Chatix создан и обучен на актуальных источниках;
• вы знаете все адреса сайта, на которых должен работать чат;
• у вас есть доступ к HTML-шаблону, Tilda, Wix, Shopify, WordPress, Битрикс или другой CMS;
• сайт открывается по HTTPS;
• для проверки подготовлены вопросы, ответы на которые точно есть в базе знаний агента.

Если сайт доступен и с основного домена, и с варианта www, добавьте оба адреса. Для браузера это разные Origin, даже если один адрес перенаправляет на другой.

Как работает подключение#

Канал состоит из трёх частей:

1. Файл widget.js загружает интерфейс Chatix асинхронно.
2. Элемент <chatix-widget> передаёт API-адрес и публичный ключ канала.
3. Список разрешённых доменов определяет, с каких сайтов API примет запросы виджета.

Публичный ключ выглядит как pk_…. Он нужен браузеру и поэтому не является паролем. Защита строится не на сокрытии ключа, а на точном списке разрешённых Origin. Если запрос пришёл без Origin, с другого протокола или с домена, которого нет в списке, Chatix отклонит его.

Сам виджет работает как Web Component в Shadow DOM. Его стили изолированы от большинства CSS-правил сайта, а код можно установить один раз в общий шаблон, чтобы чат появился на всех нужных страницах.

1. Откройте настройки виджета#

В Chatix откройте нужного агента, перейдите в Каналы и выберите Виджет на сайте.

Настройки разделены на три вкладки:

• Контент — имя, аватар, приветствие, подсказки и сбор контактов;
• Стиль — цвет, тема, положение и вид кнопки;
• Установка — разрешённые сайты и готовый код.

Сначала настройте контент и внешний вид, затем подключайте канал. Изменения стиля сохраняются отдельной кнопкой Сохранить виджет.

2. Настройте контент#

Заполните поля так, чтобы посетитель сразу понимал назначение чата:

• имя ассистента должно объяснять его роль;
• приветствие — кратко сообщать, с чем он помогает;
• стартовые вопросы — отражать реальные частые обращения;
• текст в поле ввода — подсказывать, что пользователь может спросить.

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

Для аватара подходят PNG, JPEG, WEBP и GIF размером до 2 МБ. Используйте квадратный логотип или другой узнаваемый знак вашей компании. Если файл не загружен, виджет покажет первую букву имени ассистента.

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

3. Настройте внешний вид#

Во вкладке Стиль выберите:

• основной цвет или собственный цвет в формате HEX;
• светлую, тёмную или системную тему;
• положение кнопки слева или справа;
• острые, мягкие или каплевидные углы;
• круглую кнопку, кнопку с текстом или кнопку-пузырь;
• показ аватара.

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

На бесплатном тарифе подпись Powered by Chatix показывается обязательно. На платном тарифе её можно отключить в настройках брендинга.

4. Добавьте разрешённые домены#

Перейдите во вкладку Установка и в блоке Сайты с виджетом добавьте адрес сайта. Chatix нормализует введённое значение до Origin — сочетания протокола, домена и порта.

Добавьте фактический Origin сайта, на котором должен работать виджет: протокол, домен и порт, если он используется.

Указывайте только Origin, без пути. Например, адрес страницы https://example.ru/pricing соответствует Origin https://example.ru. Если тестовый сайт работает на другом поддомене или порту, добавьте его отдельной строкой.

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

Не добавляйте http:// «на всякий случай», если рабочий сайт использует HTTPS. Origin должен в точности совпадать с адресом в браузере посетителя.

5. Подключите канал и скопируйте код#

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

После подключения в блоке Шаг 1 · Скопируйте код появится готовый фрагмент. В нём будут:

• комментарий <!-- Chatix widget -->;
• асинхронный скрипт https://chatix.ai/widget.js;
• элемент <chatix-widget>;
• API-адрес https://api.chatix.ai;
• уникальный data-public-key="pk_…" текущего канала.

Копируйте код кнопкой из интерфейса. Не набирайте API-адрес и публичный ключ вручную: значения формируются для текущей production-инсталляции и конкретного канала.

6. Вставьте код на сайт#

Размещайте весь фрагмент перед закрывающим тегом </body>. Тогда основная разметка страницы загрузится раньше, а виджет будет доступен на всех страницах, которые используют этот шаблон.

Tilda#

Откройте страницу, затем Библиотека блоков → Другое → T123 «HTML-код». Вставьте полный код Chatix в блок и опубликуйте страницу. В редакторе код может отображаться как текст и начинает работать только после публикации — это подтверждает официальная справка Tilda.

Если виджет нужен на всех страницах, добавьте блок в общий шаблон или повторите установку на нужных страницах и опубликуйте их.

Wix#

В панели сайта откройте Settings → Development & Integrations → Custom Code, нажмите Add Custom Code и вставьте фрагмент Chatix. Выберите All pages и размещение Body — end, затем примените изменения.

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

Shopify#

Сначала создайте копию темы. Затем откройте Online Store → Themes → меню темы → Edit code, найдите основной layout-файл theme.liquid и вставьте код непосредственно перед </body>. Сохраните файл и проверьте витрину.

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

WordPress#

Для классической темы добавьте вывод кода через хук wp_footer в дочерней теме либо используйте управляемый способ вставки кода в footer. Не редактируйте functions.php родительской темы: обновление может удалить изменение.

Хук wp_footer выполняется рядом с закрывающим </body> и предназначен в том числе для подключения скриптов. Это описано в документации WordPress и руководстве по дочерним темам.

После установки очистите кэш WordPress, кэш плагина оптимизации и CDN, если они используются.

1С-Битрикс#

Откройте общий шаблон сайта и найдите файл footer.php. Вставьте фрагмент Chatix перед </body>, сохраните шаблон и очистите управляемый кэш Битрикс. Если сайтов или шаблонов несколько, убедитесь, что изменён именно тот шаблон, который назначен рабочему домену.

Сайт с собственным кодом#

Добавьте фрагмент в общий layout перед </body>, соберите проект и разверните изменения. Для SPA код должен присутствовать в основном HTML-документе один раз; не добавляйте новый <chatix-widget> при каждом переходе между маршрутами.

7. Проверьте установку#

Откройте опубликованный сайт в приватном окне. Проверьте:

1. Кнопка Chatix появилась в выбранной стороне экрана.
2. Чат открывается и показывает заданное приветствие.
3. Тестовый вопрос получает фактический ответ из подключённой базы знаний.
4. Диалог появился в helpdesk выбранного агента.
5. На мобильной ширине кнопка не перекрывает корзину, cookie-баннер или навигацию.
6. После перезагрузки диалог продолжается в той же браузерной сессии.

Chatix хранит токен сессии и идентификатор последнего диалога в localStorage для конкретного публичного ключа. Если хранилище браузера недоступно, виджет продолжит работать, но после перезагрузки состояние может не сохраниться.

Если виджет не появился#

Домен не разрешён#

Сравните адрес в браузере со списком Сайты с виджетом. Варианты с http://, https:// и www считаются разными Origin. Добавьте фактический адрес и нажмите Сохранить домены.

На странице остался старый код#

Повторно скопируйте фрагмент из текущего канала. Проверьте, что data-public-key не относится к удалённому или другому агенту Chatix. Очистите кэш CMS и CDN.

Код добавлен, но страница не опубликована#

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

Скрипт заблокирован политикой безопасности#

Если сайт использует Content Security Policy, разрешите загрузку скрипта с https://chatix.ai и сетевые обращения к https://api.chatix.ai. Точный набор директив зависит от CSP сайта; после изменения проверьте консоль браузера на ошибки script-src и connect-src.

Кнопку перекрывает интерфейс сайта#

Переключите позицию слева или справа. Проверьте фиксированные мобильные панели и cookie-баннеры. Не пытайтесь исправить виджет глобальными CSS-селекторами: интерфейс находится в Shadow DOM.

Как узнавать авторизованных пользователей#

После обычной установки все посетители могут писать как анонимные пользователи. Если на вашем сайте есть личный кабинет, владелец или администратор рабочего пространства может открыть блок Узнавайте клиентов в чате и получить секрет identity verification.

Секрет хранится только на сервере сайта. Сервер подписывает идентификатор пользователя HMAC-SHA256, а браузер передаёт результат через chatix.identify(...). При выходе из аккаунта сайт вызывает chatix.reset(). Никогда не помещайте identity secret в HTML, JavaScript-бандл, скриншот или базу знаний.

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

Чек-лист перед запуском#

• Имя, приветствие и аватар соответствуют назначению сайта.
• Добавлены все реальные HTTPS-Origin сайта.
• Канал подключён, а код скопирован из текущей вкладки Установка.
• Фрагмент установлен один раз перед </body>.
• CMS, сайт и CDN опубликованы и очищены от старого кэша.
• Тестовый вопрос получает ответ из актуальной подключённой базы знаний.
• Диалог виден в helpdesk правильного агента.
• Мобильная кнопка не перекрывает элементы сайта.
• Identity secret, если используется, хранится только на сервере.

Обзор возможностей канала находится на странице Виджет Chatix для сайта. Если ответы неточны, проверьте источники по чек-листу диагностики базы знаний.