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

Диалоги

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

Удалить чат может только администратор.

Заметка уведомит в тг, если настроено уведомление в канал.

Рабочий чат

Вы можете общаться с сотрудниками в рабочем чате

Посетители онлайн

Вы можете посмотреть в реальном времени где находятся Ваши пользователи и начать диалог с ними, например полезно если пользователь находится на странице оформления заказа:

Профиль

Здесь оператора или администратор, настраивает свой профиль (график, браузерное уведомление, смена пароля)

Кнопки старта

Приготовьте стартовый кнопки (частые вопросы, на которые у Вас есть ответы), можете тестировать A / B тесты (в блоке «Отчёт» будет статистика) — разный текст, по разному может восприниматься аудиторий.

 Быстрый контакт

Вы можете сделать кастомные страницы на сайте, для вызова виджета (чата), клиент по клику напишет в чат заготовленное сообщение — это поможет понять чем он интересуется и оперативно подготовить ответ:

Пример реализации:

Приглашения

На мой взгляд самое полезный функционал, отправляйте сообщения клиенту, как бы вовлекая его в чат, проводите A / B тесты, оставляйте лучшие варианты взаимодействия. Я могу точно сказать, что шанс продажи с уведомлением — больше, хотя кого то это может и раздражать (например сам я такое не люблю).

Триггеры — когда показать приглашение:

• По времени — клиент провёл на странице N секунд (например, 30).

• По URL — только на указанных страницах (фрагмент пути или полный URL).

• Exit-intent — курсор ушёл к закрытию вкладки (уход со страницы).

• Повторный визит — человек уже был на сайте раньше.

• Скролл % — прокрутил страницу до заданного процента.

• Неактивность — долго не двигал мышью/не скроллил.

Код установки

Страница показывает как легко и просто установить виджет чата на Ваш сайт, делается это простым скриптом:

Вот пример установки виджета в Блог на WordPress через виджеты:

Быстрые ответы

Шаблонные ответы по вашим командам, например: !contact /price !shop и так далее:

Пример кнопок при общении с клиентом:

Операторы

На этой странице администратор может добавить в систему новых администраторов и операторов. А так же настроить им уведомления в Telegram (личный канал по ID) и Ntfy (об этом подробнее ниже)

Уведомления

На этой странице вы можете настроить разные типы уведомлений о новом сообщении:

Браузерное уведомление

Telegram и Ntfy

Как подключить оповещения в закрытый канал Telegram

1. Создайте бота через @BotFather и скопируйте токен.

2. Создайте закрытый канал и добавьте бота администратором (по @username).

3. Напишите любое сообщение в канал и перешлите его боту @idbot.

4. Скопируйте ID чата (обычно начинается с -100) и вставьте выше.

Как подключить оповещения в закрытый канал Ntfy

1. Установите приложение ntfy на телефон (Android / iOS).

2. Придумайте длинный topic — это как пароль, например chat-x7k9m2-private.

3. В приложении нажмите «Subscribe» и введите тот же topic.

4. Вставьте topic выше, включите галочку и нажмите «Отправить тест».

5. Можно использовать свой сервер ntfy вместо ntfy.sh.

Важный момент

По закону ⁠152-ФЗ «О персональных данных», любые персональные данные граждан России при их сборе должны обязательно записываться, накапливаться и храниться на серверах, которые физически находятся на территории РФ. Первичная база данных должна быть в России.

Если Вы используете topic (название комнаты) легкий, то другой так же может прослушивать и смотреть что там, учтите это. Максимальная длина названия комнаты 64 символа, буквы, цифры.

Использую Ntfy, так как он корректно работает с блокировками, его сервер не блокируют (хотя бы пока что).

Что считать первичной базой? Если админка в чате, то сервер должен быть в РФ, а дублирование в Telegram и Ntfy — второстепенное. Но вы можете бесплатно развернуть Ntfy у себя на сервере и использовать личный сервер который будет рассылать пуши.

Вообще связка Telegram и Ntfy удобна, я её использую для мониторинга клиентских прокси-серверов (VPS) и мониторинг их сайтов на наличие 500 ошибок.

Как выглядят уведомления в Telegram и Ntfy

Функции чата

В этом разделе можете настроить включить нужные настройки:

Поведение виджета и логика обработки диалогов — не внешний вид, а «как работает».

Каждый блок ниже — отдельная функция. Включайте только то, что нужно вашему бизнесу.

• Форма перед чатом — имя и телефон до первого сообщения; галочка 152-ФЗ обязательна для юрлиц.

• Обратный звонок — кнопка «Перезвоните мне»; номер попадает в диалог и уведомления.

• Автоназначение — новый диалог сразу получает свободный оператор (round-robin по нагрузке).

• Галочки прочтения — ✓ доставлено, ✓✓ прочитано (как в мессенджерах).

• Просрочка ответа — если оператор молчит N секунд, клиенту уходит автоответ с Telegram или вашим текстом.

• Сценарий по умолчанию — автозапуск воронки из раздела «Сценарии» при каждом новом обращении.

152-ФЗ и SLA

152-ФЗ — персональные данные

Федеральный закон № 152-ФЗ регулирует сбор и хранение персональных данных (ФИО, телефон, email, IP, переписка). В чате это включается блоком «Согласие» ниже.

• Включить GDPR/152-ФЗ — перед отправкой формы или сообщения клиент ставит галочку согласия.

• Текст согласия — что именно подтверждает пользователь (ссылка на политику обязательна).

• Политика — публикуется на /privacy.php; можно вставить свой текст или пример.

• Версия политики — при смене текста увеличьте версию: старые согласия не будут считаться актуальными.

• Срок хранения — через N дней можно автоматически удалять данные неактивных посетителей (кнопка «Очистить просроченные»).

• Журнал — фиксирует факт согласия, отзыва или удаления данных.

Без включения 152-ФЗ формы всё равно работают, но для коммерческих сайтов в РФ согласие рекомендуется.

SLA — контроль скорости первого ответа

SLA (Service Level Agreement) — норматив времени, за которое оператор должен впервые ответить клиенту после его сообщения.

• Включить SLA — для каждого нового диалога ставится дедлайн (например, 120 секунд).

• Таймер — в списке диалогов и в шапке чата оператор видит, сколько времени осталось.

• Просрочка — диалог подсвечивается красным; уходит уведомление в Telegram/ntfy «SLA просрочен».

• Эскалация — повторное оповещение администратору (один раз на диалог).

• Отчёты — число просрочек видно в разделе «Отчёты».

Фоновая проверка SLA работает при heartbeat виджета на сайте. Если посетителей нет — добавьте cron-URL (ниже в форме) раз в минуту.

Соединение c сервером

Выберите нужный режим обновления чата:

Polling — опрос сервера каждые N секунд. Рекомендуется для shared-хостинга (задержка ~2-5 сек).

Long polling — запрос ждёт на сервере до нового сообщения. Быстрее (< 1 сек), но нагружает PHP — только для VPS.

IP за прокси — если сайт за Cloudflare или nginx, включите чтение X-Real-IP / X-Forwarded-For, чтобы в диалогах был реальный IP посетителя.

Настройки

Это главный настройки виджета онлайн-чата

• Цвета и логотип — под фирменный стиль сайта; превью справа обновляется сразу.

• Позиция — правый/левый нижний угол; на мобильном можно отдельно.

• Офлайн и рабочие часы — ночью виджет остаётся, но показывает «оставьте сообщение» или автоответ.

• Звук и анимация — уведомление посетителю о новом сообщении оператора.

• Баннер акции — полоска над чатом: «Скидка 10% до пятницы», «Бесплатная доставка».

• Origins — список доменов, где разрешён виджет.

GeoLite2 — база обновляется самостоятельно, каждые 3 часа при активности админки. Нужна для отображения страны клиента:

Мобильные скриншоты

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

Скачать архив чата с тг или с Github

Разархивировать архив в нужную папку на сайте, я например создал папку chat и скинул разархивировал всё содержимое

Удаляем архив и переходим по URL (домен.ру/chat), перекинет на страницу установки:

Необходимо создать новую базу данных, в Имя БД ввести её название, пользователь (обычно тоже Имя БД), пароль от БД.

На примере Beget создание БД Mysql

Вводим данные

После этого Вас должно перекинуть на страницу авторизации

авторизуйтесь — должна открыться вот такая страница:

Всё, настраивайте и пробуйте.