Продолжая использовать сайт, вы соглашаетесь на обработку файлов cookie и "Политикой обработки персональных данных"
Часто возникает потребность сделать простенький лендинг для сбора лидов без использования конструктора. При этом важную роль играет скорость реакции на полученные заявки, поэтому почта не всегда подходит для этого. В этом гайде я расскажу вам, как быстро настроить отправку заявок с сайта в Telegram-чат на примере простенькой формы заявки.
Находим @BotFather и жмем START
Для создания бота в Telegram нам необходимо зарегистрировать его у бати ботов — @BotFather. Ищем его в поиске Telegram по нику @BotFather, открываем окно чата и жмем Start.
Вводим команду /newbot
После того, как вы нажали на START, появится список команд для работы с вашими ботами. Нас интересует команда /newbot. Нажмите на неё в списке или введите в поле ввода и отправьте как сообщение.
После ввода команды /newbot, @BotFather попросит ввести имя для нашего бота. Имя — это то, что будет выводится в списке чатов. Я выбрал имя Заявки с сайт.
Далее @BotFather просит нас задать username для бота. Это тот самый ник, по которому его можно будет найти в поиске. Причем батя просит, чтобы username заканчивался на bot. Например, TelegramBot или Telegram_bot. Я выбрал ник @DiAiComp_bot.
После того, как мы отправили username, @BotFather сообщает, что бот успешно создан и выдает нам токен для доступа к боту по HTTP API. Он нам понадобится чуть позже. Наш бот готов, переходим к следующему шагу.
Здесь всё просто.
1) Заходим в меню Telegram и создаем новую группу. Называем её как душе угодно.
2) Добавляем в группу созданного ранее бота.
3) Переходим в бот и активируем его, нажав кнопку START. Наш бот готов, переходим к следующему шагу.
Чтобы получить chat_id, нужно вставить в адресную строку браузера ссылку такого вида:
https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates
где XXXXXXXXXXXXXXXXXXXXXXX — это токен, который дал @BotFather.
https://api.telegram.org/bot1094153697:AAFiXXXX0hRDsxBij1lddKydKxSSsOg04/getUpdates
Откроется страница с данными, где нужно скопировать ID чата (с минусом). Сохраните его, он понадобится нам дальше.
Копируем chat_id
В рамках инструкции не буду рассматривать сам процесс верстки. У меня есть форма, которая передает данные при помощи метода 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-обработчик.
Вы можете сделать любую другую форму, с большим количеством полей и т.д.
С формой разобрались, переходим к финальному шагу!
Для отправки данных из формы боту, нужно написать обработчик. Я использовал обработчик на 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('Что-то пошло не так. ПОпробуйте отправить форму ещё раз.');
}
}
?>
Всё! После выполнения этих действий форма с вашего сайта будет присылать заявки сразу в Telegram-чат.