Пользователь
0,0
рейтинг
3 августа 2015 в 13:23

Разработка → Чат-помощник на сайт с помощью Telegram за 15 минут из песочницы



Про чаты-помощники


Многие люди продают через интернет товары и услуги. Еще больше людей — покупает что-то через интернет.
Во время выбора покупок, часто возникают вопросы, которые можно решить позвонив и пообщавшись с менеджером.
Скорее всего я — не единственный человек на хабре, который общению с менеджерами по телефону предпочитает переписку.
И тут на помощь приходят всплывающие чаты-помощники, которые вроде-как повышают конверсию, но многих нервируют.
(Для тех, кто не в курсе: в углу сайта всплывает окошко, в котором можно он-лайн переписываться с консультантом).

Есть с десяток подобных сервисов и все они работают по принципу "пробная версия бесплатно, а дальше за деньги".
На хабре есть несколько статей, вот одна из них (http://habrahabr.ru/company/tuthost/blog/165365/), но, я уверен, аудитория Хабрахабра знает о чем речь.
Большинству людей подойдет бесплатный вариант любого такого сервиса: нужно всего-навсего зарегистрироваться и вставить на сайт кусок JS кода. Для тех у кого много менеджеров — придется платить: например Редхелпер на 10 операторов обойдется Вам:
115200 руб. за 1 год



Скорее всего — цена адекватная для тех, кто платит зарплату десяти менеджерам.

Но я решил изобрести бесплатный «велосипед» из подручных материалов.
Запуск у себя на сервере займет 15 минут. Всем, кому идея интересна — прошу под кат.


Telegram BOT


Набирающий популярность за границей мессенджер Telegram недавно представил новое API для разработки ботов. Штука — интересная, ей можно найти множество применений. Теперь можно создать бота (написать программу), который будет отвечать на Ваши вопросы, выполнять определнные команды и все это в окне переписки мессенджера Telegram.

Именно на основе мессенджера Telegram и его API для ботов будет работать наш бесплатный, безлимитный чат-помощник-на-сайт.

Общая схема идеи — на картинке:



Вот так это происходит:
  1. Пользователи на сайте пишут в чат
  2. Сообщение это улетает на Ваш сервер
  3. Оттуда Telegram-бот пересылает его нужному менеджеру
  4. Менеджер отвечает через Telegram
  5. Бот отправляет сообщение обратно в чат_на_сайте


Реализация


Итак, для запуска «у себя» Вам понадобится:
  1. Сервер, VPS или хостинг, на котором есть актуальный PHP, поддержка SQLite и возможность сделать set_time_limit(0) (т.е. сделать работу php скрипта не ограниченной по времени)
  2. Приложение Telegram (на смартфоне или компьютере)
  3. Базовые знания PHP

Внимание! Вы запускаете этот код на свой страх и риск! Я потратил на него несколько часов и возможно там полно ошибок!


План действий такой:

0) Скачиваем с ГитХаба исходники:
https://github.com/Surzhikov/TelegramSiteHelper

1) Регистрируем нового бота в Telegram.
Для этого нужен только смартфон и 2 минуты.
Заходим в Telegram, добавляем пользователя @BotFather и шлем ему команду "/newbot"
Далее по инструкции: придумываем имя, юзернейм, пишем about и загружаем фотку.
Результатом всего должен получиться API Key с помощью которого мы будем работать с BotAPI.
У меня получилось вот так:



(Сообщение в котором фигурирует мой API Key я удалил)

2) Полученный ключ вставляем в TelegramBotConfig.php.
Там же указываем любой придуманный Вами пароль для регистрации новых менеджеров.

3) Заливаем все на свой сервер

4) Запускаем нашего бота — фоновый процесс getUpdates.php
Он должен работать бесконечно, поэтому рекомендую поставить его в автозагрузку сервера.
Для надежности можно поставить запуск скрипта в crontab каждую минуту.
Скрипт будет запускаться в единичном экземпляре, все повторные запуски сразу же завершатся.

5) Регистрируем нового менеджера
Со смартфона менеджера заходим в телеграм и добавляем нашего нового бота (того, которого Вы только что создали)
Пишем ему команду: «/newmanager пароль_для_менеджеров». В ответ получаем приветствие.



Операцию повторяем нужное количество раз, для каждого менеджера.
Если на данном этапе Вы не получили ответ от Бота — значит что-то не работает!

6) Проверяем
Переходим на страницу index.html (то есть заходим на адрес mysite.ru/index.php, а не открываем локально).
Там находится небольшой, на скорую руку сверстанный чат.
Если отправить сообщение в этот чат, бот выберет случайного менеджера и перешлет ему это сообщение.



Вот здесь интересный момент:
Клиентов (покупателей) может быть много, а менеджер — один.
Менеджер общается с клиентами посредством Telegram-бота.
Если одновременно два (или больше) клиентов написали сообщение, а менеджер отвечает им по очереди, Telegram-боту нужно как-то указать, какому из клиентов отправить ответ.
Для этого я сделал команду «/answer_№ЧАТА». После отправки этой команды все письма менеджера уходят в нужный веб-чат.



Минусы, плюсы, что можно доделать


Минусы
  1. Сейчас чат сделан «на скорую руку», чтобы скорее запустить в своем проекте. Есть много лазеек, с помощью которых например можно писать в чужой чат и подглядеть чужую переписку.
  2. Сейчас эти проблемы меня не тревожат, потому как в чате-помощнике на сайте у нас не принято передавать важную и секретную информацию.
  3. Когда менеджер один а клиентов много — можно запутаться, кому отвечаешь.
  4. … Буду дополнять из комментариев


Плюсы:
  1. Это работает!
  2. Бесплатно навсегда и на любое количество менеджеров
  3. Не нужно лишних приложений, только телеграм, который есть для всех популярных платформ
  4. Можно переписать и стилизовать чат так, как Вам хочется.
  5. Telegram работает очень быстро
  6. … Буду дополнять из комментариев


Что можно сделать:
  1. Защита от дурака и работа над безопасностью
  2. Умную систему распределения сообщений между менеджерами (сейчас бот направляет сообщение случайному менеджеру)
  3. Автоматические ответы от бота, когда менеджер долго молчит
  4. Добавить имя и фото менеджера, который отвечает в чате
  5. … Буду дополнять из комментариев


Спасибо за внимание.

UPDATE 23.08.2015 —Полностью переписал бота, теперь работает более стабильнее, теперь можно выбирать между sqlite и mysql

В планах:
— админ-панель со статистикой
— работа через webhook

https://github.com/Surzhikov/TelegramSiteHelper
Андрей Суржиков @Surzhikov
карма
20,0
рейтинг 0,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (41)

  • 0
    Почему getUpdates? Чем не подошел setWebhook?
    • 0
      Вероятно, из-за необходимости иметь SSL сертификат.
      • +1
        но ведь есть же бессплатные сертификаты
        • 0
          ну как пишут в интернетах тот же StartSSL не подходит, если разубедите меня в обратном, поставлю его :) сам бота пишу. Регать домен и получать, даже бесплатный, сертификат, ради того чтоб в итоге получит не рабочее приложение, того не стоит.
          • 0
            Очень даже подходит, мой бот не жалуется. Точнее, сервера телеграма на него не жалуются.
            • 0
              Хм, спасибо за информацию. Free'шный? или платный у них какой?
              • 0
                Бесплатный, тот который на год. Там важно сделать правильную цепочку сертификатов.
                • 0
                  Можно продробнее что за цепочка?
                  А то вот такая ошибка на бесплатном сертифкате от StartSSL
                  Longman\TelegramBot\Exception\TelegramException: cURL error 60: SSL certificate problem: self signed certificate in certificate chain (see http://curl.haxx.se/libcurl/c/libcurl-errors.html) in C:\base\basic\vendor\longman\telegram-bot\src\Request.php:184
                  Stack trace:
                  

              • 0
                Если ещё актуально, нашел интересную статью о 3-ех летнем бесплатном сертификате. Правда ещё не пробовал.
                В ней так-же есть ссылка на статью по настройке SSL в Ngnix — это чтобы вообще не париться и поднять всё минут за 20-30.
                • +1
                  Уже настроил StartSSL все шикарно работает, но 3х летний сертификат заинтересовал :)
          • 0
            Чем не подходит?
            Прекрасно работают и распознаются его сертификаты.
    • –1
      Нужен HTTPS, а для многих это лишняя проблема…
      • +2
        Получить бесплатный сертификат дело получаса, а удобства при работе через вебхуки куда больше чем изгаляться с getUpdates
        • 0
          Я не заметил ничего сложного в getUpdates. Метод поддерживает Long-Poll, что очень удобно, а скрипт который работает бесконечно — остался от одного из прошлых проектов. Единственный минус на мой взгляд — не на каждом хостинге запустишь.

          Ну а если честно, я лишь однажды делал SSL и совсем не помню, как он настраивается.
          Если мой трехчасовой труд перерастет в проект, обещаю, доделать Webhook ;)
  • +1
    В дополнение к статье автора: недавно выложил в opensource похожую систему.
    Только там уже свой сервер для обработки и хранения чатов. Может кому пригодится :)
    github.com/edolganov/live-chat-engine
    • +1
      Большим плюсом для Вашей системы будет связка административной части с одним из существующих мессенджеров.!
      • 0
        Да, вы правы. После вашей статьи понимаю, что это очень полезная фича.
  • –4
    Читайте тут habrahabr.ru/post/263875, вообще делать не больше двух часов и не нужен сервер.
  • +4
    О, коллега! Я начал делать похожий сервис, 1 в 1 :) Только не на PHP, а на Node.

    Затем забросил, из-за того, что в текущей реализации API нельзя узнать, есть ли операторы в сети или нет. Без этой функции нельзя, к сожалению, клиенты будут писать в пустоту, неизвестно, ответит кто-то или нет. Это ставит крест на использовании сервиса на большинстве сайтов.

    Далее случайно была найдена Chatra.io. У нее уже есть все эти возможности и она бесплатная. Все нужные функции есть в бесплатной редакции. Мессенджер кроссплатформенный и гораздо удобнее реализован (кстати, похож на телеграмм).
    • 0
      Да, я даже не подумал об этой проблеме.
      Дело в том, что у нас каждый сотрудников не много и каждый спокойно может быть менеджером и отвечать на вопросы клиентов.
      Те кто реально отвечают на сообщения пользователей — носят с собой смартфоны с Telegram и отвечают оперативно, хоть в метро, хоть на отдыхе, хоть на пробежке (и такое бывает). У нас Telegram- это корпоративный чатик.

      Но для больших компаний это конечно проблема (хотя я вижу несколько решений).

      Кстати на сайте Chatra.io есть ограничение бесплатной версии «Число операторов онлайн — 5»
      • 0
        Какие решения? Писать сколько минут назад оператор был активен — не вариант.

        По поводу 5 операторов, для небольших сайтов хватает с лихвой, тем более, никто не запрещает одновременно пользоваться аккаунтом одного оператора сразу на нескольких машинах.

        Я этот сервис рассматривал как бюджетный вариант для небольших сайтов, на замену всяким JivoSite и пр, которые просят > 500 руб в месяц.
        • 0
          Оператор оффлайн потому-что он отошел в туалет/покурить?
          Или его сегодня нет в офисе?

          В первом случае — Charta не спасет нас, ведь «Писать сколько минут назад оператор был активен — не вариант». Тут у Telegram есть плюс, потому что его можно взять с собой.
          Во втором случае — можно сделать ежедневную утреннюю регистрацию менеджера в офисе, через тот же бот.

          Как вариант — через 10 секунд молчания — переключать чат на другого менеджера.

          Может я не до конца проблему, опишите. В чем в данном случае преимущество Chatra.io над предложенным сервисом?

          • 0
            У вас предполагается, что оператор всегда за компом и отлучается от него ненадолго. В мелких конторах не держат операторов, отвечают на вопросы сами хозяева, они не всегда за компьютером. Т.е. они или есть или их нет.

            Думаю что тут можно сделать таким образом: при нажатии посетителем на кнопку «Начать чат», окно с чатом раскрывается и оператору падает сообщение: «Новый посетитель с именем Вася входит в Чат...». В случае, если в течение определенного времени оператор ничего не пишет боту, то мы показываем посетителю надпись: «К сожалению нет операторов онлайн, но ваше сообщение мы обязательно прочитаем, напишите ваш email или сотовый чтобы мы могли связаться с вами». Вопрос только в том, насколько это сильно будет раздражать посетителей :)

            Преимущество Chatra лично для меня получается в том, что удобнее переписываться с разными посетителями, не надо выискивать в истории кто кому написал в общем потоке. Ну и по вышесказанному тоже.
          • 0
            только что в чате чатры мне сказали, что у них есть мобильные приложения. Так что, их тоже можно взять в… хм, покурить 8-)
            • 0
              Хорошо 8-) вы дружно меня победили!
              Удаляю реп, регистрируюсь в «чарте»!
              • 0
                Нет-нет, ни в коем случае.
                реп пусть остается. Хоть я и не люблю РНР 8-)
                но ссылочку засейвил, чтоб потом посмотреть, как сделано — вдруг возникнет таки желание навалять велосипед.
  • 0
    Я не очень понял такую вещь — менеджер с помощью команды переключает свое окно чата на разных пользователей?
    Получается, что все истории у него сваливаются в одно окно?
    Понятно, что тут менеджер говорит с ботом, поэтому автоматическое разделение сеансов не работает.
    Но можно ли как-то:
    — разделить сеансы общения с одним и тем же ботом?
    — дать этим сеансам разные имена?
    • 0
      Вот тоже очень напрягает сток всей переписки с разными клиентами в один поток.
      В телеграмме же есть чаткомнаты (групповые чаты). Апи Бота позволяет создавать для каждого клиента свой групповой чат — с выбранным менеджером и подписывать его названием чата?
      • 0
        Я смотрел АПИ, но я не вижу там возможности для бота инициировать беседу или сделать ее групповой. Кроме того, по умолчанию, id индивидуального чата совпадает с id пользователя, что как бы намекает на дискуссию 1:1 без комнат — все в кучу.
        Бот может получить уведомление, что чат стал групповым и что у него изменилось название. Но как он может сам это сделать — загадка.
        У меня была мысль иметь для пользователя один центральный чат, в который будут присылаться ссылки на открывание отдельных чатов. Не очень понятно про core.telegram.org/bots#deep-linking
        Если пользователю прислать ссылку с разными значениями start, у него будут открываться отдельные окна переписки?
        • 0
          telegram.me/triviabot?start=1
          Following a link with the start parameter will open a one-on-one conversation with the bot, showing a START button in the place of the input field

          Эта ссылка открывает тот же самый чат, на месте поля ввода — будет кнопка старт.

          If the startgroup parameter is used, the user will be prompted to select a group to add the bot to

          В случае, если передан параметр "startgroup" — Вам предложат выбрать группу в которую вы хотите добавить бота.

          Your bot will receive a message from that user in this format:
          /start PAYLOAD
          PAYLOAD stands for the value of the start or startgroup parameter that was passed in the link.


          Как только пользователь нажмет Start или добавит бота в группу, бот доставит Вам сообщение (через webhook или getupdates) «/start PAYLOAD», где PAYLOAD — это параметр переданный в ссылке.

          А вот дальше (https://core.telegram.org/bots#deep-linking-example) я не разобрался и ничего не понял.
          Если кто-то переведет и объяснит — буду благодарен.

          Но вот про «создание_ботом_новых_чатов» я в API ничего не нашел…
          • 0
            Благодарю за объяснение.

            > А вот дальше (https://core.telegram.org/bots#deep-linking-example) я не разобрался и ничего не понял.
            Пример совершенно дурацкий — я тоже не сразу допер зачем же мне предлагают подключать memcache к телеграму. :)
            На самом деле надо выкинуть все, что касается этого мемкеша, base64 и сразу становится понятно.

            Задача: мы хотим авторизовать пользователя через телеграм.
            1. Даем ему ссылку на нашего бота, в ссылку зашиваем рандомный ключ авторизации — тот самый PAYLOAD.
            2. Пользователь тыкает на эту ссылку — у него откроется окно нашего бота. Внизу чата вместо поля для ввода текста у пользователя будет кнопка Start. Нажав ее, пользователь отправит боту сообщение /start PAYLOAD.
            3. Бот получает сообщение:
            {
                     "message" : {
                        "text" : "/start PAYLOAD",     //    <--------
                        "date" : 1438985300,
                        "message_id" : 16,
                        "from" : {
                           "first_name" : "Habra",
                           "id" : 110304546,           //    <---------
                           "last_name" : "User"
                        },
                        "chat" : {
                           "id" : 110304546,
                           "first_name" : "Habra",
                           "last_name" : "User"
                        }
                     },
                     "update_id" : 10336636
                  }
            

            4. По PAYLOAD понимаем кто именно из пользователей к нам пришел. Извлекаем id юзера, сохраняем себе в БД для аутентификации пользователя в будущем.
      • 0
        Я с Вами полностью согласен, это пожалуй единственная крупная проблема, которая мешает комфортно работать.
        Красивых решений я пока не нашел. В текущей версии API — Бот создавать комнаты не может.

        Вижу пару некрасивых решений:
        1) оставить как есть и ждать доработок API
        2) регистрировать на каждый проект десять+ ботов, чтобы распределять по ним чат

        Если у Вас есть идеи, как можно решить эту проблему — буду рад услышать :)
        • 0
          Я был бы даже не против, если бы не бот, а человек сам создавал комнаты с подачи бота. Причем реализовать это очень просто, добавив параметры к запуску бота. Например, так:

          https://telegram.me/Bot?startnew=PAYLOAD&title=Title+of+new+chat.

          Пользователю придет команда на запуск отдельного чата с заданным заголовком с нашим же ботом.
          Тем самым мы оставляем контроль за пользователем — бот все так же не может открыть новый чат с пользователем или написать ему первым, не может потихоньку переименовать комнату чата, чтобы пользователь по ошибке написал туда что-то ненужное. Можно даже сделать, чтобы все такие чаты имели заголовок вида «ИмяБота: Title+of+new+chat.» — тем самым сразу понятно по заголовку и картинке с каким именно ботом идет общение.

          Как написать тикет с предложением в телеграм? :)
        • 0
          > 1) оставить как есть и ждать доработок API
          Или попросить добавить.
          Доработка минимальная, полностью укладывается в их стратегию.

          > 2) регистрировать на каждый проект десять+ ботов, чтобы распределять по ним чат
          После 20-го вам BotFather ответит )
          • 0
            Поможете сформулировать текст обращения к разработчкам Telegram?
            Даже не знаю, как подступиться, ведь у них наверняка есть свой план развития…
  • 0
    Полностью переписал бота, теперь работает более стабильнее, теперь можно выбирать между sqlite и mysql

    В планах:
    — админ-панель со статистикой
    — работа через webhook

    https://github.com/Surzhikov/TelegramSiteHelper
  • 0
    У нас давно было нечто подобное с работой через аську.
    Отлично работало с кучей клиентов, когда для каждого клиента генерился ID и бот воспринимал ответ вида ID сообщение клиенту
    • 0
      Круто!
      Я когда-то пытался такую штуку на базе ICQ сделать, но во времена ICQ — мне еще не хватало знаний и умений для этого.
  • 0
    сыроват вариант. начал ловить 504.

    [25-Oct-2015 15:09:58] [pool *****] pid 66509
    script_filename = /usr/home/*****/www/bot/tbGetMessages.php
    [0x0000000801821938] usleep() /usr/home/*****/www/bot/tbGetMessages.php:79
  • 0
    А собственно, какие преимущества делать интерфейс сервиса через telegram бота, вместо обыкновенного веб сайта адаптированного для мобильного?
    Я пытаюсь их увидеть и пока вижу только, что бот имеет id user'a в telegram и потом владелец бота может контактировать с ним.
    Интересно, может ли бот произвольно написать юзеру с которым когда-то общался?
    Это было бы аналогом Android notification's

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