Установка виджета на сайт
Обновлено 11 октября 2026 г.
На этой странице
Скопируйте код своей группы из раздела «Виджет» → «Установка» и добавьте его в общий шаблон сайта перед закрывающим </body>. После публикации проверьте кнопку чата, входящее сообщение и ответ.
<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-site-key | Альтернативное имя ключа проекта. Используйте атрибут, который выдан в вашем коде установки. |
Оформление, расположение кнопки, приветствие и сбор контактов настраиваются в кабинете → «Виджет». Отдельные атрибуты data-accent, data-position, data-greeting, data-lang и data-collect лоадер не обрабатывает.
Пример: всегда тёмная тема
<script src="https://cdn.chatva.app/widget.js" data-project="ch_live_9f3ka2" data-theme="dark" defer></script>Проверка установки
Откройте сайт в новой вкладке
Кнопка чата должна появиться в нижнем углу. Если её нет — обновите страницу с очисткой кэша (Cmd+Shift+R).
Напишите тестовое сообщение
Найдите его в инбоксе нужной группы и ответьте. Убедитесь, что ответ появился в виджете.
Нажмите «Проверить подключение»
На вкладке «Установка» Чатва проверит наличие своего виджета на указанном сайте. Сначала опубликуйте изменения сайта.