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



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

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

    >>>> Ссылка на репозиторий GitHub.

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


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


    Что нового


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


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


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



    В репозитории лежит всего один файл: telegram-site-helper-install.php — это инсталлятор. Он создаст нужные директории, распакует JS, CSS и два PHP файла.
    Здесь же вы сможете сгенерировать JS код чата, который нужно будет вставить на странцу сайта.
    Внимание: cкрипты в инсталляторе закодированны в base64
    Поскольку для многих владельцев сайтов на Wordpress/Joomla, base64 ассоциируется с вирусными инъекциям — заранее приглашаю всех параноиков опасающихся изучить содержимое скриптов, закодированных в base64 (например с помощью этой утилиты).


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


    Чат можно стилизовать не залезая в CSS. Цвет рамки, фона, шрифт можно настроить прямо из инсталлятора.

    Еще чат поддерживает два режима отображения. Его можно встроить в любой другой HTML элемент или "приклеить" к одному из углов экрана. Чат может открывать при нажатии на стандартный лейбл, а может при нажатии на произвольный HTML элемент

    Вы также можете изменить все надписи («Начать чат», «Введите ваше имя», «Прикрепить файл» и другие).

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


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


    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
      ).
      Вы должны увидеть следующее:
    6. Выберите Язык и нажмите «Начать установку»
    7. Придумайте пароль для авторизации менеджеров и введите его в соответствующее поле (этот пароль менеджер введет одни раз для авторизации у Телеграм бота)
    8. Получите токен для Бота у @BotFather и вставьте его (токен) в соответствующее поле:
    9. Выберите, где хранить данные: в SQLite или в MySQL. Если в MySQL — настройте доступ.
    10. Если вы используете самоподписанный сертификат — укажите полный путь до него (его нужно отправить на сервер Telegram)
    11. Нажмите "Проверить настройки и установить Telegram Site Helper"
    12. Если установка прошла успешно Вы должны увидеть следующее:
    13. Откройте Telegram и напишите своему боту "/login 1234" (где 1234 — пароль менеджера). Если установка прошла успешно, бот авторизует Вас.
    14. Переходим на вкладку "Генератор виджета"

    15. Настраиваем виджет и копируем код на сайт. Все.
    16. Если понравился проект — можно сделать Donate.


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


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


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

    UPD! Забыл добавить, что после установки, стоит удалить инсталлятор с сервера и настроить права доступа к папке.
    Большое спасибо за оперативные Pull Request`ы и критику кода. Ищу силы и время на доработки.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 53

      +1
      что я сделал первым делом? расшарил линк на эту статью знакомому админу. мол, пусть крутит себе на сайт ;)

      за проектом наблюдаю с первой версии, ребята молодцы. я думаю это не конец
        +1
        » Придумать и сделать: как разделять клиентов на «под-чаты»

        а что если бот для каждого зашедшего человека будет создавать якобы груповой чат. и называть его [PM] &USERNAME%
          0
          Дело в том, что боты этого делать не могут
        +5
        Удивлен, что еще нет чата, в котором можно подключить любой чат для общения со стороны компании: jabber, telegram, vk, slack и т.д.
          0
          JimBot — объединяем пользователей ICQ, VK, Jabber в одном чате
          habrahabr.ru/sandbox/47900

          типа такого?
            0
            там хардкорный интерфейс)
            0
            Да вобщем-то уже есть:
            http://manychat.com/
            https://chatlio.com/
            http://whatshelp.ru/

            видел ещё какие-то, т.к. думал создать подобное
          • UFO just landed and posted this here
              +4
              HTTP уходит в прошлое и это хорошо. Благо, что сейчас можно не генерить самоподписанный, а получить бесплатный сертификат
              • UFO just landed and posted this here
                  +4
                  http2 полностью ходит только на ssl. Сравнивать обычный http, а тем более https 1.1 — разница в разы. А уж кэширование ключей и сессий — так сайт открывается даже через сутки быстрее, чем http.
                  • UFO just landed and posted this here
                    +2
                    А зачем переводить весь сайт? Достаточно сгенерить self-signed для работы с Телеграмом.
                      0
                      посоветуете, где про это почитать?
                        0
                        https://core.telegram.org/bots/self-signed
                        0
                        braindrain абсолютно верно заметил. Переводить сайт на HTTPS не обязательно, достаточно самому сделать сертификат и настроить сервер (или хостинг). По HTTPS должен быть доступен только один скрипт, к которому обратится сервер Telegram.
                        Единственная проблема, что на хостингах приходится платить ~90 р/мес за услугу дополнительный IP, без которой поддержку SSL не включат.
                          0
                          Так TLS SNI же есть 100 лет как зачем отдельный IP?
                            0
                            А хостинги досихпор SNI не освоили?
                          0
                          по моему Вы просто не уважаете посетителей ваших сайтов. Ведь Http легко прослушивается, а значит вы светите всё, что они делают. Саме неприятное — светить данные форм, типа email адресов.
                        0
                        а по каким конкретно причинам?
                          +1
                          По https обязательно должен быть доступен только скрипт к который работает с телеграмом, сам сайт может оставаться на http
                          +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;
                          		}
                          
                          • UFO just landed and posted this here
                            +3

                            Что за бред кодировать скрипты в base64?


                            Выигрыш нулевой (кэширование, сжатие, слышали?), единственная достойная причина — возможность подсунуть вредоносный код.

                              0

                              По-хорошему сделали бы обычные исходные скрипты, и скрипт-сборщик кода, если уж так хочется в виде одного файла (но зачем? опять-таки раздача статики не лучший кейс для php).

                              +1
                              Не видел этого проекта раньше. Но теперь обязательно потестирую. Тем более, что перевожу свои проекты на https)
                                +2

                                Как уже выше отметил тов. zenn — пока проект не оформлен в виде composer пакета (с опциональным дополнением в виде bower пакета со всеми фроненд-компонентами) — использовать его крайне, крайне проблематично не удобно. Должны быть очень сильные аргументы, которые заставят отказаться от:


                                $ composer require Surzhikov/Telegram-Site-Helper
                                # some times later
                                $ composer update

                                Оформление фронтенд-ресурсов в виде отдельного пакета (да, оба пакета можно разместить в пределах одного репозитория если не изменяет память, просто указав что и откуда брать каждому пакету) избавит от необходимости разработчиков задумываться над тем как расшарить директорию из вендора во вне без реврайтов\алиасов\симлинков\nginx-локэйшенов.


                                Так же поддержу мнение что не стоит всё запихивать в один файл. Весомый плюс из этого подхода видится один — портабельность (но зачем она здесь?), а минусов же — вагон и маленькая тележка. В крайнем случае — есть phar, запустив который из консоли можно выполнить всю магию.


                                Сам проект потестирую обязательно, но позже. Как только придет composer.

                                  –2
                                  Круто! Максимальный респект!
                                    +7
                                    Хотелось бы по человечески попросить разработчиков магазинов — не употребляйте везде где ни попадя и когда не попадя чат помощник. Последнее время это просто какой-то адский ад. Заходишь на сайт-магазин глянуть что там есть нужного, а тебе хлоп перед носом на полэкрана окно чата — дескать я манагер Петя чем могу быть полезен? (и ведь, падла, часто ещё с таким противным булькающим звуком! )) Да ничем, я ещё вообще не разобрался что и за сколько вы продаёте.

                                    Закрываю окно чата. Перехожу на следующую страницу — и опять, хрясь на полэкрана… я манагер Петя… В общем — не злоупотребляйте. Активируйте чат хотя бы нажатию на кнопку. Я хочу сам решать когда мне спрашивать совета у манагера. Иначе получается как в реальном магазине порой — манагер назойливо стоит у вас под локтем и внимательно смотрит что вы там смотрите. Не крадёте ли чего случаем… :)
                                      0
                                      Это конечно сугубо мое мнение, но тут скорее всего проблема в настройке чата. Многие на магазин ставят чат потому что есть у других но не понимая как именно он должен работать.
                                      Например было бы полезнее показывать чат если человек просмотрел 5-7 товаров из одной рубрики, тут можно предположит что посетитель не может выбрать товар и ему нужна помощь. Т.е. чат должен быть плотно завязан на статистике. А еще лучше что-бы сайт менялся под потребности посетителя, а не пихать ему чат где нужно и не нужно.
                                        0
                                        тут можно предположит что посетитель не может выбрать товар и ему нужна помощь.

                                        По уму, я бы предложил ничего не предполагать за посетителя. А просто аккуратно и неназойливо написать в правом нижнем углу, что если у вас есть вопросы, то менеджер прямо сейчас доступен в чате. Нажмите кнопку для начала беседы. Всё.
                                        0
                                        Да, необходимо создать аналогичные настройки в боте
                                          0
                                          И в дополнение хотелось бы попросить еще — не употребляйте чат-помощник, если не собираетесь его использовать. А то бывает, дозреешь до вопроса, напишешь его в в тот самый чат-помощник, а тебе приходит автоответ: «Этот вопрос легче прояснить в личном разговоре, оставьте телефон, и мы вам перезвоним». И вот уже в квест выбора товара интровертом добавляется невыполнимый пункт «телефонный разговор с продавцом».
                                          0
                                          Круто, обязательно нужно потестить
                                            0
                                            для https можно использовать cloudflare. в два клика дает сертификат.
                                              0
                                              Есть Intercom, но он 50$ в месяц стоит. Хотя он не только как чат, но и CRM и множество других плюшек.
                                                +1
                                                Я, конечно, понимаю, что считается очень usersfriendly подходом сразу же на четверть экрана (а на мобильных устройствах и на весь) открывать чат, но это реально мешает. Многие сайты в рунете внезапно этим заболели. При чем даже если закроешь его или свернешь, то при каждом новом переходе по ссылке-снова вылетает. Спокойной посерфить по разным товарам в интернет магазине становится невозможно. Кто сказал, что это увеличит конверсию?
                                                  0
                                                  Одной и той же ложкой можно есть суп, мешать чай, а можно варить героин.
                                                  Многие сайты в рунете устанавливают JivoSite и отмечают в настройках все галочки, которые призваны увеличить конверсию.
                                                    0
                                                    Эт понятно, что можно. Именно потому люди и намекают, что ещё же и самому думать нужно.
                                                  0
                                                  Ещё есть над чем работать.
                                                  На будущее не плохо было бы добавить возможность прикреплять не только изображения, но и обычные файлы документов: pdf, odt, txt и др.
                                                  Уже при первом использовании столкнулся с тем, что не работала авторизация менеджера. Пришлось заменить в вебхуке msgText,6 на msgText,7 — помогло. Pull отправил, хоть и дико не удобно из-за этого base64.
                                                    0
                                                    Спасибо за Pull. Я учту всю критику касательно кода.
                                                    P. S. Можно аттачить любые типы файлов.
                                                      0
                                                      Действительно любые.
                                                      Проверял mp3 изначально, для него видимо нужна отдельная обработка.

                                                      Скрытый текст
                                                        0
                                                        Да, MP3 приходит не как Document, а как Audio.
                                                        Я просто не успел доделать эту часть. Теперь вот Composer сижу изучаю
                                                    0
                                                    Придумать и сделать: как разделять клиентов на «под-чаты»

                                                    Скорее всего это в ботах должна поддержка такая появиться.
                                                    Как вариант сделать приложение под телефон, который будет иметь в настройках собственный ИД, и слушать некий порт.
                                                    Сам написал тестовый подобный твоему.
                                                      +1
                                                      Придумать и сделать: как разделять клиентов на «под-чаты»

                                                      Очевидно, что нужен сабпротокол поверх протокола телеграма, где часть сообщения будет являться заголовком. Само собой, для этого понадобится реализация своего клиента с преферансом и маркитантками.

                                                        0
                                                        Если понадобится делать собственный клиент, то какой остается смысл использования Telegram? Просто хранить там данные?
                                                        0
                                                        Очень интересно, посматривал давно как реализовать ЧатОпс (управление сервером через чат) — нужно попробовать и вправду телеграм под это дело — может что дельное получится :)
                                                          0
                                                          Кто нибудь может внятно объяснить преимущество Web Hook против Long Poll?

                                                          Я использую демон на Go, так что со стабильностью демона и его перезапуском никаких проблем нет.
                                                            0
                                                            На PHP (в реалиях современных хостингов) весьма сложно сделать стабильно и постоянно работающего демона; а технология WebHook реализует идею «PHP создан, чтобы умирать»: шлет запрос, PHP обрабатывает его и умирает.
                                                            Если речь о Go, или NodeJS или скажем Python — думаю, LongPoll ничем не хуже.
                                                            0
                                                            Написал уже в issues на гитхабе.

                                                            Сначала установка затыкалась на проверке https. Хотя весь сайт работает через https. Сервер сам работает через апач+nginx. Последний и подсовывает сертификат. Пришлось прописать настройки виртуального хоста в httpd.conf строку «SetEnvIf X-Forwarded-Proto https HTTPS=on» тогда установка прошла успешно, но бот молчит на команду /login pass. Как быть? Что не так?
                                                              0
                                                              Нашел косяк. Сертификат не верно на сервере был установлен
                                                              0

                                                              Привет автору!
                                                              Могу ли я использовать этот чат в паре со своей "кнопкой заказать звонок", которую бесплатно предлагаю своим клиентам?
                                                              По нажатию на кнопку выпадает моя панель с просьбой ввести номер, хочу добавить туда вызов чата, если посетитель так захочет.

                                                                0
                                                                У меня есть SSL сертификат на сайте. Всё делаю по гайду, всё равно выдаёт → Checking HTTPS available… Error.

                                                                Что делать?

                                                                Only users with full accounts can post comments. Log in, please.