Как связать бота телеграмм с сайтом
Обновлено: 18.04.2024
Часто возникает потребность сделать простенький лендинг для сбора лидов без использования конструктора. При этом важную роль играет скорость реакции на полученные заявки, поэтому почта не всегда подходит для этого.
В этом гайде я расскажу вам, как быстро настроить отправку заявок с сайта
в Telegram-чат на примере простенькой формы заявки.
Отправлять заявки в чат будет бот. Поэтому первым шагом мы создадим
и настроим его.
Для создания бота в Telegram нам необходимо зарегистрировать его у бати ботов — @BotFather. Ищем его в поиске Telegram по нику @BotFather, открываем окно чата и жмем Start.
После ввода команды /newbot, @BotFather попросит ввести имя для нашего бота. Имя — это то, что будет выводится в списке чатов.
Я выбрал имя Заявки с лендоса .
Далее @BotFather просит нас задать username для бота. Это тот самый ник,
по которому его можно будет найти в поиске. Причем батя просит, чтобы username заканчивался на bot. Например, TelegramBot или Telegram_bot.
Я выбрал ник @LendosOrder_bot .
Наш бот готов, переходим к следующему шагу.
Здесь всё просто.
1) Заходим в меню Telegram и создаем новую группу. Называем её
как душе угодно.
2) Добавляем в группу созданного ранее бота.
3) Переходим в бот и активируем его, нажав кнопку START.
Чтобы получить chat_id, нужно вставить в адресную строку браузера ссылку такого вида:
где XXXXXXXXXXXXXXXXXXXXXXX — это токен, который дал @BotFather.
Получится примерно так:
Откроется страница с данными, где нужно скопировать ID чата (с минусом). Сохраните его, он понадобится нам дальше.
В рамках инструкции не буду рассматривать сам процесс верстки. У меня есть форма, которая передает данные при помощи метода POST. В параметре action я указал php-обработчик с именем send.php (свой обработчик можете назвать как угодно).
У каждого тэга input есть атрибут name. Эти атрибуты помогают собрать данные из формы и передать их в php-обработчик.
Вы можете сделать любую другую форму, с большим количеством полей и т.д.
С формой разобрались, переходим к финальному шагу!
Для отправки данных из формы боту, нужно написать обработчик. Я использовал обработчик на PHP, т.к. привык работать с ним.
Вот код моего обработчика (файл send.php):
- $token — токен, который дал нам @BotFather;
- $chat_id — ID чата, в который бот будет присылать заявки (его мы получили на втором шаге);
- $name и $phone — переменные для обработки полей с атрибутами name и phone из нашей формы;
Всё! После выполнения этих действий форма с вашего сайта будет присылать заявки сразу в Telegram-чат.
Если что-то не получилось — пишите, помогу разобраться. Надеюсь что эта инструкция будет полезна:)
>>У меня есть форма, которая передает данные при помощи метода POST. В параметре action я указал php-обработчик с именем send.php (свой обработчик можете назвать как угодно).
Я гуманитарий, у меня нет формы с методом POST и своего личного обработчика)) я хочу лендос и бота, как мне быть?)))
Пример кода поможет?)
Не может такого быть)
Почти любой популярный конструктор лендосов позволяет отправлять уведомления в телеграм. Настраивается буквально парой кликов, есть пошаговые инструкции.
На Тильде это делается в два клика, да. Имел в виду, как именно при таком способе сделать форму
Комментарий удален модератором
Забанят. Должны. Эта статья есть на другом сайте.
Отвечаю из будущего: не забанили.
Это все равно что 90% статьи описывать как завести аккаунт в гугле и 10% посвятить как отправлять почту
Спасибо автору. Я какраз искал такой способ сейвить лиды перед отправкой в ПП.
На тильде делайте сайт и этого бота берите или тильдовского. Работали с срм, но не было уведомлений🤷🏻♂️ - пропустили Лид. Поэтому сделали телегу.
Вы втираете какую то дичь.
Отправляй лиды в crm, в телегу то зачем?
Для быстрой обработки этой заявки во внерабочее время/не у ПК и т.п.
это лютое бешеное зло, обрабатывать клиентов мимо crm
верный шанс проебать лид.
Возможно это актуально для видов бизнеса с одним-двумя клиентами в месяц. В любом случае автору спасибо, уверен кому-то пригодится.
Если пару клиентов в месяц то возможно хватит и тупо почты.
Лучше уж тогда почта и телега, я знаю много людей, у которых лендинг работает на уровне «сделали по-знакомству и хорошо, пусть сайт висит в интернетах», это как правило что-то около фриланса: адвокаты, производство мебели в гараже, репетиторы. Не админ авито и профиру люди хотят жить, а иметь какой-то альтернативный источник заявок, тем более что оплата только за домен, а хостинга нет, так как на впске того пограммиста, который это сделал. Так вот, я сам несколько таких сайтов держу и все довольны заявками в телегу. Почему мыло зло? Потому что функцию mail() сейчас порой выпиливают и используют всякие smtp-прокладки, которые держатся на либе smtp mailer или какими-то средствами cms, но по опыту, все эти smtp живут не больше года, обычно меняются политики сервисов, надо авторизацию обновить и тп, а через функцию mail() письмо может тупо не дойти из-за того, что кто-то будет специально кидать заявки, в какой-то момент все письма окажутся в спаме. А то и хуже. По поводу crm согласен с тобой, но ца этого всего уж точно не люди, которые в гараже делают мебель или репетиторствуют.
Первое, с чего нужно начать, так это с создания бота. Есть официальная документация и там подробно расписаны шаги.
- находим в телеграм бота BotFather и добавляем себе в контакт лист
- смотрим доступные команды бота с помощью команды /help
Связываем бота с приложением\сайтом
Начинается самое интересное, а также именно тут я столкнулся с первой проблемой.
Первым делом выбираем библиотеку на php по созданию бота. Я свой выбор остановил на этой библиотеке, так как мне она показалась самой удобной.
После подключения библиотеки нужно организовать взаимодействие бота с вашим сайтом\приложением. Организовать это взаимодействие можно с помощью вебхуков.
Вы можете воспользоваться сервисом Let’s Encrypt
Переходим в раздел getting startted и следуем инструкции.
Написание кода бота
Теперь же приступаем к программированию. После того, как взаимосвязь организована, можно начинать писать логику нашего бота.
Разработчики telegram, для того чтобы пользователям было проще работать с ботами, просят всех разработчиков реализовывать поддержку следующих команд:
Все что нам нужно сделать, это в контроллере вашего приложения\сайта написать следующий код:
Теперь если в окне телеграм бота написать /help, то будет выведен текст:
Команды:
/help — вывод справки
Что ж, мы написали список рекомендуемых команд. Далее мы можем реализовывать необходимые нам команды.
Для этого следует написать следующий код:
Получается все очень просто и быстро.
Заносим список команд бота
Для того, чтобы бот мог выдавать интерактивную справку
необходимо боту BotFather сообщить список команд.
Сделать это можно с помощью его команды /setcommands
Велосипедство
Описанный выше вариант не совсем удобен, потому что не хочется вбивать после команды текст, так как если использовать подсказки от бота, то это совсем нереально.
Значит нужно сделать так, чтобы бот запоминал команду, которую вы вводите. Это можно сделать с помощью любого хранилища (MySQL, memcached, redis, tarantool, Postgres, etc)
Все что нужно, это запоминать предыдущий ввод пользователя.
Вот на этом этапе у меня снова возникла трудность, так как я не нашел в библиотеке возможности получить команду до вызова метода command. Также мне не понравилось то, что вся логика будет заперта в рамках одного контроллера приложения.
Было принято решение написать свой обработчик данных, с возможностью выносить каждую команду в отдельный контроллер приложения.
Для начала мы описываем точку входа в контроллер
Теперь рассмотрим один из методов.
Так стало все в разы приятнее, интерактивнее и удобнее.
Спасибо, что дочитали статью до конца. Поиграть с живым ботом, который работает в режиме диалога можно тут.
UPD: боту добавлена возможность отдавать фото на некоторые виды запросов. Например на
/gettable — возвращает результирующую таблицу спортивных событий
/getevents — возвращает события спортивных мероприятий
В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная - Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.
- Все элементы должны быть отзывчивыми и спроектированы с учетом мобильной ориентации устройств.
- Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
- Все анимации должны быть плавными, в идеале 60 кадров в секунду.
- Все input и изображения должны содержать label для доступности.
- Приложение должно обеспечивать бесшовную работу, отслеживая изменение цветов темы с помощью API, и используя их соответствующим образом.
Давайте же опробуем это на практике!
Создание кнопки
Первое, что нам нужно сделать - создать кнопку запуска веб-приложения. Это можно сделать двумя способами:
1. При помощи @botfather - кнопка слева снизу
1.1. Идем в @botfather и пишем команду: /setmenubutton
1.2. Далее выбираем бота, которому нужна кнопка веб приложения
1.3. Отправляем ссылку по которой доступно наше веб-приложение
1.4. Пишем имя кнопки - будет отображаться внизу слева
создание кнопки через @botfather как выглядит main button
Вот и все. В целом, если у вас есть адаптивный сайт и вы хотели просто добавить его в бота, тут можете остановиться.
Только при добавлении кнопки этим способом мы можем получить информацию о пользователе.
2. В коде бота - клавиатурные кнопки.
Запуск бота с inline-кнопки даёт суть тоже самое, что и предидущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.
Покажу на примере pytelegrambotapi - я понимаю, что это не самая популярная библиотека для написания телеграмм-ботов, но так получилось, что я пишу именно на ней. Если вы пользуетесь другой библиотекой/языком, думаю, вам не составит труда действовать по аналогии. Вы можете сразу посмотреть пример или перейти в репозиторий и посмотреть код с комментариями:
2.1. Делаем все стандартные штуки для запуска бота - импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.
2.2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.
Для того, чтобы создать кнопку, нужно сначала создать WebAppInfo-объект внутри которого будет url на наш сайт.
Готово. Кнопки у нас есть.
Тут можно вообще закончить, если вы просто хотели, чтобы пользователь мог открыть ваш сайт из бота (зачем-то). Работать это будет вот так:
как работают web apps
Работа с веб-приложением
Теперь идем в наше веб-приложение. На момент написания статьи открывается любая ссылка, даже на codepen.
Инициализация
Чтобы взаимодействовать с телеграм подключаем скрипт:
После этого нам будет доступен объект: window.Telegram.WebApp
Записываем его в переменную и начинаем нашу работу.
let tg = window.Telegram.WebApp;
Что же мы теперь можем? Не так много, как хотелось бы, но и не мало. Приложение состоит из: основной кнопки (telegram-объект) и самой страницы, которая загрузилась по ссылке. Остальные элементы telegram-интерфейса нам не доступны. Однако, доступны цвета темы пользователя:
навигатор цветов
Цвета
Они доступны в формате hex как css-переменные:
var(--tg-theme-bg-color)
var(--tg-theme-text-color)
var(--tg-theme-hint-color)
var(--tg-theme-link-color)
var(--tg-theme-button-color)
var(--tg-theme-button-text-color)
Или как объект ThemeParams в js (вместо window.Telegram.WebApp я использую переменную tg):
Но будьте осторожны, цвета - необязательный параметр, поэтому стоит проверять, есть ли они, перед тем как использовать.
Также имеется обработчик события изменения цветовой схемы:
При изменении цветовой схемы или размеров окна можно поменять что-то и в нашем веб-приложении.
Основные возможности
С цветами разобрались - теперь к другим основным параметрам:
Main button
Мы можем взаимодействовать с кнопкой внизу приложения. Изменять ее текст, цвет фона и текста, показывать/скрывать, делать активной и деактивировать:
Основная кнопка в тестовом @DurgerKingBot
Web App User
И еще информация о пользователе, мы можем разобрать строку tg.initData или использовать tg.initDataUnsafe объект:
Пишем веб-приложение
С этой информацией мы можем написать небольшое приложение, которое наглядно отобразит основные возможности.
1. Создадим небольшую html-основу:
2. Пропишем изменения текста основной кнопки и изменение цвета:
3. Далее повесим обработчик события на первую html-кнопку и при нажатии будем показывать/скрывать основную telegram-кнопку:
4. Еще один обработчик события на вторую html-кнопку, при нажатии которой будем активировать/деактивировать основную telegram-кнопку:
5. В итоге отправляем данные при нажатии на основную telegram-кнопку:
Благодаря этому методу мы можем получить данные из веб-приложения в боте.
6. Также выведем всю информацию о пользователе (будет доступна только при запуске с кнопки, добавленной с помощью @botfather).
Нам доступно: id / isBot / first_name / last_name / username / language_code
7. И добавляем стили, используя telegram-css переменные:
В итоге получаем такое веб-приложение:
Оно отображает основные возможности - получение информации о пользователе, задействование цветов его темы и управление главной кнопкой приложения.
Получаем данные от веб-приложения в боте
И все - теперь мы можем получать информацию с сайта и отвечать на нее.
Есть и другие способы - но это уже немного другая история.
Добрый день, решил написать бота, да вот не знаю как. Бот который будет отправлять расписание студентам университета. Суть работы такая: пользователь вводит название группы, а бот ему отправляет расписание. Расписание на сайте, не знаю как связать бота с сайтом, там надо выбрать группу из списка и загружается расписание, можно ли и как сделать, чтобы бот сам брал расписание для группы (веденной пользователем) и выводил его в телеграме? Уже думал о парсинге, но нигде не нашел информации, как он осуществляется и как его подключить и выводить информацию после него. Объясните подробно, т.к я только начинаю, заранее спасибо)
- Вопрос задан более трёх лет назад
- 5484 просмотра
Почитайте telegram-bot-lessons, для новичков самое то . После этого вопрос должен отпасть сам . В вашей задаче как бы две части , одна должна уметь общаться с пользователями (студентами) , а вторая подгружать с интернета (с сайта) расписание занятий.
Всем - привет. Давно зрела идея разобраться с отправкой данных из формы на сайте в мессенджер Telegram, но руки не доходили, а моментально получать заявки прямо в телефон, ой как хотелось!
Важно: для отправки файла из формы в Телеграм на вашем сервере должен быть включен cURL. Обратитесь к техподдержке вашего хостинга, они подскажут что делать и как включить. У многих он включен по умолчанию. Например, на моем хостинге Beget - так.
Итак, давайте приступим. Первое что нам нужно - это создать своего бота. Делается это достаточно просто. В поиске наберите @botfather, откройте родительского бота и нажмите "Start":
- Пишем команду /newbot, для создания нового бота.
- Придумываем имя бота.
- Придумываем ник бота.
Если все прошло успешно, то увидите поздравления и токен вашего бота, в моем случае это:
Теперь нужно найти своего бота в поиске, указав его ник и нажать "Start", чтобы активировать его. В моем случае ник @DWS_MESSAGE_bot.
После этого можно пойти двумя путями:
Давайте займемся этим и, пока, пойдем по первому пути.
Зайдите в меню, нажмите "New Group" ("Создать группу") и задайте имя вашему чату.
Не забываем пригласить своего бота в чат. Откройте меню чата, перейдите в "Add Members" ("Добавить участников") и введите имя своего бота.
На данный момент у нас есть бот, мы знаем его токен, есть чат, в который будут приходить заявки, и нам осталось узнать только id чата. Для этого, напишем в чате:
А затем перейдите в браузер, если используете приложение и введите:
где, XXXXXXXXXXXXXXXXXXXXXXX - токен вашего бота, полученный ранее.
Если все сделали правильно, то перед вами откроется подобная страница:
Разметка формы
Не стал выдумывать что-то сверхсложное, а просто 2 поля и возможность прикрепить файл. Оставил телефон, ведь у многих возникала проблема с символом "+", а файл добавил, так как меня просили разобраться с этой темой, при этом, теперь можно вставлять несколько штук.
Добавил стили - получилось примерно так (внешний вид в исходнике немного отличается):
Не забывайте, что форма отправляется без перезагрузки страницы, а значит используется ajax, и, для упрощения, jQuery. Поэтому подключаем сам jQuery, если не подключен, а после, и сам скрипт. Я сделал специальную папку telegramform, которую нужно поместить в корень сайта. Если нужно, сделаю исходник без использования jQuery.
Код с AJAX запросом. Файл - telegramform.js
А теперь сам обработчик нашей формы. Файл - send-message-to-telegram.php:
Во многом он повторяет обработчик из других форм на блоге. Например, в статье "Создание формы обратной связи" используется аналогичный подход, и вы легко сможете осуществить отправку данных как на почту, так и в мессенджер одновременно. Но помните, что это все тестовый, учебный пример и в реальной жизни можно сделать намного больше проверок.
Тут стоит обратить внимание на константы TOKEN и CHATID. Не забывайте подставить туда свои данные. Чтобы принимать какой-то определённый тип файла, поместите его в "Массив допустимых значений типа файла." Из популярных можно выделить:
| .jpg .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 |
| .jpg | image/png |
| application/pdf |
Не стал делать каких-то серьезных валидаций, так как это просто пример и вам наверняка нужно будет не только отправка текста или картинки в Телеграм, но и на почту, а значит все равно подстраивать под свои нужды. Если будут вопросы и замечания - пишите в комментариях.
Читайте также: