Telegram Site Helper 2.0 — чат помощник для сайта на основе Telegram

6be002fe52cc40d2a967683311fabfff.png

Здравствуйте. Меня зовут Андрей.
Летом прошлого года я опубликовал проект и статью «Чат-помощник на сайт с помощью Telegram за 15 минут». Идея проекта заключалась в том, чтобы реализовать на сайте всплывающий Чат-помощник, бэкэндом для которого (для чата) был бы набирающий популярность мессенджер Telegram.

На удивление проект довольно быстро стал набирать звезды на GitHub, а я — получать письма благодарности и просьбы о помощи в настройке от людей со всего света. Люди не могли запустить скрипт на своих хостингах: то set_time_limit (0) не поддерживается, то 503 ошибка, то пути не правильно указаны.
Вторая версия скрипта устанавливается намного проще и работает на основе WebHooks.
>>>> Ссылка на репозиторий GitHub.

В двух словах, что это такое


image
Для тех, кто не видел прошлую статью, повторюсь. Telegram Site Helper — это набор скриптов (PHP, JS), которые реализуют чат-помощник для Вашего сайта (для того, чтобы Ваши посетители/клиенты могли оперативно задать вопрос в чат Вашему менеджеру). Менеджер получит сообщение в мессендежере Telegram. И там же может ответить. Система подходит для сайтов, где не очень большой поток клиентов. По прежнему есть маленькое неудобство: все сообщения от всех посетителей приходят менеджеру в единый чат. Чтобы направить ответ посетителю, менеджер сперва должен выбрать «подчат», отправив команду /chat_1234, примерно вот так:

62a307f14a18430ab165c4b065067e8a.png

Что нового


Теперь чат работает на основе WebHooks


Сервер Telegram сам будет присылать новые сообщения на Ваш сервер.
Вечно работающий в фоне скрипт-сервер для Long Poll запросов к серверу Telegram больше не нужен. Но зато теперь нужен HTTPS (это политика Telergam). Сертификат можно купить, сделать бесплатный на StartSSL или изготовить самоподписанный.

Для тех, кто не хочет искать, команды для терминала:

Как создать csr-файл для StartSSL

sudo openssl req -nodes -newkey rsa:2048 -keyout apache.key -out apache.csr


Как сделать самоподписанный сертификат

sudo openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout apache.key -out apache.crt

Для установки используется всего один файл.


10360c20d6ed4308803bda6e5105bfc2.png
В репозитории лежит всего один файл: telegram-site-helper-install.php — это инсталлятор. Он создаст нужные директории, распакует JS, CSS и два PHP файла.
Здесь же вы сможете сгенерировать JS код чата, который нужно будет вставить на странцу сайта.

Внимание: cкрипты в инсталляторе закодированны в base64
Поскольку для многих владельцев сайтов на Wordpress/Joomla, base64 ассоциируется с вирусными инъекциям — заранее приглашаю всех параноиков опасающихся изучить содержимое скриптов, закодированных в base64 (например с помощью этой утилиты).

Всплывающий и встроенный чаты, стилизация


Чат можно стилизовать не залезая в CSS. Цвет рамки, фона, шрифт можно настроить прямо из инсталлятора.
99d951ede88540f78d5d76dcf21404c6.png
Еще чат поддерживает два режима отображения. Его можно встроить в любой другой HTML элемент или »приклеить» к одному из углов экрана. Чат может открывать при нажатии на стандартный лейбл, а может при нажатии на произвольный HTML элемент
67c5752c5cf94f5ab7fec1983802378f.png
Вы также можете изменить все надписи («Начать чат», «Введите ваше имя», «Прикрепить файл» и другие).

Передача файлов


Теперь клиент и менеджер могут обмениваться файлами (фото и документами). Файлы хранятся на сервере Telegram и не занимают место на Вашем хостинге.
362ea73b68a2450f829ca21dde8215d1.png

JQuery больше не обязательна


В прошлый раз меня ругали, мол надо тянуть JQuery для работы небольшого скрипта. Я все осознал и в этот раз написал все на чистом JavaScript.

Работает через Server Side Events либо LongPoll


Чат на сайте теперь может получать обновления от вашего сервера не только с помощью Long Poll запросов, но и с помощью Server Side Event трансляции (она будет работать только на хостингах, где поддерживается set_time_limit (0) и нет проблем с функцией flush ())

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


  1. Зайдите на свой сервер/VPS/хостинг по SSH или FTP
  2. Создайте папку (удобнее в корне сайта) и назоваите ее например telegram-site-helper
  3. Сделайте ей chmod (права доступа) хотя бы 0775 (скрипт-инсталлятор создаст там папки и файлы)
  4. Залейте в эту папку telegram-site-helper-install.php
  5. Запустите скрипт через https (например: https://mysite.ru/telegram-site-helper/telegram-site-helper-install.php
    ).
    Вы должны увидеть следующее: 95f6aa85155c485caa282df2b998f24a.png
  6. Выберите Язык и нажмите «Начать установку»
  7. Придумайте пароль для авторизации менеджеров и введите его в соответствующее поле (этот пароль менеджер введет одни раз для авторизации у Телеграм бота)
  8. Получите токен для Бота у @BotFather и вставьте его (токен) в соответствующее поле:
    2681d90b4fbe46b3a475279cd32680d8.png
  9. Выберите, где хранить данные: в SQLite или в MySQL. Если в MySQL — настройте доступ.
  10. Если вы используете самоподписанный сертификат — укажите полный путь до него (его нужно отправить на сервер Telegram)
    4ade830b67a041b99d5e3d4faaedcd74.png
  11. Нажмите »Проверить настройки и установить Telegram Site Helper»
  12. Если установка прошла успешно Вы должны увидеть следующее:
    45b1478cbef4488690d9fea969d14adf.png
  13. Откройте Telegram и напишите своему боту »/login 1234» (где 1234 — пароль менеджера). Если установка прошла успешно, бот авторизует Вас.
    648521313d744a39b0505009834fca23.png
  14. Переходим на вкладку »Генератор виджета»
    dc404f101e5d48e8aca6a8337bfa6060.png
  15. Настраиваем виджет и копируем код на сайт. Все.
  16. Если понравился проект — можно сделать Donate.

Планы на будущее


  • Все же реализовать поддержку LongPoll к серверу Telegram, чтоб обойтись без HTTPs
  • Придумать и сделать: как разделять клиентов на «под-чаты»
  • Доделать перевод на английский язык
  • Голосовой чат
  • Возможность изменить/отключить звук сообщения
  • Умные мысли, которые хабра-пользователи напишут в комментариях

В конце статьи выражаю благодарность команде Telegram за платформу для Ботов. Крайне полезная вещь.
Спасибо.

© Habrahabr.ru