Здравствуйте. Меня зовут Андрей.
Летом прошлого года я опубликовал проект и статью "Чат-помощник на сайт с помощью Telegram за 15 минут". Идея проекта заключалась в том, чтобы реализовать на сайте всплывающий Чат-помощник, бэкэндом для которого (для чата) был бы набирающий популярность мессенджер Telegram.
На удивление проект довольно быстро стал набирать звезды на GitHub, а я — получать письма благодарности и просьбы о помощи в настройке от людей со всего света. Люди не могли запустить скрипт на своих хостингах: то set_time_limit(0) не поддерживается, то 503 ошибка, то пути не правильно указаны.
Вторая версия скрипта устанавливается намного проще и работает на основе WebHooks.
>>>> Ссылка на репозиторий GitHub.
В двух словах, что это такое
Для тех, кто не видел прошлую статью, повторюсь. Telegram Site Helper — это набор скриптов (PHP, JS), которые реализуют чат-помощник для Вашего сайта (для того, чтобы Ваши посетители/клиенты могли оперативно задать вопрос в чат Вашему менеджеру). Менеджер получит сообщение в мессендежере Telegram. И там же может ответить. Система подходит для сайтов, где не очень большой поток клиентов. По прежнему есть маленькое неудобство: все сообщения от всех посетителей приходят менеджеру в единый чат. Чтобы направить ответ посетителю, менеджер сперва должен выбрать «подчат», отправив команду /chat_1234, примерно вот так:
Что нового
Теперь чат работает на основе WebHooks
Сервер Telegram сам будет присылать новые сообщения на Ваш сервер.
Вечно работающий в фоне скрипт-сервер для Long Poll запросов к серверу Telegram больше не нужен. Но зато теперь нужен HTTPS (это политика Telegram). Сертификат можно купить, сделать бесплатный на 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Для установки используется всего один файл.
В репозитории лежит всего один файл: telegram-site-helper-install.php — это инсталлятор. Он создаст нужные директории, распакует JS, CSS и два PHP файла.
Здесь же вы сможете сгенерировать JS код чата, который нужно будет вставить на странцу сайта.
Всплывающий и встроенный чаты, стилизация
Чат можно стилизовать не залезая в CSS. Цвет рамки, фона, шрифт можно настроить прямо из инсталлятора.
Еще чат поддерживает два режима отображения. Его можно встроить в любой другой HTML элемент или "приклеить" к одному из углов экрана. Чат может открывать при нажатии на стандартный лейбл, а может при нажатии на произвольный HTML элемент
Вы также можете изменить все надписи («Начать чат», «Введите ваше имя», «Прикрепить файл» и другие).
Передача файлов
Теперь клиент и менеджер могут обмениваться файлами (фото и документами). Файлы хранятся на сервере Telegram и не занимают место на Вашем хостинге.
JQuery больше не обязательна
В прошлый раз меня ругали, мол надо тянуть JQuery для работы небольшого скрипта. Я все осознал и в этот раз написал все на чистом JavaScript.
Работает через Server Side Events либо LongPoll
Чат на сайте теперь может получать обновления от вашего сервера не только с помощью Long Poll запросов, но и с помощью Server Side Event трансляции (она будет работать только на хостингах, где поддерживается set_time_limit(0) и нет проблем с функцией flush())
Как установить
- Зайдите на свой сервер/VPS/хостинг по SSH или FTP
- Создайте папку (удобнее в корне сайта) и назоваите ее например telegram-site-helper
- Сделайте ей chmod (права доступа) хотя бы 0775 (скрипт-инсталлятор создаст там папки и файлы)
- Залейте в эту папку telegram-site-helper-install.php
- Запустите скрипт через https (например:
https://mysite.ru/telegram-site-helper/telegram-site-helper-install.php).
Вы должны увидеть следующее:
- Выберите Язык и нажмите «Начать установку»
- Придумайте пароль для авторизации менеджеров и введите его в соответствующее поле (этот пароль менеджер введет одни раз для авторизации у Телеграм бота)
- Получите токен для Бота у @BotFather и вставьте его (токен) в соответствующее поле:
- Выберите, где хранить данные: в SQLite или в MySQL. Если в MySQL — настройте доступ.
- Если вы используете самоподписанный сертификат — укажите полный путь до него (его нужно отправить на сервер Telegram)
- Нажмите "Проверить настройки и установить Telegram Site Helper"
- Если установка прошла успешно Вы должны увидеть следующее:
- Откройте Telegram и напишите своему боту "/login 1234" (где 1234 — пароль менеджера). Если установка прошла успешно, бот авторизует Вас.
- Переходим на вкладку "Генератор виджета"
- Настраиваем виджет и копируем код на сайт. Все.
- Если понравился проект — можно сделать Donate.
Планы на будущее
- Все же реализовать поддержку LongPoll к серверу Telegram, чтоб обойтись без HTTPs
- Придумать и сделать: как разделять клиентов на «под-чаты»
- Доделать перевод на английский язык
- Голосовой чат
- Возможность изменить/отключить звук сообщения
- Умные мысли, которые хабра-пользователи напишут в комментариях
В конце статьи выражаю благодарность команде Telegram за платформу для Ботов. Крайне полезная вещь.
Спасибо.
UPD! Забыл добавить, что после установки, стоит удалить инсталлятор с сервера и настроить права доступа к папке.
Большое спасибо за оперативные Pull Request`ы и критику кода. Ищу силы и время на доработки.
Комментарии (49)
Vorchun
28.05.2016 23:34+5Удивлен, что еще нет чата, в котором можно подключить любой чат для общения со стороны компании: jabber, telegram, vk, slack и т.д.
vmaslyaev
29.05.2016 18:29JimBot — объединяем пользователей ICQ, VK, Jabber в одном чате
habrahabr.ru/sandbox/47900
типа такого?
alexovs
01.06.2016 12:57Да вобщем-то уже есть:
http://manychat.com/
https://chatlio.com/
http://whatshelp.ru/
видел ещё какие-то, т.к. думал создать подобное
Flector
28.05.2016 23:38-4https отсеивает 90% всех сайтов. жаль.
Plombeer
29.05.2016 00:56+4HTTP уходит в прошлое и это хорошо. Благо, что сейчас можно не генерить самоподписанный, а получить бесплатный сертификат
Flector
29.05.2016 00:59-4когда уйдет — вот тогда и стоит об этом говорить.
а пока что 90% интернета это http.
переводить сайты на https только ради чата — ну его на фиг.
преимуществ https для обычных сайтов нет никаких — только грузятся дольше и все.
braindrain
29.05.2016 11:26+2А зачем переводить весь сайт? Достаточно сгенерить self-signed для работы с Телеграмом.
Surzhikov
29.05.2016 19:02braindrain абсолютно верно заметил. Переводить сайт на HTTPS не обязательно, достаточно самому сделать сертификат и настроить сервер (или хостинг). По HTTPS должен быть доступен только один скрипт, к которому обратится сервер Telegram.
Единственная проблема, что на хостингах приходится платить ~90 р/мес за услугу дополнительный IP, без которой поддержку SSL не включат.
Survtur
29.05.2016 22:56по моему Вы просто не уважаете посетителей ваших сайтов. Ведь Http легко прослушивается, а значит вы светите всё, что они делают. Саме неприятное — светить данные форм, типа email адресов.
korzunin
29.05.2016 09:40+1По https обязательно должен быть доступен только скрипт к который работает с телеграмом, сам сайт может оставаться на http
zenn
29.05.2016 00:02+3Может вам стоит задуматься над качеством кода? Нет, я все понимаю, что сделано из хороших убеждений, но то в каком оно виде предоставлено это полный атас. Зачем изобретать велосипед и писать непонятную приблуду в виде «telegram-site-helper-install.php», в котором основной код приложения захардкожен в строки и обернут в base64. Вы серьезно думаете, что это будет удобно дорабатывать? А что со стилем кода, неужели вы до сих пор используете php 4 и эта версия вам не позволяет ввести классы, пространства имен, описать взаимодействия интерфейсами? Может стоит организовать код в виде composer пакета, разделив front и back end части?
И да, напоследок (и такого в коде не мало):
if(!is_file("telegram-site-helper-config.php")){ header("location:?act=install"); exit(); }else{ header("location:?act=install"); exit(); }
if(array_key_exists("selfCertPart", $_POST)){ if($_POST["selfCertPart"]!=null){ $selfCertPart=$_POST["selfCertPart"]; }else{ $selfCertPart=null; } }else{ $selfCertPart=null; }
Temirkhan
29.05.2016 12:27Там есть над чем поработать. Как над оформлением по PSR, так и по столпам ООП
akzhan
29.05.2016 02:57+3Что за бред кодировать скрипты в base64?
Выигрыш нулевой (кэширование, сжатие, слышали?), единственная достойная причина — возможность подсунуть вредоносный код.
akzhan
29.05.2016 03:01По-хорошему сделали бы обычные исходные скрипты, и скрипт-сборщик кода, если уж так хочется в виде одного файла (но зачем? опять-таки раздача статики не лучший кейс для php).
webirus
29.05.2016 03:35+1Не видел этого проекта раньше. Но теперь обязательно потестирую. Тем более, что перевожу свои проекты на https)
cmepthuk
29.05.2016 10:36+2Как уже выше отметил тов. zenn — пока проект не оформлен в виде composer пакета (с опциональным дополнением в виде bower пакета со всеми фроненд-компонентами) — использовать его крайне, крайне
проблематичноне удобно. Должны быть очень сильные аргументы, которые заставят отказаться от:
$ composer require Surzhikov/Telegram-Site-Helper # some times later $ composer update
Оформление фронтенд-ресурсов в виде отдельного пакета (да, оба пакета можно разместить в пределах одного репозитория если не изменяет память, просто указав что и откуда брать каждому пакету) избавит от необходимости разработчиков задумываться над тем как расшарить директорию из вендора во вне без реврайтов\алиасов\симлинков\nginx-локэйшенов.
Так же поддержу мнение что не стоит всё запихивать в один файл. Весомый плюс из этого подхода видится один — портабельность (но зачем она здесь?), а минусов же — вагон и маленькая тележка. В крайнем случае — есть phar, запустив который из консоли можно выполнить всю магию.
Сам проект потестирую обязательно, но позже. Как только придет composer.
Steamus
29.05.2016 15:39+7Хотелось бы по человечески попросить разработчиков магазинов — не употребляйте везде где ни попадя и когда не попадя чат помощник. Последнее время это просто какой-то адский ад. Заходишь на сайт-магазин глянуть что там есть нужного, а тебе хлоп перед носом на полэкрана окно чата — дескать я манагер Петя чем могу быть полезен? (и ведь, падла, часто ещё с таким противным булькающим звуком! )) Да ничем, я ещё вообще не разобрался что и за сколько вы продаёте.
Закрываю окно чата. Перехожу на следующую страницу — и опять, хрясь на полэкрана… я манагер Петя… В общем — не злоупотребляйте. Активируйте чат хотя бы нажатию на кнопку. Я хочу сам решать когда мне спрашивать совета у манагера. Иначе получается как в реальном магазине порой — манагер назойливо стоит у вас под локтем и внимательно смотрит что вы там смотрите. Не крадёте ли чего случаем… :)
conturov
29.05.2016 18:43Это конечно сугубо мое мнение, но тут скорее всего проблема в настройке чата. Многие на магазин ставят чат потому что есть у других но не понимая как именно он должен работать.
Например было бы полезнее показывать чат если человек просмотрел 5-7 товаров из одной рубрики, тут можно предположит что посетитель не может выбрать товар и ему нужна помощь. Т.е. чат должен быть плотно завязан на статистике. А еще лучше что-бы сайт менялся под потребности посетителя, а не пихать ему чат где нужно и не нужно.Steamus
29.05.2016 21:55тут можно предположит что посетитель не может выбрать товар и ему нужна помощь.
По уму, я бы предложил ничего не предполагать за посетителя. А просто аккуратно и неназойливо написать в правом нижнем углу, что если у вас есть вопросы, то менеджер прямо сейчас доступен в чате. Нажмите кнопку для начала беседы. Всё.
sticks
30.05.2016 12:27И в дополнение хотелось бы попросить еще — не употребляйте чат-помощник, если не собираетесь его использовать. А то бывает, дозреешь до вопроса, напишешь его в в тот самый чат-помощник, а тебе приходит автоответ: «Этот вопрос легче прояснить в личном разговоре, оставьте телефон, и мы вам перезвоним». И вот уже в квест выбора товара интровертом добавляется невыполнимый пункт «телефонный разговор с продавцом».
Sevchik403
29.05.2016 19:03Есть Intercom, но он 50$ в месяц стоит. Хотя он не только как чат, но и CRM и множество других плюшек.
Anselm_nn
29.05.2016 19:03+1Я, конечно, понимаю, что считается очень usersfriendly подходом сразу же на четверть экрана (а на мобильных устройствах и на весь) открывать чат, но это реально мешает. Многие сайты в рунете внезапно этим заболели. При чем даже если закроешь его или свернешь, то при каждом новом переходе по ссылке-снова вылетает. Спокойной посерфить по разным товарам в интернет магазине становится невозможно. Кто сказал, что это увеличит конверсию?
Surzhikov
29.05.2016 19:04Одной и той же ложкой можно есть суп, мешать чай, а можно варить героин.
Многие сайты в рунете устанавливают JivoSite и отмечают в настройках все галочки, которые призваны увеличить конверсию.Steamus
29.05.2016 22:07Эт понятно, что можно. Именно потому люди и намекают, что ещё же и самому думать нужно.
rendername
29.05.2016 19:05Ещё есть над чем работать.
На будущее не плохо было бы добавить возможность прикреплять не только изображения, но и обычные файлы документов: pdf, odt, txt и др.
Уже при первом использовании столкнулся с тем, что не работала авторизация менеджера. Пришлось заменить в вебхуке msgText,6 на msgText,7 — помогло. Pull отправил, хоть и дико не удобно из-за этого base64.Surzhikov
29.05.2016 19:06Спасибо за Pull. Я учту всю критику касательно кода.
P. S. Можно аттачить любые типы файлов.rendername
30.05.2016 00:30Действительно любые.
Проверял mp3 изначально, для него видимо нужна отдельная обработка.
Скрытый текст
Surzhikov
30.05.2016 00:57Да, MP3 приходит не как Document, а как Audio.
Я просто не успел доделать эту часть. Теперь вот Composer сижу изучаю
aliev
30.05.2016 10:01Придумать и сделать: как разделять клиентов на «под-чаты»
Скорее всего это в ботах должна поддержка такая появиться.
Как вариант сделать приложение под телефон, который будет иметь в настройках собственный ИД, и слушать некий порт.
Сам написал тестовый подобный твоему.
greabock
31.05.2016 08:42+1Придумать и сделать: как разделять клиентов на «под-чаты»
Очевидно, что нужен сабпротокол поверх протокола телеграма, где часть сообщения будет являться заголовком. Само собой, для этого понадобится реализация своего клиента с преферансом и маркитантками.
Surzhikov
01.06.2016 12:58Если понадобится делать собственный клиент, то какой остается смысл использования Telegram? Просто хранить там данные?
Kvarkas
31.05.2016 19:03Очень интересно, посматривал давно как реализовать ЧатОпс (управление сервером через чат) — нужно попробовать и вправду телеграм под это дело — может что дельное получится :)
Begetan
31.05.2016 20:09Кто нибудь может внятно объяснить преимущество Web Hook против Long Poll?
Я использую демон на Go, так что со стабильностью демона и его перезапуском никаких проблем нет.Surzhikov
01.06.2016 12:57На PHP (в реалиях современных хостингов) весьма сложно сделать стабильно и постоянно работающего демона; а технология WebHook реализует идею «PHP создан, чтобы умирать»: шлет запрос, PHP обрабатывает его и умирает.
Если речь о Go, или NodeJS или скажем Python — думаю, LongPoll ничем не хуже.
krimtsev
что я сделал первым делом? расшарил линк на эту статью знакомому админу. мол, пусть крутит себе на сайт ;)
за проектом наблюдаю с первой версии, ребята молодцы. я думаю это не конец
krimtsev
» Придумать и сделать: как разделять клиентов на «под-чаты»
а что если бот для каждого зашедшего человека будет создавать якобы груповой чат. и называть его [PM] &USERNAME%
XAKEPEHOK
Дело в том, что боты этого делать не могут