Как сделать чат на сайте самостоятельно: пошаговая инструкция для новичков

Человек заходит на сайт, задаёт вопрос — и не получает ответа в течение минуты. Скорее всего, он уйдёт к конкуренту. Письмо на почту он не отправит, а дозваниваться до колл-центра и ждать ответа не станет. Онлайн-чат закрывает именно этот разрыв: посетитель задаёт вопрос и сразу получает ответ.

Как сделать чат на сайте? Можно ли справиться самостоятельно? Нужно ли для этого учить PHP? Нет. Навыки программирования здесь не нужны. Весь процесс от регистрации в сервисе до работающего функционала занимает 10–15 минут и сводится к тому, чтобы оформить внешний вид виджета, скопировать код и вставить его, имея доступ к управлению CMS.

В этой статье разберём оба пути. Первый — вы подключаете готовый чат на сайт и настраиваете его под свои задачи. Второй — для тех, кто предпочитает самописный код. Рассмотрим, что вас ждёт, если решите всё делать своими руками, и почему в 9 случаях из 10 это экономически невыгодно. По итогам у вас будет чёткое понимание, как пошагово получить нужный результат с минимальными затратами.

Онлайн-чат, виджет, чат-бот, онлайн-консультант: как это называется и чем отличается

Стоит разобраться с терминами — они отличаются «на слух», и новичок легко путается. Вот короткий словарик.

Онлайн-чат — окно для переписки посетителя с оператором компании в реальном времени. Это и есть та самая функция, которая нужна владельцу сайта. Вместо живого оператора с обращениями также может работать AI-оператор.

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

Чат-бот — программа, которая отвечает посетителю по заранее заданному сценарию: кнопки, ветвящиеся вопросы, заготовленные ответы. Бот не думает, он исполняет скрипт.

ИИ-чат или ИИ-консультант — следующий уровень: нейросеть отвечает свободным текстом на основе базы знаний компании и умеет переводить диалог на оператора в нужный момент.

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

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

Смысл всех этих слов можно свести к одной фразе: онлайн чат для сайта — это способ мгновенно связываться с посетителем в момент, когда он готов задать вопрос.

А если ответить конкретнее на вопрос, как называется чат на сайте, то формально это онлайн-чат, технически — виджет, а с точки зрения маркетинга — инструмент, который превращает посетителя в клиента.

• Интернет-магазину нужен чат с операторами, офлайн-формой и интеграцией с CRM.
• Сайту услуг — чат с быстрыми ответами и активными приглашениями на страницах цен.
• Лендингу — компактный чат-бот, собирающий контакт и квалифицирующий заявку.

Два пути: написать чат самому или подключить готовый виджет

Половина материалов в интернете учит писать код своими руками на PHP и JavaScript, половина предлагает поставить готовый виджет. Сравним, что даёт веб чат на сайте, написанный с нуля, и что — готовое решение.

Критерий	Написать самому (HTML + JS + PHP)	Готовый виджет
Срок запуска	От 40–80 часов разработки до первой рабочей версии	10–15 минут
Что нужно уметь	HTML, CSS, JavaScript, серверный язык, работа с базой данных, WebSocket	Скопировать код и вставить на соответствующую страницу в админке
Стоимость	Работа разработчика + хостинг + поддержка	Подписка, у большинства сервисов есть бесплатный тариф
Оператор отвечает с телефона	Нужно разрабатывать отдельно	Из коробки
Уведомления оператору	Нужно разрабатывать	Push, e-mail, мессенджер
История переписки и поиск	Нужно разрабатывать	Из коробки
Защита от спама и ботов	Нужно разрабатывать	Из коробки
Интеграция с CRM	Нужно разрабатывать	Настройка в интерфейсе
Мобильная версия	Отдельная задача	Из коробки
Соответствие 152‑ФЗ	Вся ответственность на вас	Провайдер даёт форму согласия и хранение данных
Поддержка и обновления	Ваша	Провайдера
Когда подходит	Уникальная логика, требование хранить переписку только на своём сервере	Все остальные случаи

Вывод: если ваша задача — принимать сообщения с веб-страницы и отвечать клиентам, самописный код экономически невыгоден. Разработка даже минимальной версии обойдётся в десятки часов и десятки тысяч рублей, а по функциям проиграет готовому решению, которое устанавливается за четверть часа. Для этой задачи готовый виджет — и есть лучший чат на сайт по соотношению цены, сроков и функций. Точные цены смотрите на странице тарифов. Поэтому дальше в статье идём по пути готового виджета, а для тех, кому нужен свой, — отдельный разбор ниже.

Что должен уметь чат для сайта: чек-лист перед выбором

Этот же список помогает подобрать решение под конкретный проект — интернет-магазин, сайт услуг или лендинг — и не платить за функции, которые не пригодятся.

1. Работает на вашей CMS и не ломает вёрстку. Проверьте, есть ли готовая интеграция или хотя бы корректная работа виджета на вашей платформе.
2. Не тормозит загрузку веб-страницы: скрипт должен загружаться асинхронно и не влиять на Core Web Vitals.
3. Корректно отображается на смартфонах — более половины трафика сейчас идёт с телефонов, поэтому мобильный чат на сайте обязан работать безупречно.
4. Уведомления приходят оператору туда, где он реально их увидит: в приложение, мессенджер или на рабочий стол, а не на нечитаемую почту.
5. Есть офлайн-форма: когда операторы недоступны, виджет работает в режиме обратной связи и собирает контактные данные посетителя.
6. Шаблоны быстрых ответов — заготовленные ответы на частые вопросы экономят оператору минуты на каждом диалоге.
7. История переписки и передача диалога между операторами, чтобы клиенту не приходилось пересказывать вопрос заново.
8. Видно, откуда пришёл посетитель и какие страницы смотрел, — это контекст для продажи.
9. Интеграция с CRM и передача UTM-меток, чтобы обращения превращались в карточки лидов, а не оставались в переписке.
10. Приглашение для вовлечения в диалог при первичном посещении клиента.
11. Сообщения из мессенджеров в том же окне — если вы работаете с клиентами в мессенджерах.
12. Хранение персональных данных в соответствии с 152‑ФЗ, желательно на серверах в РФ.

Как сделать чат на сайте самостоятельно: пошаговая инструкция на примере ChatApp

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

Шаг 1. Зарегистрироваться в сервисе и приобрести канал «Онлайн-чат»

Зайдите на ChatApp и зарегистрируйтесь — достаточно рабочей почты или номера телефона.

Нужно приобрести канал «Онлайн-чат». Для знакомства с функционалом можно воспользоваться демо-доступом, который даётся на 3 дня.

Далее необходимо привязать Онлайн-чат.

Затем переходим непосредственно к настройке.

Шаг 2. Добавить чат для сайта

Нажимаем кнопку «Добавить чат для сайта». После этого вам будет доступна настройка внешнего вида.

Шаг 3. Настроить внешний вид

Во вкладке «Настройки» есть возможность выбрать цвет фона и сообщений клиента, размер кнопки, расположение, логотип, приветственный заголовок, подзаголовок, язык интерфейса. Также можно активировать передачу UTM-меток. Кнопка чата на сайте должна заметно выделяться, но не спорить с основной кнопкой страницы. Правило простое: цвет кнопки не должен совпадать с цветом кнопки «Купить» или «Заказать», иначе посетитель будет кликать не туда.

Шаг 4. Написать приветствие и настроить активные приглашения

Напишите приветствие от первого лица, коротко и по делу. Активные приглашения — это сообщения, которые показываются клиенту автоматически, без клика.

Шаг 5. Настроить офлайн-форму сбора контактов

Данная форма не является обязательной и устанавливается при необходимости.

Включите офлайн-форму, чтобы собирать данные клиента — имя, телефон. Форма чата на сайте обязана содержать чекбокс согласия на обработку персональных данных и ссылку на политику обработки — это требование 152‑ФЗ; без него сбор контактов незаконен.

Шаг 6. Создать виджет, получить код чата и вставить его на сайт

Во вкладке «Установка» нужно нажать «Сохранить». Сервис сгенерирует персональный код чата на сайт — небольшой JavaScript-фрагмент. Его можно передать разработчику сайта или установить самостоятельно, имея соответствующий доступ. Ничего в коде менять не нужно — он уже содержит идентификатор вашего виджета. Просто скопируйте его целиком.

Чтобы добавить чат на сайт, зайдите в админку CMS и вставьте код скрипта. Здесь есть важный нюанс: код можно поставить в тег <head> или перед закрывающим тегом </body>. Почти всегда правильный второй вариант — так скрипт не блокирует загрузку страницы. Отдельные инструкции для каждой платформы — в следующем разделе.

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

Шаг 7. Связать чат с CRM

Настройте интеграцию с вашей CRM: каждое обращение будет автоматически создавать лид или сделку с текстом диалога, контактами и источником трафика. Проверьте, передаются ли UTM-метки, — без них вы не узнаете, какой канал приносит обращения. Например, вы можете настроить интеграцию с amoCRM или Битрикс24.

Шаг 8. Подключить операторов и настроить уведомления

Добавьте сотрудников в проект и назначьте роли. Сообщения в чате на сайте с оператором будут приходить в виде push-уведомлений.

Шаг 9. Проверить чат

Перед запуском пройдите чек-лист из восьми проверок:

1. Откройте сайт с компьютера — виджет отображается и открывается.
2. Зайдите на страницу со смартфона — кнопка не перекрывает важные элементы.
3. Отправьте сообщение в режиме инкогнито — оно дошло до оператора.
4. Проверьте уведомление на телефоне оператора.
5. Отправьте сообщение ночью или при закрытом браузере оператора — должна сработать офлайн-форма.
6. Проверьте, что создан лид в CRM.
7. Проверьте, что загрузка страницы не замедляется.
8. Проверьте страницы, где чата быть не должно, — его там нет.

Как установить чат на разные CMS и конструкторы

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

WordPress

Есть два рабочих способа. Первый — установить плагин вставки кода (например, WPCode), вставить скрипт в поле для футера и сохранить. Второй — в файловом редакторе открыть footer.php дочерней темы и вставить код перед </body>.

Важно: редактируйте именно дочернюю тему, иначе обновление темы затрёт ваш код. Если в админке нет редактора файлов, сделайте это через FTP или файловый менеджер хостинга.

Tilda

В Тильде чат на сайте подключается через настройки публикации. Откройте Настройки → раздел «Ещё» → поле «HTML-код для вставки внутрь <body>» и вставьте скрипт. После сохранения обязательно повторно опубликуйте все веб-страницы — без повторной публикации изменения не применятся.

1С-Битрикс

При использовании «1С-Битрикс», код виджета можно добавить в шаблон перед закрывающим тегом </body>. Для этого в административной панели откройте Настройки → Настройки продукта → Сайты → Шаблоны, выберите используемый шаблон и вставьте код в нужное место.

Отдельно стоит сказать про поисковый запрос «чат на сайт Битрикс24»: он может означать и сторонний виджет, и встроенные открытые линии Битрикс24. Разница в том, что функционал от ChatApp — это сторонний виджет, который подключается к CMS отдельно и имеет гибкую настройку, включая интеграцию с CRM и использование единого окна для разных каналов коммуникации. А открытые линии — встроенный инструмент Битрикс24, который хорош, если вся работа с клиентами уже ведётся в Битрикс24.

OpenCart, Webflow, Wix, uKit

В OpenCart код вставляется через админку: Дизайн → Редактор темы, файл footer.tpl или через модификатор. В Webflow — в настройках, поле Custom Code перед </body>. В Wix — через раздел «Пользовательский код» в настройках, выбрав «Все страницы». В uKit — Настройки → Код перед </body>. Везде логика одинаковая: найдите поле для кода перед закрывающим тегом body.

Сайт на чистом HTML

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

Через Google Tag Manager

Если доступа к коду CMS нет, можно подключить через Google Tag Manager (GTM). Для этого сам контейнер GTM уже должен быть установлен на сайте.

В GTM создайте тег Custom HTML («Пользовательский HTML»), вставьте в него скрипт и назначьте триггер All Pages («Все страницы»). Затем проверьте работу тега в режиме предварительного просмотра и опубликуйте контейнер. Google Tag Manager поддерживает размещение стороннего HTML и JavaScript-кода через Custom HTML.

Такой способ позволяет выполнить установку без непосредственного редактирования файлов. Однако нужны права в Google Tag Manager, достаточные для создания и публикации тегов. Если контейнер GTM ещё не установлен, его код сначала должен добавить человек с доступом к CMS.

Если чат не появился: 6 типовых причин

• Код вставлен не туда — проверьте, что скрипт стоит перед </body>, а не в произвольном месте страницы.
• Страница не опубликована повторно — особенно актуально для Tilda и веб-конструкторов.
• Кеш веб-страниц не очищен — очистите кеш плагином или подождите, пока обновится кеш CDN.
• Блокировщик рекламы в браузере скрывает виджет — проверьте в другом браузере или в режиме инкогнито.
• Конфликт скриптов — временно отключите другие виджеты и проверьте консоль браузера на ошибки.
• Домен не добавлен в настройках виджета — сервис блокирует загрузку на чужих доменах.

Нужен ли чат-бот и ИИ в чате

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

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

Что бот снимает с операторов: типовые вопросы («какие часы работы», «где мой заказ»), сбор контакта до начала диалога, квалификацию заявки и ответы ночью, когда «живых» операторов нет.

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

Разумная схема для большинства сайтов: AI-оператор для первой линии отвечает на типовые вопросы и собирает контакты, а нестандартные запросы сразу перенаправляет живому оператору.

О том, как обучить ИИ на своей базе знаний, — в отдельной статье на нашем блоге.

Если всё-таки хочется написать чат самому: что вас ждёт

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

Минимальный технический стек: фронтенд на HTML, CSS и JavaScript для окна диалога; бэкенд на серверном языке — например, PHP, Python или Node.js; база данных для истории переписки; WebSocket или long polling, чтобы сообщения доставлялись в реальном времени без перезагрузки страницы.

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

Ещё один скрытый расход самописного варианта — сопровождение. Каждое обновление браузера, каждая смена версии PHP на хостинге и каждая найденная уязвимость превращаются в задачи на вашей стороне. У готового сервиса эти работы входят в подписку и выполняются без вашего участия.

Отдельная глава — право. Переписка с клиентами содержит персональные данные: их нужно хранить на серверах в РФ, получать согласие через форму и вести политику обработки. Ответственность целиком ложится на вас.

По времени: минимально рабочая версия (MVP) — ориентировочно 40–80 часов; версия, которую не стыдно показать клиентам, — 120 часов и больше. По средней ставке разработчика это сотни тысяч рублей против пары тысяч в месяц за готовый сервис.

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

Настройки, которые превращают чат в источник заявок

Установка — это только полдела. Результат полностью зависит от правильной настройки чата на сайте.

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

• Скорость первого ответа. 60 секунд — психологическая граница: дольше — и посетитель может потерять интерес и уйти. Ставьте цель отвечать за минуту, а лучше — за 30 секунд.
• Приглашение к диалогу. Это побуждает клиента задать вопрос по товару или услуге.
• Персонализация приветствия под раздел сайта: на странице доставки клиент должен получать соответствующую информацию, вместо абстрактного приветствия.
• Шаблоны быстрых ответов на 10 самых частых вопросов — подготовьте их заранее.
• Сбор контакта до конца диалога: клиент должен получать форму для заполнения контактных данных.
• Цели в Яндекс Метрике: требуются для анализа конверсии.
• Еженедельный взгляд в отчёты: сколько диалогов, сколько из них доведено до контакта, какие страницы приносят обращения.

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

Частые ошибки новичков

• Поставили чат, и никто не отвечает. Посетитель, написавший в пустоту, уходит навсегда.
• Всплывающее приглашение через 2 секунды после захода. Посетитель ещё не понял, где он, а его уже перехватили. Минимум — 20–30 секунд на странице.
• Чат перекрывает кнопку «Купить» на мобильных. Проверьте смартфон после установки и сдвиньте кнопку при необходимости.
• Чат не интегрирован с CRM — заявки теряются.
• В форме сбора контакта нет согласия на обработку персональных данных.
• Виджет загружается синхронно и замедляет сайт — проверьте настройки асинхронной загрузки.

Как убрать или временно отключить чат

Иногда нужно удалить чат на сайте или скрыть его на время. Есть три варианта.

• Временно скрыть виджет — переключателем в настройках сервиса. Чат исчезает со всех страниц, код и настройки сохраняются.
• Отключить на отдельных страницах — по URL в настройках отображения виджета.
• Полностью удалить: уберите код из шаблона, плагина или Google Tag Manager, очистите кеш и удалите виджет в кабинете сервиса.

FAQ

Можно ли сделать чат на сайте бесплатно?

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

Нужен ли программист, чтобы установить чат?

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

Чат замедляет загрузку веб-страниц?

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

Как сделать чат на Tilda?

Настройки → Ещё → HTML-код для вставки внутрь <body> — вставьте скрипт и повторно опубликуйте все страницы. Подробности — в разделе про CMS выше.

Чем онлайн-чат отличается от чат-бота?

Чат — окно для переписки с живым оператором. Бот — автоматические ответы по сценарию. Оптимально, когда они работают вместе: бот закрывает типовые вопросы, оператор — сложные.

Что делать, если операторы не успевают отвечать?

Добавьте офлайн-форму сбора контактов и уведомления. Если поток большой — используйте AI-агента.

Нужно ли согласие на обработку персональных данных в чате?

Да, если клиенту предлагается указать имя, телефон или почту. Форма обязана содержать чекбокс согласия и ссылку на политику обработки персональных данных — требование 152‑ФЗ.

Можно ли отвечать клиентам из чата в телефоне?

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

Итог

Чтобы чат заработал и приносил заявки, пройдите чек-лист:

• Выбрали готовый виджет вместо самописной разработки.
• Зарегистрировались в сервисе и приобрели канал «Онлайн-чат».
• Настроили внешний вид виджета, приветствие и активные приглашения.
• Получили код и вставили его перед </body>.
• Подключили операторов и уведомления на телефон.
• Включили офлайн-форму с согласием на обработку персональных данных.
• Настроили интеграцию с CRM и установили цели в Метрике.
• Проверили чат с компьютера и телефона, в режиме инкогнито и ночью.

Чтобы получить онлайн-чат на сайт с AI-агентом, мультиканальностью и интеграциями с CRM без долгой настройки — попробуйте ChatApp.

На установку уйдёт 15 минут, а первые обращения начнут приходить уже в день подключения. Вести диалог в чате с клиентом на сайте — это хороший инструмент для повышения конверсии. Главное — чтобы ответы были без задержек, и посетитель не оставался один на один со своим вопросом.

Начать использовать