Как отправлять заявки с лендинга прямо в Telegram

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

Создаём бота
Шаг 1

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

Для создания бота в Telegram нам необходимо зарегистрировать его у бати ботов — @BotFather. Ищем его в поиске Telegram по нику @BotFather, открываем окно чата и жмем Start.

После того, как вы нажали на START, появится список команд для работы
с вашими ботами. Нас интересует команда /newbot. Нажмите на неё в списке или введите в поле ввода и отправьте как сообщение.

После ввода команды /newbot, @BotFather попросит ввести имя для нашего бота. Имя — это то, что будет выводится в списке чатов.
Я выбрал имя Заявки с лендоса.

Далее @BotFather просит нас задать username для бота. Это тот самый ник,
по которому его можно будет найти в поиске. Причем батя просит, чтобы username заканчивался на bot. Например, TelegramBot или Telegram_bot.
Я выбрал ник @LendosOrder_bot.

После того, как мы отправили username, @BotFather сообщает, что бот успешно создан и выдает нам токен для доступа к боту по HTTP API. Он нам понадобится чуть позже.

Наш бот готов, переходим к следующему шагу.

Создаем чатик для заявок
Шаг 2

Здесь всё просто.

1) Заходим в меню Telegram и создаем новую группу. Называем её
как душе угодно.

2) Добавляем в группу созданного ранее бота.

3) Переходим в бот и активируем его, нажав кнопку START.

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

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

где XXXXXXXXXXXXXXXXXXXXXXX — это токен, который дал @BotFather.

Получится примерно так:

https://api.telegram.org/bot1094153697:AAFiXXXX0hRDsxBij1lddKydKxSSsOg04/getUpdates

Откроется страница с данными, где нужно скопировать ID чата (с минусом). Сохраните его, он понадобится нам дальше.

Форма на сайте
Шаг 3

В рамках инструкции не буду рассматривать сам процесс верстки. У меня есть форма, которая передает данные при помощи метода POST. В параметре action я указал php-обработчик с именем send.php (свой обработчик можете назвать как угодно).

<form class="form" method="post" action="/send.php"> <div class="form__item"> <input class="form__input" type="text" name="name" required> <label class="form__label">Ваше имя</label> </div> <div class="form__item"> <input class="form__input" type="text" name="phone" required> <label class="form__label">Номер телефона</label> </div> <input class="form__input btn" type="submit" value="Отправить"> <input type="hidden" name="act" value="order"> </form>

У каждого тэга input есть атрибут name. Эти атрибуты помогают собрать данные из формы и передать их в php-обработчик.

Вы можете сделать любую другую форму, с большим количеством полей и т.д.

С формой разобрались, переходим к финальному шагу!

Финалим
Шаг 4

Для отправки данных из формы боту, нужно написать обработчик. Я использовал обработчик на PHP, т.к. привык работать с ним.

Вот код моего обработчика (файл send.php):

<?php //В переменную $token нужно вставить токен, который нам прислал @botFather $token = "1094153697:AAFiLXXXXXLl0hRDsxBij1lddKydKxSSsOg04"; //Сюда вставляем chat_id $chat_id = "-40XXXX740"; //Определяем переменные для передачи данных из нашей формы if ($_POST['act'] == 'order') { $name = ($_POST['name']); $phone = ($_POST['phone']); //Собираем в массив то, что будет передаваться боту $arr = array( 'Имя:' => $name, 'Телефон:' => $phone ); //Настраиваем внешний вид сообщения в телеграме foreach($arr as $key => $value) { $txt .= "<b>".$key."</b> ".$value."%0A"; }; //Передаем данные боту $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r"); //Выводим сообщение об успешной отправке if ($sendToTelegram) { alert('Спасибо! Ваша заявка принята. Мы свяжемся с вами в ближайшее время.'); } //А здесь сообщение об ошибке при отправке else { alert('Что-то пошло не так. ПОпробуйте отправить форму ещё раз.'); } } ?>

$token — токен, который дал нам @BotFather;
$chat_id — ID чата, в который бот будет присылать заявки (его мы получили на втором шаге);
$name и $phone — переменные для обработки полей с атрибутами name и phone из нашей формы;

Всё! После выполнения этих действий форма с вашего сайта будет присылать заявки сразу в Telegram-чат.

Если что-то не получилось — пишите, помогу разобраться. Надеюсь что эта инструкция будет полезна:)

#selectel_инструкция

58 комментариев

Тимур Тукаев

14.09.2020

>>У меня есть форма, которая передает данные при помощи метода POST. В параметре action я указал php-обработчик с именем send.php (свой обработчик можете назвать как угодно).

Я гуманитарий, у меня нет формы с методом POST и своего личного обработчика)) я хочу лендос и бота, как мне быть?)))

Ответить

QForm

04.05.2023

Можете воспользоваться готовым решением, например https://ru.qform.io

Тут есть кратенькая инструкция по настройке экспорта данных с форм в Телеграм: https://ru.qform.io/forms/telegram-export

Сам конструктор полностью бесплатный, есть возможность адаптировать дизайн формы под сайт или работать без сайта, настраивать параллельно другие интеграции и т.д. Пользуйтесь, если ещё актуально ;)

Александр Лисов

Автор

Пример кода поможет?)

Nikolay Safronov

15.09.2020

Не может такого быть)

Отображаемое имя

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

Роман М

05.04.2023

Следует дополнить статью: чтобы работала вот это
https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates
нужно, чтобы бот не был запущен.
Если у вас он уже запущен (/start) - вам нужно его замутить на время - свайп влево на телефоне.
И попробуйте снова - все должно получиться.

Как отправлять заявки с лендинга прямо в Telegram

Регистрация бота

Выбор имени и никнейма для бота, получение токена

Создаём группу

Получаем chat_id