Часто возникает потребность сделать простенький лендинг для сбора лидов без использования конструктора. При этом важную роль играет скорость реакции на полученные заявки, поэтому почта не всегда подходит для этого. В этом гайде я расскажу вам, как быстро настроить отправку заявок с сайта в 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-чат.
