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

Пример диалога с клиентом

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

Дополнительные опции чат диалога

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

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

Внутренний рабочий чат с сотрудниками

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

Пример посетителей онлайн

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

Профиль администратора / оператора

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

Стартовые кнопки для начала диалога

Пример клика по кнопке "Узнать цену"

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

Быстрый контакт в онлайн-чате

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

Пример реализации функции - быстрый контакт

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

Активный приглашения в онлайн-чат

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

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

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

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

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

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

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

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

Код установки онлайн чата через код

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

Пример установки чата в Wordpress

Прописываем код чата

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

Функционал страницы - быстрые ответы

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

Быстрые ответы в диалогах

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

Страница "Операторы"

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

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

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

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

Telegram и 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

Пример уведомление в телеграм

Пуш уведомления через Ntfy

Пример подписки, на уведомления Ntfy

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

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

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

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

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

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

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

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

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

Согласие, политика

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

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

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

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

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

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

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

Пример реализации - форма контакты

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

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

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

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

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

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

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

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

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

Варианты работы обновления онлайй чата (Polling, Long polling)

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

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

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

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

Основные настройки онлайн чата Chateedze

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

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

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

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

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

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

Настройки - рабочее время, экспорт / импорт

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

Обновление базы GeoLite2

Клиент печатает сообщение в онлайн чат для сайта (смотрим через админ панель)

Меню админки в мобильной версии

Пример диалогов в мобильной версии

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

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

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

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

Проверка совместимости с Вашим сервером

Настройка, подключение базы данных MySQL

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

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

Пример создания БД на хостинге Beget

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

Ввод данных БД

Финальные настройки, завершение установки

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

Пример страницы авторизации

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

Видите такую страницу? Поздравляю, всё успешно.

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