Как подключить Telegram-уведомления о событиях на сайте?

На прошлой неделе мне показали сервис, который переносит веб-чаты в Телеграм. То есть, например, пишет тебе клиент на сайте, а сообщения ты получаешь в мессенджер. Re:plain запустили примерно месяц назад, и мне он показался интересным. Если мы все живём в нашем уютном Телеграм, решил рассказать вам про него.

Зачем нужна поддержка на сайте через чат?

Чат на сайте нужен, чтобы уменьшить расстояние между вами и вашей целевой аудиторией. В 2К18 просить человека стучаться на почту нужно лишь в одном случае: если вы хотите отфильтровать народ и выбрать самых инициативных. Ну, а если вы нуждаетесь друг в друге в равной степени или даже вы больше, чем гость сайта, то нужно максимально упростить контакт.

Чат жизненно необходим, если вы предприниматель малого бизнеса — у вас есть интернет-магазин, салон красоты, вы в сфере услуг (юридические и бухгалтерские, коучинг), у вас персональный сайт, блог, дизайн-студии и так далее. Одним словом, вы тот, кому нужно живое и оперативное общение с клиентами на сайте. Написавший через веб-чат клиент, чаще других «конвертится» в реального покупателя.

При чём тут Re:plain?

Это удобно! Если вы подпадаете под человека, которого я описал выше, то вам не нужен сложный функционал. У вас есть любимый Телеграм, в котором решаются почти все проблемы, и чатиться с клиентами из сайта тоже хочется в мессенджере.

Да, есть много сервисов конкурентов (Jivosite, Intercom, Drift, Chatra, Carrot и другие), которые предлагают глубокий анализ купли-продажи, работу менеджеров, строят сложные диаграммы, просят купить подписку за $50. Но вам это зачем? Вы не крупная компания, вам этого не надо.

Преимущества Re:plain

Удобство и простота. Я уже пользуюсь Телеграм. Мне привычнее решать свои дела в мессенджере. Мне не нужно устанавливать отдельный софт, как в случае с другими похожими сервисами, засоряя память устройства.

Легко подключить. Не нужно никаких «абракадабра». Есть бот. Немного с ним пообщаться, разобраться, кастомизировать окно будущего чата для сайта, скопировать сгенерированный ботом код, встроить в сайт (если сами не понимаете, попросить помощь друга).

Неограниченное количество сайтов и операторов. Вы действительно можете подключить столько сайтов и операторов, сколько захотите. Клиент напишет, все операторы увидят сообщение и ответит кто-то один. Далее уже общение продолжится только с ним. И это…

Бесплатно. Это большой плюс, потому что аналоги просят купить премиум-версию после испытательного срока. Если вам не хочется тратить лишних 50 долларов в месяц, велкам.

Функционал. Тут, конечно, нет глубокого анализа и стопицот экзотических функций (которыми почти никто не пользуется), но есть самое необходимое. Например, кастомизация и шаблоны с готовыми ответами на частые вопросы клиентов.

• 
  Читайте также:

  Топ 14 лучших курсов с носителями английского языка онлайн - Все Курсы Онлайн

Мультиязычность. Сервис поддерживает восемь разных языков! Все основные международные и другие: вплоть до индонезийского и даже персидского языка.

Если вам нужен быстрый контакт со своей аудиторией, если вы не крупная международная компания, если не нуждаетесь в сложном функционале, если любите простоту и решать все дела через свой любимый мессенджер, то выбор только один — Re:plain.

Показать / скрыть категории

Разделы

• Все
• Блог 21
• Начало работы 12
• Интернет магазин 18
• Домены 9
• Заявки и заказы 5
• Продвижение сайтов 8
• Интеграции 26
• Повышение конверсии 4
• Тарифы и оплата 4
• Редактор конструктора 24
• Технические вопросы и частые ошибки 109
• Другие вопросы 8
• Создание сайтов 50
• Копирайтинг 35
• Интернет маркетинг 187
• Бизнес обучение 70
• Заработок в интернете 54

Для того, чтобы подключить Телеграм на свой сайт, вы дожны установить их на свой смартфон или планшет. Сделать это можно в Google Play или Appstore.

После того, как вы скачали приложение запустите его и пройдите несложную регистрацию – вводите свой номер телефона и готово.

Теперь в поиске нам необходимо найти бота, который называется @TobizNotificationsBot (скриншот 1). Открываем чат с ним и нажимаем кнопку СТАРТ в нижней части экрана. После этого он сгенериурет нам специальный идентификатор (скриншот 2). Выглядит это все вот так:

Теперь заходим в настройки проекта в раздел “Уведомления о заявках”.

Здесь в середине нажимаем на “Интеграция с Telegram”. У нас открывается страница настройки Телеграм, куда нам нужно вписать полученный идентификатор и активировать галочку. Сохраняем настройки. 

Буквально сразу же нам на телефон пришло уведомление о том, что проект успешно подключен:

Теперь нам осталось только проверить работоспособность уведомлений. Давайте оставим какую-нибудь заявку на сайте. Нажимаем “Задать вопрос”, и сразу же нам на телефон приходит вот такое сообщение:

На этом настройка телеграм завершена. Приятного пользования!

Ищут также:

• Можно сделать так, чтобы приходило смс сообщение на мой телефон при новом заказе? – Нет, можно сделать, чтобы сообщения приходили в Телеграм. 

Если у вас возникают сложности с интеграцией данного сервиса, вы можете воспользоваться нашей платной услугой – Подключение Телеграма к сайту. 

Рассказать друзьям:

Всем – привет. Давно зрела идея разобраться с отправкой данных из формы на сайте в мессенджер Telegram, но руки не доходили, а моментально получать заявки прямо в телефон, ой как хотелось!

И вот, наконец-то посидел и разобрался. Конечно постичь все тонкости API – не удалось, но по кусочкам насобирал информацию и удалось отправить данные из контактной формы в чат Telegram. 

Это актуализированная статья, в которой решены такие проблемы, как отправка фото и пропадающий символ «+», который не приходил в сообщение и из-за этого номер телефона был некликабельным. Появилась возможность не просто отправлять 1 фото, а сразу несколько файлов, в том числе PDF, docx и любых других.

Важно: для отправки файла из формы в Телеграм на вашем сервере должен быть включен cURL. Обратитесь к техподдержке вашего хостинга, они подскажут что делать и как включить. У многих он включен по умолчанию. Например, на моем хостинге Beget – так.

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

Итак, давайте приступим. Первое что нам нужно – это создать своего бота. Делается это достаточно просто. В поиске наберите @botfather, откройте родительского бота и нажмите “Start”:

Далее:

• Пишем команду /newbot, для создания нового бота.
• Придумываем имя бота.
• Придумываем ник бота.

Если все прошло успешно, то увидите поздравления и токен вашего бота, в моем случае это:

341996777:AAHbnuvQib-vHU47i-6hbUrCU9D-qHYekxc

Теперь нужно найти своего бота в поиске, указав его ник и нажать “Start”, чтобы активировать его. В моем случае ник @DWS_MESSAGE_bot.

После этого можно пойти двумя путями:

1. создать групповой чат, в который будут приходить заявки и пригласить туда нашего бота;
2. вступить в переписку с ботом и получать личные сообщения от него.

Давайте займемся этим и, пока, пойдем по первому пути.

Зайдите в меню, нажмите “New Group” (“Создать группу”) и задайте имя вашему чату.

Не забываем пригласить своего бота в чат. Откройте меню чата, перейдите в “Add Members” (“Добавить участников”) и введите имя своего бота.

На данный момент у нас есть бот, мы знаем его токен, есть чат, в который будут приходить заявки, и нам осталось узнать только id чата. Для этого, напишем в чате:

• /join @ник_бота

А затем перейдите в браузер, если используете приложение и введите:

 https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates 

где, XXXXXXXXXXXXXXXXXXXXXXX – токен вашего бота, полученный ранее.

Если все сделали правильно, то перед вами откроется подобная страница:

Нас интересует объект “chat”:{“id”:-209253141. — Это id моего тестового чата. На данном этапе у нас есть все, чтобы отправлять текстовые сообщение из контактной формы на сайте в Telegram. Давайте займемся реализацией PHP-обработчика нашей формы, и сделаем разметку самой формы.

Кстати, если не хотите создавать группу, то можете получать личные сообщения от бота. Просто напишите своему боту /join @ник_бота, а потом, в браузере наберите https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates. Как и в первом случае, нужно просто узнать id чата.

Разметка формы

Не стал выдумывать что-то сверхсложное, а просто 2 поля и возможность прикрепить файл. Оставил телефон, ведь у многих возникала проблема с символом “+”, а файл добавил, так как меня просили разобраться с этой темой, при этом, теперь можно вставлять несколько штук.

Добавил стили – получилось примерно так (внешний вид в исходнике немного отличается):

Не забывайте, что форма отправляется без перезагрузки страницы, а значит используется ajax, и, для упрощения, jQuery. Поэтому подключаем сам jQuery, если не подключен, а после, и сам скрипт. Я сделал специальную папку telegramform, которую нужно поместить в корень сайта. Если нужно, сделаю исходник без использования jQuery.

Код с AJAX запросом. Файл – telegramform.js

 (function ($) {   $(".contact-form").submit(function (event) {     event.preventDefault();      // Сообщения формы     let successSendText = "Сообщение успешно отправлено";     let errorSendText = "Сообщение не отправлено. Попробуйте еще раз!";     let requiredFieldsText = "Заполните поля с именем и телефоном";      // Сохраняем в переменную класс с параграфом для вывода сообщений об отправке     let message = $(this).find(".contact-form__message");      let form = $("#" + $(this).attr("id"))[0];     let fd = new FormData(form);     $.ajax({       url: "/telegramform/php/send-message-to-telegram.php",       type: "POST",       data: fd,       processData: false,       contentType: false,       beforeSend: () => {         $(".preloader").addClass("preloader_active");       },       success: function success(res) {         $(".preloader").removeClass("preloader_active");          // Посмотреть на статус ответа, если ошибка         // console.log(res);         let respond = $.parseJSON(res);          if (respond === "SUCCESS") {           message.text(successSendText).css("color", "#21d4bb");           setTimeout(() => {             message.text("");           }, 4000);         } else if (respond === "NOTVALID") {           message.text(requiredFieldsText).css("color", "#d42121");           setTimeout(() => {             message.text("");           }, 3000);         } else {           message.text(errorSendText).css("color", "#d42121");           setTimeout(() => {             message.text("");           }, 4000);         }       }     });   }); })(jQuery); 

А теперь сам обработчик нашей формы. Файл – send-message-to-telegram.php:

    // Токен   const TOKEN = '341996777:AAHbnuvQib-vHU47i-6hbUrCU9D-qHYekxc';    // ID чата   const CHATID = '-209253141';    // Массив допустимых значений типа файла.   $types = array('image/gif', 'image/png', 'image/jpeg', 'application/pdf');    // Максимальный размер файла в килобайтах   // 1048576; // 1 МБ   $size = 1073741824; // 1 ГБ  if ($_SERVER["REQUEST_METHOD"] == "POST") {    $fileSendStatus = '';   $textSendStatus = '';   $msgs = [];      // Проверяем не пусты ли поля с именем и телефоном   if (!empty($_POST['name']) && !empty($_POST['phone'])) {          // Если не пустые, то валидируем эти поля и сохраняем и добавляем в тело сообщения. Минимально для теста так:     $txt = "";          // Имя     if (isset($_POST['name']) && !empty($_POST['name'])) {         $txt .= "Имя пославшего: " . strip_tags(trim(urlencode($_POST['name']))) . "%0A";     }          // Номер телефона     if (isset($_POST['phone']) && !empty($_POST['phone'])) {         $txt .= "Телефон: " . strip_tags(trim(urlencode($_POST['phone']))) . "%0A";     }          // Не забываем про тему сообщения     if (isset($_POST['theme']) && !empty($_POST['theme'])) {         $txt .= "Тема: " . strip_tags(urlencode($_POST['theme']));     }      $textSendStatus = @file_get_contents('https://api.telegram.org/bot'. TOKEN .'/sendMessage?chat_id=' . CHATID . '&parse_mode=html&text=' . $txt);       if( isset(json_decode($textSendStatus)->{'ok'}) && json_decode($textSendStatus)->{'ok'} ) {       if (!empty($_FILES['files']['tmp_name'])) {                $urlFile =  "https://api.telegram.org/bot" . TOKEN . "/sendMediaGroup";                      // Путь загрузки файлов           $path = $_SERVER['DOCUMENT_ROOT'] . '/telegramform/tmp/';                      // Загрузка файла и вывод сообщения           $mediaData = [];           $postContent = [             'chat_id' => CHATID,           ];                  for ($ct = 0; $ct < count($_FILES['files']['tmp_name']); $ct++) {             if ($_FILES['files']['name'][$ct] && @copy($_FILES['files']['tmp_name'][$ct], $path . $_FILES['files']['name'][$ct])) {               if ($_FILES['files']['size'][$ct] < $size && in_array($_FILES['files']['type'][$ct], $types)) {                 $filePath = $path . $_FILES['files']['name'][$ct];                 $postContent[$_FILES['files']['name'][$ct]] = new CURLFile(realpath($filePath));                 $mediaData[] = ['type' => 'document', 'media' => 'attach://'. $_FILES['files']['name'][$ct]];               }             }           }                  $postContent['media'] = json_encode($mediaData);                  $curl = curl_init();           curl_setopt($curl, CURLOPT_HTTPHEADER, ["Content-Type:multipart/form-data"]);           curl_setopt($curl, CURLOPT_URL, $urlFile);           curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);           curl_setopt($curl, CURLOPT_POSTFIELDS, $postContent);           $fileSendStatus = curl_exec($curl);           curl_close($curl);           $files = glob($path.'*');           foreach($files as $file){             if(is_file($file))               unlink($file);           }       }       echo json_encode('SUCCESS');     } else {       echo json_encode('ERROR');       //        // echo json_decode($textSendStatus);     }   } else {     echo json_encode('NOTVALID');   } } else {   header("Location: /"); } 

Во многом он повторяет обработчик из других форм на блоге. Например, в статье “Создание формы обратной связи” используется аналогичный подход, и вы легко сможете осуществить отправку данных как на почту, так и в мессенджер одновременно. Но помните, что это все тестовый, учебный пример и в реальной жизни можно сделать намного больше проверок.

Тут стоит обратить внимание на константы TOKEN и CHATID. Не забывайте подставить туда свои данные. Чтобы принимать какой-то определённый тип файла, поместите его в “Массив допустимых значений типа файла.” Из популярных можно выделить:

.jpeg .jpg	image/jpeg
.csv	text/csv
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.svg	image/svg+xml
.txt	text/plain
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.png	image/png
.pdf	application/pdf

При этом файлы будут приходить общим потоком, одним сообщением. Если тип файла не проходит проверку, то он просто не отправляется. Специально не прерываю отправку, так как для большинства важно получить хотя бы контакты для связи, чтобы не потерять лида. Больше типов файлов тут.

Вот так выглядит отправка сообщения:

Не стал делать каких-то серьезных валидаций, так как это просто пример и вам наверняка нужно будет не только отправка текста или картинки в Телеграм, но и на почту, а значит все равно подстраивать под свои нужды. Если будут вопросы и замечания – пишите в комментариях.

Видеопример:

Вот так, средствами PHP можно отправлять в Telegram сообщения и файлы. Если вы используете CMS MODX, то на блоге igamov.ru есть отличная инструкция по интеграции формы с мессенджером.

Исходник для отправки данных формы в Телеграм

Размер: 0,008

Скачать исходник Ссылка на скачивание появится через сек. А пока, поддержи, пожалуйста, лайком! Скачать исходник

Кстати, подписывайтесь на Telegram канал. Уведомления об обновлениях на блоге, в первую очередь, приходят туда).

Разработка веб-сайтов * Из песочницы

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

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

Как добавить виджет Telegram на сайт

Недавно отгремела первая битва за Telegram и по её итогам мы пока можем продолжать свободно пользоваться мессенджером от Павла Дурова. Так что можно и рассказать о том, как встроить виджет Telegram на свой сайт.

UPD: Этот сервис давно стал платным, но появились и другие варианты добавления виджета, которые к тому же обходят блокировку мессенджера. Читаем про сервис Journalist и не забываем подписываться на мой канал про технологии!

В самом Telegram я таких возможностей не нашёл, так что пришлось обратиться к стороннему сервису Telegram Widget. Это виджет для сайта, который может показывать ссылку на канал или чат и ленту последних сообщений. Новые сообщения подгружаются в режиме реального времени. Виджет имеет некоторые настройки: показ сообщений по одному или нескольким тегам, показ сообщений от одного или более авторов.

Как установить виджет к себе на сайт:

1. Настроить канал или чат. Для канала в Telegram необходимо задать название, которое будет повторять ссылку на него. То есть, если ссылка на мой канал: https://t.me/proitru, то название канала должно быть «proitru». После подключения виджета канал можно переименовать. Чат необходимо сделать супергруппой (supergroup), затем пригласить в него бота @tgwidget_bot.

2. Зарегистрироваться на сайте и добавить свой канал или чат.

3. Выбрать нужный виджет и добавить его на сайт.

Готово!

Telegram Widget

Спасибо, что читаете! На данный момент большинство моих заметок, статей и подборок выходит в telegram канале «Левашов». Обязательно подписывайтесь, чтобы не пропустить новости мира ИТ, полезные инструкции и нужные сервисы.

Респект за пост! Спасибо за работу!

Хотите больше постов в блоге? Подборок софта и сервисов, а также обзоры на гаджеты? Сейчас, чтобы писать регулярно и радовать вас большими обзорами, мне требуется помощь. Чтобы поддерживать сайт на регулярной основе, вы можете оформить подписку на российском сервисе Boosty. Или воспользоваться ЮMoney (бывшие Яндекс Деньги) для разовой поддержки:

Заранее спасибо! Все собранные средства будут пущены на развитие сайта. Поддержка проекта является подарком владельцу сайта.