Виджет живого чата
В этой инструкции описано, как подключить виджет живого чата от TG Support Bot к вашему сайту.
Требование: Docker Compose
Виджет живого чата доступен только при использовании Docker Compose, так как требует работы Node.js, развёрнутого в отдельном контейнере.
Как работает живой чат
- На сайте отображается виджет живого чата.
- При отправке первого сообщения для пользователя генерируется уникальный ключ, который сохраняется в сессии.
- Сообщения из виджета поступают в Telegram, где под каждого пользователя создаётся отдельная чат-тема.
- Менеджеры отвечают в этой теме — ответ мгновенно появляется в виджете на сайте.
История сообщений хранится в течение времени жизни сессии на стороне клиента.
Все исходники хранятся в вашей копии кода бота, и при желании вы можете изменить логику генерации уникального ключа.
Для обмена сообщениями используется Node.js в отдельном контейнере и Socket.io для работы с WebSocket.
Демо
Протестировать виджет живого чата можно на странице tg-support-bot.ru/preview/chat.
1. Подключение к контейнеру
Все команды ниже выполняются внутри главного контейнера приложения. Перейдите в директорию проекта и запустите:
docker compose exec app bash2. Создание API-ключа
Для работы виджета необходимо сгенерировать API-ключ:
php artisan app:generate-token live_chat https://node.{domain}/push-messageПосле выполнения команды в консоли отобразится API-ключ, а в базе данных появится источник live_chat.
3. Настройка параметров в .env
Добавьте или обновите следующие переменные в файле .env:
API_TOKEN=ваш_api_ключ_для_живого_чата
ALLOWED_ORIGINS="https://example.com,https://admin.example.com"
VITE_APP_NAME="${APP_NAME}"| Переменная | Описание |
|---|---|
API_TOKEN | API-ключ, сгенерированный для живого чата |
ALLOWED_ORIGINS | Домены, на которых размещён виджет (несколько через запятую) |
VITE_APP_NAME | Имя приложения, передаётся в сборку Vite; обычно ссылается на $APP_NAME |
4. Сборка виджета
Перед использованием виджета необходимо установить зависимости и собрать бандл.
При первом запуске и для обновления зависимостей:
npm installПри первом запуске и после каждого изменения .env пересоберите бандл:
npm run buildПри успешной сборке в директории public/live_chat/dist появится файл widget.js.
5. Добавление виджета на сайт
Для подключения виджета добавьте на страницу один файл стилей и два скрипта.
Подключите стили внутри тега <head>:
<link rel="stylesheet" href="https://{домен бота}/live_chat/css/style.css">Подключите скрипты в конце страницы, перед закрывающим тегом </body>:
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script src="https://{домен бота}/live_chat/dist/widget.js?token={токен от API}" defer></script>После подключения виджет живого чата появится на странице.
Чек-лист подключения
- [ ] API-ключ сгенерирован (
app:generate-token) - [ ]
API_TOKENзадан в.env - [ ]
ALLOWED_ORIGINSсодержит домен сайта - [ ]
VITE_APP_NAMEзадан в.env - [ ] Зависимости установлены (
npm install) - [ ] Бандл собран (
npm run build) - [ ] Файл
public/live_chat/dist/widget.jsсуществует - [ ] Стили и скрипты подключены на странице сайта
- [ ] Виджет отображается на странице