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

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

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

Поиск лучшего

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

Я изучил слабые и сильные места аналогов, и сделал свое бесплатное решение и потом всё разрослось.. Решение бесплатное и будет обновляться по мере предложений в общем чате. Нужна интеграция с CRM? Социальными сетями? Пишите, реализую в свободное время.
https://t.me/chateedze - проект и общение по сервису, предложения / улучшения.

Сильные и слабые стороны сервисов онлайн чатов

Начну с сильных сторон, которые лично мне пригодились для моего онлайн чата, я взял подписку (черно-зеленого сервиса) и стал анализировать продажи:

Сильные стороны

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

Звонки, видеозвонки, каналы: MAX, Telegram, VK, Viber, Email - для своих проектов. считаю лишним, хотя тут как говорится все зависит от ниши. И пока это не реализовывал.

Слабые стороны

невозможность кастомизации - доработки под свой проект (пользуйтесь тем что есть);
в бесплатной версии логотип сервиса чата - не солидно, нужно платить за тариф (не везде);
недоступность чата в России - например плагин Tawk.To Live Chat в тестах у меня не работал, видимо адреса блокируются, к тому же если взять российские онлайн сервисы, не факт что они не попадут под санкции (сегодня / завтра);
платный функционал = платный тариф - (хотя, как разработчик я не вижу трудности в реализации);
сталкивался с тем что в одном из сервисе, часто слетала авторизация и нужно входить повторно..

Начало

Я решил сделать онлайн чат Chateedze для сайта, который успешно будет работать на обычном хостинге. Своя админка, кастомные настройки и интересный функционал.

Системные требования

Любой домен (адрес сайта)
PHP 7.4+ (лучше 8.x)
MySQL 5.7+ или MariaDB 10.3+
Расширения: PDO, pdo_mysql, json
Права на запись в config/ и uploads/

Обычно на хостингах это по умолчанию всё есть.

Функционал онлайн чата

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

Посмотреть весь функционал чата

Диалоги

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

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

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

Рабочий чат

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

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

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

Профиль

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

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

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

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

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

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

Приглашения

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

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

По времени - клиент провёл на странице N секунд (например, 30).
По URL - только на указанных страницах (фрагмент пути или полный URL).
Exit-intent - курсор ушёл к закрытию вкладки (уход со страницы).
Повторный визит - человек уже был на сайте раньше.
Скролл % - прокрутил страницу до заданного процента.
Неактивность - долго не двигал мышью/не скроллил.

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

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

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

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

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

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

Операторы

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

Уведомления

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

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

Настройка браузерных уведомлений о новом чате

Пример браузерного уведомления - тестовый

Telegram и Ntfy

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

Создайте бота через @BotFather и скопируйте токен.
Создайте закрытый канал и добавьте бота администратором (по @username).
Напишите любое сообщение в канал и перешлите его боту @idbot.
Скопируйте ID чата (обычно начинается с -100) и вставьте выше.

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

Установите приложение ntfy на телефон (Android / iOS).
Придумайте длинный topic - это как пароль, например chat-x7k9m2-private.
В приложении нажмите «Subscribe» и введите тот же topic.
Вставьте topic выше, включите галочку и нажмите «Отправить тест».
Можно использовать свой сервер 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, Long polling)

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

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

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

Настройки

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

Цвета и логотип - под фирменный стиль сайта; превью справа обновляется сразу.
Позиция - правый/левый нижний угол; на мобильном можно отдельно.
Офлайн и рабочие часы - ночью виджет остаётся, но показывает «оставьте сообщение» или автоответ.
Звук и анимация - уведомление посетителю о новом сообщении оператора.
Баннер акции - полоска над чатом: «Скидка 10% до пятницы», «Бесплатная доставка».
Origins - список доменов, где разрешён виджет.