Команда DiveChat

13 марта 2026Время чтения: 5 минут

Как установить онлайн-чат на сайт за 5 минут — инструкция для WordPress, Tilda, Битрикс, Shopify

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

Хорошая новость: базовая установка действительно занимает считаные минуты. На практике весь путь выглядит так:

зарегистрироваться или войти в DiveChat;
создать проект;
выбрать тариф;
при необходимости пригласить сотрудников и назначить роли;
получить код виджета;
вставить его на сайт.

В этой статье покажем, как добавить онлайн-чат на сайт на примере DiveChat.

В конце вы получите чек-лист проверки после установки, чтобы убедиться, что чат отображается корректно и готов принимать обращения.

Попробуйте установить DiveChat — это займёт 5 минут.

Зачем вообще ставить онлайн-чат на сайт

Онлайн-чат нужен не просто «для красоты». Это инструмент, который помогает:

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

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

Что нужно перед установкой

Перед тем как добавить чат на сайт, подготовьте три вещи:

Доступ в аккаунт DiveChat — чтобы создать проект и получить код установки. Если аккаунта ещё нет, зарегистрируйтесь в DiveChat.
Доступ к CMS или коду сайта — WordPress, Tilda, Битрикс, Shopify или файловая структура проекта.
Домен сайта — чтобы проверить, на каком сайте должен отображаться виджет.

Если сайт уже опубликован, этого достаточно, чтобы начать.

Универсальный принцип установки онлайн-чата

Независимо от CMS, логика почти всегда одинакова:

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

То есть основная разница между WordPress, Tilda, Битрикс и Shopify — только в месте, куда вставляется код.

Как установить чат DiveChat на сайт: реальный сценарий от регистрации до кода виджета

Ниже — путь, который пользователь проходит в интерфейсе DiveChat при первом запуске.

Этап 1. Зарегистрируйтесь или войдите в аккаунт

Если аккаунта ещё нет, сначала создайте его через DiveID. После регистрации нужно подтвердить e-mail и придумать пароль для входа.

Этап 2. Создание первого проекта

При первом запуске DiveChat открывает пошаговый мастер настройки. Он состоит из 4 шагов:

Название проекта
Выберите тариф
Пригласите сотрудников
Назначьте роли

Ниже разберём каждый шаг.

Если вы уже создавали проекты раньше или ранее пропускали часть стартового сценария, страница "Быстрого старта" может не показываться. В этом случае проект можно создать со страницы профиля по кнопке создания проекта.

Шаг 1. Наименование проекта

На первом шаге создания проекта нужно указать название проекта. Это проект, внутри которого дальше будет настраиваться чат, сотрудники и установка на сайт.

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

Примеры:

DiveChat.ru
Интернет-магазин мебели
Лендинг услуг
Сайт агентства

Что важно

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

Шаг 2. Выберите тариф

На следующем шаге DiveChat предлагает выбрать тариф.

Бесплатный
Профессиональный

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

Шаг 3. Пригласите сотрудников

На третьем шаге можно добавить сотрудников в проект. Это удобно, если в чате будут работать несколько человек: менеджеры, операторы, поддержка, отдел продаж.

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

Когда это полезно сразу

Добавляйте сотрудников на старте, если:

чат будет обрабатывать несколько операторов;
нужно распределить доступы между командой;
важно сразу настроить рабочий процесс внутри проекта.

Шаг 4. Назначьте роли

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

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

Этап 4. Завершите создание проекта

После прохождения всех шагов DiveChat показывает экран с успешным созданием проекта. Это означает, что проект создан и можно переходить к дальнейшей настройке внутри интерфейса.

Если вы нажмёте “Перейти в DiveChat”, откроется финальный этап быстрого старта внутри кабинета DiveChat.

Этап 5. Создайте первый канал связи

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

Среди этих действий есть шаг, связанный с созданием первого канала связи.

Для этого нажмите на кнопку "Создать" и заполните название канала. Поставьте галочку под "Назначить всех операторов на этот сайт".

Этап 6. Скопируйте код виджета

После создания вашего первого канала связи DiveChat показывает код для вставки на сайт.

Ваше действие здесь простое:

нажмите кнопку копирования;
вставьте код в сайт в нужное место в зависимости от CMS.

Важно:

код лучше вставлять без изменений;
если вы копируете скрипт вручную, убедитесь, что не потеряли ни один символ;
в большинстве случаев код вставляется на каждую страницу вашего сайта перед закрывающим тегом </head>.

Где лучше размещать чат на сайте

После установки важно убедиться, что чат не просто есть, а не мешает пользователю.

Обычно лучший вариант — стандартное положение в правом нижнем углу. Оно привычно для посетителей и не конфликтует с основной навигацией.

Проверьте, чтобы чат:

не перекрывал cookie-баннер;
не закрывал кнопку обратного звонка;
не мешал мобильному меню;
корректно открывался на длинных страницах;
не перекрывал фиксированные CTA-элементы.

Чек-лист: как проверить, что чат установлен правильно

После установки пройдитесь по этому списку.

1. Виджет отображается на нужных страницах

Проверьте:

главную страницу;
страницы услуг или каталога;
карточки товаров, если это интернет-магазин;
мобильную версию сайта.

2. Чат открывается без ошибок

Нажмите на иконку и убедитесь, что окно открывается корректно:

без визуальных сбоев;
без смещения вёрстки;
без обрезанного контента.

3. Сообщение отправляется

Отправьте тестовое сообщение с сайта и проверьте, доходит ли оно в интерфейс операторов.

4. Нет конфликта с кэшем и скриптами

Откройте сайт:

в обычном окне браузера;
в режиме инкогнито;
на мобильном устройстве.

Если в одном месте чат есть, а в другом нет, проблема может быть в кэше.

5. Виджет не перекрывает важные элементы

Особенно важно проверить мобильную версию. На небольших экранах чат иногда конфликтует с:

кнопкой «Позвонить»;
плавающими меню;
формами внизу экрана;
кнопками корзины в интернет-магазине.

Частые проблемы после установки и как их решить

Страница быстрого старта не появилась

Это не обязательно ошибка. Такое возможно, если:

пользователь уже раньше создавал проект;
часть стартового сценария уже была пройдена;
вход выполнен в существующий аккаунт.

Что делать: создайте проект со страницы профиля и дальше перейдите к установке виджета внутри проекта.

Чат не отображается на сайте