отправка формы с сайта в telegram

Надоевшая почта или как отправлять сообщения с сайта в Telegram через Node.js (Express)

После нескольких писем, отправленных с сайта себе на почту, понял что это достаточно неудобно, не современно (возможно), как минимум не прикольно. Задался целью отказаться от использования smtp для формы в пользу api Телеграма.

Так как мое приложение работает на ноде, подумал почему бы не прокачать форму. Общая логика до боли проста. При отправке формы делается запрос к api приложения, где хранится токен бота, обрабатываются данные и далее делается запрос к api телеграмма, который отправляет сообщение в чат.

Но давайте обо всем по порядку.

Для начала, естественно, необходимо создать бота, который будет получать данные из формы и отправлять вам. По сути, он является всего лишь посредником между вами и api телеграмма.

Итак, стучимся к родителю всех ботов, а именно к @BotFather и просим его создать нам одного (вводим /newbot). Вводим имя, ник и получаем токен бота. Как раз он нам и нужен. Заметьте, что ник бота должен быть _bot или Bot.

Создали, хорошо, но надо оживить его. Ищем его в поиске по нику и пишем /start. Все, теперь можем обращаться к нему через api.

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

Вводим /join @ник_бота в созданном чате, потому что бывает, что не добавляется в логи запись о приглашении бота в группу.

Идем в браузер и в адресной строке вводим:

где XXXXXXXXXXXXXXXXXXXXXXX — токен бота, который любезно дал вам @BotFather.

Отлично, получили токен бота и id чата, куда будут приходить сообщения.
Теперь давайте приступим к приложению.

Front

Начнем сначала с фронта.

Я использовал для работы Node обёртку Express, который в свою очередь умеет рендерить файлы различных шаблонизаторов. Решил воспользоваться Pug. Он достаточно прост в освоении, поэтому если впервые сталкиваетесь с ним, труда познакомится с ним не возникнет. Для примера не стал использовать сборщики, поэтому скрипты подключаются по старинке.
Структура приложения сгенерирована с помощью Express Generator.

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

Не забываем что в Pug вложенность элементов определяется отступами, как в питоне, так что учитывайте это.

Добавляем стили и вот такая форма у меня получилась.

Сообщение будет отправляться без перезагрузки страницы, поэтому вешаем обработчик на форму, собираем данные, преобразуем в json и отправляем их асинхронно себе в api + выводим сообщение о статусе запроса.

На стороне сервера для начала нужно отловить запрос со стороны клиента, для этого в роутере пишем:

Для упрощения процесса запроса установлен пакет ‘request‘.

Итак, что же здесь происходит?

В запросе мы передали json, поэтому на стороне сервера с данными можем работать как с обычным объектом.

Для удобства каждое значение объекта запихиваем в массив.
API телеграмма позволяет передать данные посредством текста в адресной строке, поэтому проходим по массиву и создаём длинную строку. Чтобы можно было передать HTML теги, необходимо закодировать строку в универсальный идентификатор (метод encodeURI()), чтобы не вылезала ошибка.

Теперь можно наконец отправить это всё на сервер телеграмма. Делаем запрос (нажимаем кнопку ‘Отправить’) и вуаля, сообщение отправлено. Не забываем обработать ответ, а то мало ли что.

После всех манипуляций, ответ приходит на фронт и уведомляет прошло все норм или не очень.
Из-за того, что для примера не использовал сборщик, а библиотечка всплывашки рассчитана на модульную сборку, пришлось немного поколхозить при ее вызове на фронте.

Если посмотреть в логи приложения на сервере, можно увидеть примерно следующее:

Поздравляю! Теперь вы знаете как отправлять сообщения с вашего сайта в Telegram.

Я описал только общую концепцию данного процесса, поэтому настоятельно рекомендую ознакомится с исходным кодом данного примера.

Источник

Форма обратной связи с отправкой письма в Телеграм. Отправка формы в телеграм

В новой записи я вам расскажу как создать форму обратной связи с отправкой письма в телеграмм. Для отправки письма мы будем использовать стандартные методы API от Telegram. Подробную информацию о методах вы можете посмотреть в официальной документации Telegram

Для того чтобы отправить письмо в телеграмм, нам необходимо сделать несколько последовательных действий.

1) Вам нужно авторизоваться в Telegram аккаунте

2) В поиске найти пользователя @BotFather

3) Отправить сообщение боту – /newbot

5) После этого дублировать название бота, но только суффиксом _bot

6) После успешной регистрации бота, @BotFather пришлёт вам сообщение с токеном, который вам нужно сохранить, в дальнейшем он нам понадобится.

7) Теперь нам нужно создать чат в который мы добавим нашего бота

8) Далее нам нужно получить id нашего бота. Для этого нужно перейти по следующей ссылке, где за место символов X нужно подставить ваш токен:
https://api.telegram.org/botXXXXXXXXXXXXXXXXXX/getUpdates
Не закрывайте эту страницу, после 9 пункта, её нужно будет обновить.

9) Теперь вам необходимо отправить команду /join в чат для активации бота. После отправки команды, вам нужно обновить страницу, чтобы сделать повторный запрос.

Здесь вам нужно записать следующий фрагмент кода – id вашего бота. Эту информацию тоже нужно записать.

Вам нужен id со знаком минус.

Теперь вам нужно создать форму обратной связи и отправить полученные данные по следующему URL:
https://api.telegram.org/bot /sendMessage?chat_id= &text=

Для отправки запроса, воспользуемся библиотекой Curl. Информацию по использованию данной библиотеке, вы можете получить в следующей записи – https://prog-time.ru/parsing-php-biblioteka-curl/

Создаём форму

Для примера я создал самую простую форму из 3 полей и кнопки. В качестве обработчика использую файл sendTelegram.php

Для примера давайте создадим простую форму из 3 полей: имя, email, телефон.

Источник

Заявки с сайта в Telegram с помощью Google Tag Manager

Подробное руководство по настройке отправки заявок с сайта в Telegram с помощью Google Tag Manager своими руками.

Чтобы проще было понять, о чем идет речь, я записал короткое видео демонстрации того, что мы будем учиться отслеживать:

Пользователь заходит к вам на сайт, оставляет заявку, и вы сразу получаете ее в Telegram. Реализовать это можно самостоятельно, без каких-либо финансовых затрат, используя только возможности Telegram, Google Spreadsheet и Google Tag Manager.

Какой практический смысл этой настройки?

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

Перед проведением 2 ноября 2020 года бесплатного вебинара на своем канале YouTube, на котором в режиме реального времени показывал данную настройку, я определил для себя несколько целей:

Полное видео трансляции можно посмотреть ниже:

Как это сделать?

Последовательность настройки отправки заявок с сайта в Telegram с помощью GTM сводится к нескольким простым шагам:

Давайте рассмотрим каждый шаг подробнее.

Создание Telegram-бота

Рекомендация: для удобства работы и тестирования установите десктопную версию Telegram.

Главный бот BotFather

Нажмите на кнопку Start или введите /start:

Вы увидите список команд для создания бота или управлениями текущими (уже созданными):

В списке есть команда /newbot. Данная функция позволяет создать нового бота. Вы можете прописать эту команду вручную в поле отправки сообщения или просто нажать на эту команду в списке:

Логин (username) Telegram-бота

Если логин занят, вам придет уведомление: Sorry, this username is already taken. Please try something different. Вам нужно будет придумать другой username для своего бота

Затем следует активировать бота. Чтобы это сделать, вам нужно найти его в поиске Telegram и нажать на Start:

Теперь необходимо получить chat id. Вставьте в браузер ссылку:

Источник

Как связать форму на сайте с Telegram

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

Как связать форму на сайте с Telegram

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

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

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

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

Зайдите в меню, нажмите «New Group» и задайте имя вашему чату.

Не забываем пригласить своего бота в чат.

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

А затем, в браузере введем:

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

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

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

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

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

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

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

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

Источник

Отправка сообщений в Telegram

Здравствуйте, дорогие друзья!

Сейчас мессенджеры играют важную роль в нашей жизни. Ведь все мы любим общаться 🙂

И вот одним из популярных мессенджеров является Telegram. На мой взгляд преимуществ у него много. И наверное каждый пользователь хотел бы получать сообщения с формы прямо в телеграмм! Ведь это круто, на дворе то уже 2017 год))

И как раз в данной статье я хочу показать Вам, как я настроил отправку сообщений с формы обратной связи в Telegram. Конечно всё это я реализовал для MODX, это не сложно реализовать и на каком-нибудь PHPMailer.

Схема использования очень проста, и выглядит так:

Первым делом необходимо создать бота в Telegram с помощью этой инструкции

Дальше, после того как Вы создали бота, то у вас есть так называемый токен, который как раз нам и пригодится!

Отправка запросов

Все запросы к Telegram Bot API должны осуществляться через HTTPS в следующем виде:

Все методы доступны в Telegram Bot API

Узнать id чата Telegram

Дальше необходимо узнать id чата, чтобы бот присылал сообщения с формы именно Вам!

Для этого необходимо что-нибудь написать своему боту и воспользоваться методом getUpdates.

После того как Вы написали своему боту, прописываем следующий адрес в браузере:

Вместо необходимо прописать свой токен!

Если всё сделали правильно, то Вы получите ответ в виде массива. Для корректный работы нам необходимо id чата, он как-раз такие есть в этом массиве после «chat»:

Так, id чата успешно получен, теперь попробуем отправить тестовое сообщение своему боту с браузера!

Отправка тестового сообщения

Чтобы отправить сообщение себе через бота, необходимо воспользоваться методом sendMessage. Для этого прописываем следующий адрес в браузере, вместо и необходимо прописать свои данные!

Нажимаем enter и вуаля, наше первое сообщение от нашего бота! Круто!!

Как вы заметили, текст сообщения мы прописали после метода text с типом string.

Отправка сообщений с формы

Ура мы всё настроили, теперь осталось самая главная часть, отправка сообщений с формы

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

А отправлять сообщения мы как раз будем с помощью Formit, а именно мы создадим так называемый хук.

Хук – это скрипт, который запускаются после того, как форма прошла валидацию. Каждый хук должен обязательно возвращать true в случае успеха и false в случае ошибки!

Итак, заходим в административную панель и переходим по вкладке элементы и там создаем сниппет FormitTelegram, который содержит следующий код:

Указываем токен и id чата!

Наименование полей с формы у вас могут быть другими, я использовал название полей со статьи, где мы настраивали отправку сообщений с модального окна!

Кстати строки в телеграмме я переношу с помощью %0A. Почему-то \n и
не работали(

И так, теперь там где вызывается Formit, прописываем наш хук FormitTelegram в &hooks и проверяем. В итоге получим следующее сообщение:

Чтобы название формы было нормальным, то необходимо в вызове Formit необходимо указать параметр &formName=`Название формы`

Вот и всё, также можно настроить отправку сообщений и себе в ВК!

Если у Вы отправляете форму с помощью PHP, то на блоге smartlanding.biz есть грамотная инструкция, где всё подробно расписано с применением Ajax.

Надеюсь статья понравилась и очень полезная 🙂

Пишите в комментариях, чтобы вы ещё хотели реализовать с помощью ботов для телеграмма!

Источник