Подключение Telegram к вашему сайту
Telegram — это один из крупнейших сервисов для обмена сообщениями. Одной из ведущих функций Telegram являются боты — инструменты, благодаря которым вы можете выполнять различные действия, не выходя из приложения. Так, вы можете подключить контактную форму на сайте к боту в Telegram, чтобы автоматически отправлять все заявки в месседжер и использовать ваше любимое приложение для получения уведомлений Вашего Магазина в режиме реального времени.
Важно: эта опция доступна только для сайтов с платными подписками.
Подключение Телеграм к контактной форме
Шаг 1. Доступ к ID чата
Зарегистрируйтесь или войдите в уже существующий аккаунт в Telegram.
Введите в поисковой строке Telegram @site_notify_bot, откройте Form Notification Bot :
Для инициализации бота, отправьте сообщение /start или нажмите на кнопку Start :
Скопируйте отправленный вам в чате ID :
Примечание: ID чата от вашего аккаунта в Telegram должен быть уникальным (ID, который показан на скриншоте выше, используется исключительно как пример).
Шаг 2. Завершение подключения
Зайдите в настройки сайта, откройте вкладку Управление формами (1) и перейдите к Интеграциям (2):
Кликните на поле Telegram , введите полученный вами ранее ID чата и нажмите на кнопку Подключить , чтобы установить соединение вашей формы с ботом:
Затем, перейдите во вкладку Интеграции в настройках формы в редакторе и включите опцию Telegram :
Не забудьте опубликовать свой сайт, чтобы изменения вступили в силу.
Готово! Если всё настроено правильно, вы получите следующее уведомление от бота в Telegram:
Подключение Telegram к Вашему Магазину
Шаг 1. Получение ID чата
Примечание: если вы уже подключили Telegram к контактной форме на сайте, преходите к Шагу 2 и используйте тот же ID чата, что использовался для интеграции формы с Telegram.
Зарегистрируйтесь или войдите в уже существующий аккаунт в Телеграм.
Введите в поисковой строке Telegram @site_notify_bot, откройте Form Notification Bot :
Для инициализации бота, отправьте сообщение /start или нажмите на кнопку Start :
Скопируйте отправленный вам в чате ID :
Шаг 2. Завершение подключения
Откройте настройки сайта и перейдите в Настройки во вкладке Ваш магазин :
Откройте вкладку Уведомления , вставьте полученный ID чата и нажмите Подключить :
Опубликуйте свой сайт для того, чтобы изменения вступили в силу.
Теперь когда покупатель оставляет заказ на вашем сайте, вы будете получать следующее уведомление от бота:
Обновлено на: 09/12/2022
Была ли эта статья полезна?
Отправка заявок с сайта в Telegram
В наши дни очень трудно представить сайт, на котором не было бы формы обратной связи, это наиболее привычный способ обратится в Вашу компанию с вопросом, заказать товар или услугу. Благодаря API Telegram можно довольно просто и быстро настроить отправку этих данных в специальный чат Telegram. Работать с почтой менее удобно нежели с привычным мессенджером, заявки поступаю очень быстро и удобно.
Создаем бота и чат для заявок
- Находим в поиске контактов бота @BotFather, в переводе буквально это «отец» ботов, с помощью него мы создадим нашего бота.
- Нажимаем кнопку «Start» и начинаем отдавать команды боту
- Первая команда — /newbot — создаем нового бота
- Далее отец 🙂 просит придумать нас имя для бота (будьте внимательны, нужно обязательно уникальное имя)
- Следующее требование — это придумать «User name» для нашего бота, которое должно обязательно заканчиваться на «bot», и приводится пример
- Если имена придуманы уникальные и все сделано правильно мы увидим следующее сообщение, которое содержит наш «token»
- Теперь создаем групповой чат (New Group), называем например «Заявка с сайта» и добавляем в него нашего бота командой «/join @conv24_bot» (В вашем случае название бота естественно другое)
- Далее необходимо нажать на название нашего бота (перейти в личную переписку) и нажать «Start», на этом подготовка Telegram временно закончена
Теперь переходим к созданию нашей формы обратной связи на самом сайте. Ниже представлен простейший пример которого достаточно для работы, стилизовать форму можно естественно как угодно.
- Атрибут action ссылается на обработчик нашей формы (необходимо создать файл telegram.php)
- Отправка формы осуществляется методом «POST»
Создаем обработчик нашей формы
Нам необходимо сначала записать все данные в переменные для удобства работы
Для получения $chat_id необходимо выполнить небольшую манипуляцию, в браузерной строке необходимо ввести следующий url: api.telegram.org/botХХХХХХ. /getUpdates заменив при этом символы ХХХХХХ. на полученный «token», в браузере отобразится вся нужная информация, в пункте «chat» находим наш id
Ниже привожу код обработчика, обратите внимание, Telegram внесен в реестр запрещенных сайтов на территории РФ, поэтому обращаться к HTTP API мы будем через PHP расширение «CURL» с использованием Proxy сервера
trim ( strip_tags ( $_POST [ ‘user_name’ ] ) ) , «Телефон клиента: » => trim ( strip_tags ( $_POST [ ‘user_phone’ ] ) ) , «Email клиента: » => trim ( strip_tags ( $_POST [ ‘user_email’ ] ) ) , ] ; // Создаем строку со всеми данными от клиента для передачи API Telegram foreach ( $arr as $key => $value ) < $txt .= "
» . $key . «
» . $value . «%0A» ; > $url = «https://api.telegram.org/bot < $token >/sendMessage?chat_id= < $chat_id >&parse_mode=html&text= < $txt >» ; $proxy = «67.154.111.452:3128» ; $ch = curl_init ( ) ; curl_setopt ( $ch , CURLOPT_URL , $url ) ; // url на который осуществляется отправка // тестового запроса работает через https // поэтому нужно добавить флаги для работы с ssl curl_setopt ( $ch , CURLOPT_SSL_VERIFYPEER , 0 ) ; curl_setopt ( $ch , CURLOPT_SSL_VERIFYHOST , 0 ) ; // Подключение к прокси серверу curl_setopt ( $ch , CURLOPT_PROXY , $proxy ) ; // если требуется авторизация // curl_setopt($ch, CURLOPT_PROXYUSERPWD, $proxyauth); // отправка запроса curl_setopt ( $ch , CURLOPT_FOLLOWLOCATION , 1 ) ; curl_setopt ( $ch , CURLOPT_RETURNTRANSFER , 1 ) ; curl_setopt ( $ch , CURLOPT_HEADER , 1 ) ; $curl_scraped_page = curl_exec ( $ch ) ; curl_close ( $ch ) ; // Конец обращения к Telegram API
Благодарю всех за внимание, если остались какие либо вопросы, задавайте на почту info@conversite.ru
Интеграция Google Forms и Telegram: настраиваем автоматическую выгрузку данных
Хотите получать каждый новый ответ из Гугл форм в виде личного сообщения в своем мессенджере? Коннектор ApiX-Drive поможет все настроить за несколько минут и без единой строчки кода.
Зачем нужна интеграция Google Forms и Telegram
Google Forms — популярный сервис для получения данных от аудитории. С его помощью можно собирать заказы и лиды, проводить опросы, получать обратную связь и так далее.
Благодаря интеграции Google Forms и Telegram все собранные через формы данные будут автоматически отправляться в мессенджер. Работает это так: как только новый пользователь отвечает в форме, специальный Telegram-бот присылает вам его ответ в виде личного сообщения. Оно может содержать данные по всем или только некоторым вопросам формы— настраивайте на свое усмотрение.
Такая интеграция может принести существенную пользу бизнесу. Во-первых, вы избавите себя от лишних действий. Ведь данные будут сами приходить в личные сообщения и вам не придется тратить время и силы на проверку форм.
Во-вторых, все оставленные пользователями ответы будут попадать к вам максимально оперативно. Так что если захотите получать таким образом заказы или лиды, то сможете быстро реагировать на новые ответы и перестанете терять клиентов, которые не любят ждать.
Создаем интеграцию с помощью коннектора ApiX-Drive
Один из самых простых способов настроить интеграцию Google Forms и Telegram — с помощью коннектора ApiX-Drive. Эта платформа позволяет быстро подключать различные сервисы друг к другу и настраивать передачу данных между ними. Процесс очень простой и занимает в среднем до 15 минут.
Прямое подключение между Google Forms и Telegram пока отсутствует. Но это легко решить, задействовав интеграцию через Google Sheets. Для этого нужно сначала включить в настройках формы автоматический экспорт полученных через формы ответов в таблицу, а затем подключить эту таблицу к мессенджеру с помощью коннектора.
В результате ответы из Google Forms сначала будут попадать в таблицу Google Sheets, а затем и в мессенджер. Вы даже не будете замечать, что данные передаются не напрямую.
Чтобы вам было проще во всем разобраться, ниже мы подробно рассмотрим создание интеграции шаг за шагом.
Настраиваем Google Forms
На этом этапе мы сделаем так, чтобы все ответы пользователей автоматически сохранялись в таблице Google Sheets.
Итак, открываем нашу форму на сайте Google Forms. Если формы у нас еще нет, создаем новую и добавляем в нее список необходимых вопросов.
Переходим на вкладку «Ответы», кликаем справа на троеточие и выбираем «Сохранять ответы. ».
Вводим название таблицы, в которую Google Forms будет автоматически сохранять ответы, и кликаем «Создать».
Чтобы посмотреть созданную таблицу, нужно нажать на зеленую кнопку.
Выглядеть эта таблица будет примерно так.
Настраиваем Google Sheets
На втором этапе мы воспользуемся онлайн-коннектором, чтобы настроить аккаунт Google Sheets для автоматической выгрузки ответов из таблицы в Telegram.
Свяжите сервисы между собой без программистов за 5 минут!
Как настроить выгрузку новых квизов из Marquiz в GetCourse?
Как настроить выгрузку новых заказов из CS-Cart в МойСклад?
Выбираем Google Sheets в качестве источника данных.
Ответ каждого пользователя попадает в отдельную строку таблицы. Чтобы коннектор выгружал все будущие ответы из таблицы, выбираем «Загрузить строки (новые)».
Кликаем «Подключить аккаунт «Google Sheets» и выбираем учетную запись, в которой мы ранее создали таблицу для ответов. При необходимости вводим логин и пароль для авторизации.
Выбираем ранее созданную таблицу (файл) и лист, предназначенные для хранения ответов. Ниже указываем, начиная с какой строки коннектор будет загружать данные в Telegram. Поскольку в нашей таблице ответы будут появляться со второй строчки, выбираем 2.
При необходимости настраиваем фильтр данных. С его помощью можно задать правила, которые будут пропускать только те ответы, которые соответствуют определенным условиям. Например, содержат заданное ключевое слово. Используйте фильтрацию, если хотите отсеять лишние данные.
Если в таблице уже есть ответы, данные одного из них появятся на экране для проверки. Если ничего не отображается: отправляем через форму любую информацию, возвращаемся к настройке коннектора и кликаем «Загрузить тестовые данные из Google Sheets».
Настраиваем Telegram
На третьем этапе мы воспользуемся коннектором, чтобы настроить прием выгруженных из таблицы ответов в Telegram.
Кликаем «Начать настройку Приема Данных».
Выбираем «Телеграм» в качестве приемника данных.
Выбираем действие, которое коннектор будет совершать на стороне мессенджера. Чтобы система отправляла нам ответ каждого пользователя в виде отдельного Telegram-сообщения, выбираем «Отправить сообщение».
Кликаем «Подключить аккаунт «Телеграм», чтобы подключить бота.
Выполняем небольшую инструкцию по подключению Telegram-бота, через который коннектор будет присылать нам сообщения.
Теперь формируем шаблон сообщения. Для этого кликаем по текстовому полю и выбираем из выпадающего списка данные, которые коннектор будет отправлять нам из каждого ответа. Данные можно подписывать любым текстом.
На экране должен появиться пример сообщения, составленного на основе нашего шаблона. Кликаем «Отправить тестовые данные в Телеграм», чтобы проверить доставку сообщения в мессенджер.
Если все сделано правильно, нам должно прийти сообщение с данными из формы. Если его нет, проверяем правильность предыдущих шагов настройки.
Запускаем передачу данных
На четвертом, завершающем, этапе активируем интеграцию Google Forms и Telegram, чтобы запустить автоматическую выгрузку данных.
Кликаем «Включить обновление» для запуска интеграции.
Нажимаем на шестеренку и выбираем интервал, с которым коннектор будет проверять наличие новых ответов в формах. Чем он меньше, тем быстрее мы сможем узнавать о новых данных.
Вот и все. После этого ApiX-Drive станет автоматически выгружать данные из Форм Гугл в Telegram. Созданную интеграцию можно в любой момент перенастроить, удалить или приостановить. Удачи в работе!
Заключение: интеграция Google Forms и Telegram — это просто
- Интеграция между Google Forms и Telegram позволяет настроить автоматическую выгрузку новых ответов из форм в мессенджер.
- Такой поход может принести существенную пользу бизнесу. Так, вы избавите себя от необходимости проверять формы вручную и сможете быстро реагировать на ответы пользователей.
- Создать такую интеграцию можно без технических знаний и всего за несколько минут. Сначала нужно включить в настройках формы автоматический экспорт ответов в таблицу Google Sheets. Затем остается лишь подключить эту таблицу к Telegram с помощью коннектора ApiX-Drive.
- В результате ответы будут попадать сначала в таблицу а затем в мессенджер. Но вы даже не будете замечать, что данные передаются не напрямую.
Как связать форму на сайте с Telegram
Всем — привет. Давно зрела идея разобраться с отправкой данных из формы на сайте в мессенджер Telegram, но руки не доходили, а моментально получать заявки прямо в телефон, ой как хотелось!
И вот, наконец-то посидел и разобрался. Конечно постичь все тонкости API — не удалось, но по кусочкам насобирал информацию и удалось отправить данные из контактной формы в чат Telegram.
Это актуализированная статья, в которой решены такие проблемы, как отправка фото и пропадающий символ «+», который не приходил в сообщение и из-за этого номер телефона был некликабельным. Появилась возможность не просто отправлять 1 фото, а сразу несколько файлов, в том числе PDF, docx и любых других.
Важно: для отправки файла из формы в Телеграм на вашем сервере должен быть включен cURL. Обратитесь к техподдержке вашего хостинга, они подскажут что делать и как включить. У многих он включен по умолчанию. Например, на моем хостинге Beget — так.
Как отправить данные формы на сайте в Telegram
Итак, давайте приступим. Первое что нам нужно — это создать своего бота. Делается это достаточно просто. В поиске наберите @botfather, откройте родительского бота и нажмите «Start»:
- Пишем команду /newbot, для создания нового бота.
- Придумываем имя бота.
- Придумываем ник бота.
Если все прошло успешно, то увидите поздравления и токен вашего бота, в моем случае это:
Теперь нужно найти своего бота в поиске, указав его ник и нажать «Start», чтобы активировать его. В моем случае ник @DWS_MESSAGE_bot.
После этого можно пойти двумя путями:
- создать групповой чат, в который будут приходить заявки и пригласить туда нашего бота;
- вступить в переписку с ботом и получать личные сообщения от него.
Давайте займемся этим и, пока, пойдем по первому пути.
Зайдите в меню, нажмите «New Group» («Создать группу») и задайте имя вашему чату.
Не забываем пригласить своего бота в чат. Откройте меню чата, перейдите в «Add Members» («Добавить участников») и введите имя своего бота.
На данный момент у нас есть бот, мы знаем его токен, есть чат, в который будут приходить заявки, и нам осталось узнать только id чата. Для этого, напишем в чате:
А затем перейдите в браузер, если используете приложение и введите:
https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates
где, XXXXXXXXXXXXXXXXXXXXXXX — токен вашего бота, полученный ранее.
Если все сделали правильно, то перед вами откроется подобная страница:
Кстати, если не хотите создавать группу, то можете получать личные сообщения от бота. Просто напишите своему боту /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:
// Номер телефона 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)->) && json_decode($textSendStatus)-> ) < 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 |
| application/pdf |
При этом файлы будут приходить общим потоком, одним сообщением. Если тип файла не проходит проверку, то он просто не отправляется. Специально не прерываю отправку, так как для большинства важно получить хотя бы контакты для связи, чтобы не потерять лида. Больше типов файлов тут.
Вот так выглядит отправка сообщения:
Не стал делать каких-то серьезных валидаций, так как это просто пример и вам наверняка нужно будет не только отправка текста или картинки в Телеграм, но и на почту, а значит все равно подстраивать под свои нужды. Если будут вопросы и замечания — пишите в комментариях.
Вот так, средствами PHP можно отправлять в Telegram сообщения и файлы. Если вы используете CMS MODX, то на блоге igamov.ru есть отличная инструкция по интеграции формы с мессенджером.
Исходник для отправки данных формы в Телеграм