Документация: Установка виджета на сайт
Установка виджета на сайт
Обновлено 7 сентября 2026 г.
Виджет ставится одним скриптом на все страницы сайта перед закрывающим тегом </body>. Скрипт асинхронный — не блокирует загрузку страницы и весит меньше 30 КБ.
<script src="https://cdn.chatva.app/widget.js" …>Код установки
Перед </body>
<script src="https://cdn.chatva.app/widget.js" data-project="ch_live_9f3ka2" data-theme="system" defer></script>Ключ на этой странице демонстрационный. Свой персональный код найдите в кабинете: Виджет → вкладка «Установка».
Инструкции по платформам
| Платформа | Куда вставлять |
|---|---|
| Tilda | Настройки сайта → раздел «Еще» → «HTML-код для вставки внутрь области BODY» перед </body>, затем опубликуйте все страницы |
| WordPress | Плагин «Insert Headers and Footers» → поле Scripts in Footer. Либо Внешний вид → Редактор файлов темы → footer.php перед </body> |
| 1С-Битрикс | Настройки → Управление сайтом → Шаблоны → откройте шаблон сайта и вставьте код перед </body> |
| InSales | Тема оформления → Редактор кода → layouts/layout.liquid → вставьте код перед </body> и сохраните |
| Самописный сайт | Общий шаблон страниц или index.html — код должен оказаться на всех страницах. В React и Vue это корневой layout |
Параметры скрипта
| Параметр | Описание |
|---|---|
| data-project | Ключ проекта из кабинета (обязательный) |
| data-theme | Тема виджета: system (по умолчанию), light или dark. Переопределяет тему, выбранную в кабинете только для этой установки. |
| data-accent | Акцентный цвет виджета, hex (#a3e635) |
| data-position | Позиция кнопки: right или left |
| data-greeting | Приветствие в шапке чата |
| data-lang | Язык интерфейса виджета: ru или en |
| data-collect | Поля сбора контактов: name,phone,email |
Пример: всегда тёмная тема
<script src="https://cdn.chatva.app/widget.js" data-project="ch_live_9f3ka2" data-theme="dark" defer></script>Проверка установки
- 1
Откройте сайт в новой вкладке
Кнопка чата должна появиться в нижнем углу. Если её нет — обновите страницу с очисткой кэша (Cmd+Shift+R).
- 2
Напишите тестовое сообщение
Оно должно мгновенно появиться в инбоксе кабинета.
- 3
Нажмите «Проверить установку»
В кабинете на вкладке «Установка» есть автоматическая проверка: она увидит скрипт на вашем сайте.
Если виджет не появляется, проверьте, что код стоит именно перед </body>, а не в <head>, и что на сайте нет агрессивного блокировщика скриптов (например, строгого CSP).