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

Навигация по статье

Шаг 1. Получение API-ключа для бота

Для начала настройки отправки заявок с сайта в Telegram, нужно получить API-ключ для вашего бота. Этот ключ — это своего рода «пропуск» для общения между вашим сайтом и Telegram.

Для этого вам потребуется бот под названием BotFather. Просто найдите его в Telegram, начните чат и следуйте его инструкциям:

Нажмите команду /start, чтобы начать общение с BotFather.
Как только вы начнете чат с BotFather, отправьте ему команду /newbot. Бот запросит у вас имя для вашего нового бота.
Придумайте имя для бота (которое не занято).

Я выбрал имя CodelabTestBot и BotFather выдал мне API-ключ.

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

Шаг 2. Активируем бот

Первым делом мы должны активировать сам бот, который создали. Чтобы это сделать необходимо в чате с ботом ввести команду:

/start

Шаг 3. Добавляем бота в группу

Создайте в телеграмме группу. Я назову ее, например, «CodelabTest».

Добавьте в эту группу своего бота.

После создания группы введите команду (вместо CodelabTestBot — имя своего бота):

/join @CodelabTestBot

Эта команда в Telegram используется для подключения к боту с именем «@CodelabTestBot». После подключения вы можете начать взаимодействие с этим ботом, выполнять команды и получать информацию, предоставляемую им.

Шаг 4. Получение чат-идентификатора

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

Для этого в браузере введите поисковый запрос:

https://api.telegram.org/bot<ваш_токен>/getUpdates

В результате вам вернется строка, в которой надо найти chat и параметр id. Скопируйте номер — это и будет ваш чат-идентификатор.

Шаг 5. Форма заказа обратного звонка

В качестве примера используем форму заказа обратного звонка — это простая веб-форма, в которой пользователи могут указать свое имя и номер телефона, чтобы запросить обратный звонок. Обычно она содержит два поля для ввода информации (имя и номер телефона) и кнопку «Отправить» для отправки данных на сервер для дальнейшей обработки.

Вы можете скачать ее с моего GitHub или скопировать код ниже.

HTML:

<form method="post" class="form" action="telegram.php">
  <h2>Заказать обратный звонок</h2>
  <input
    type="text"
    id="name"
    name="name"
    class="input"
    placeholder="Ваше имя"
    required
  />

  <input
    type="tel"
    id="phone"
    name="phone"
    class="input"
    placeholder="Номер телефона"
    required
  />

  <input type="submit" value="Отправить" class="btn" />
</form>

CSS:

body {
  background: #d28da5;
  background: linear-gradient(135deg, #d28da5, #d17224);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #111111;
}

.form {
  background-color: #fff;
  border-radius: 5px;
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.form h2 {
  font-size: 20px;
  color: #111;
  margin-bottom: 20px;
}

.form .input {
  border: 1px solid #d17224;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.form .btn {
  margin-top: 10px;
  background-color: #d17224;
  padding: 10px;
  color: #fff;
  border-radius: 5px;
}

Шаг 6. Настройка обработки формы на сервере

Теперь, когда у нас есть форма заказа обратного звонка на веб-сайте, нам нужно создать скрипт (назову его telegram.php) на сервере для обработки данных, отправленных через эту форму. В этом скрипте мы будем использовать API Telegram для отправки уведомлений в группу.

Вам понадобится язык программирования, такой как PHP, Python, Node.js или любой другой, подходящий для вашего сервера. Ниже приведен пример кода на PHP для обработки формы и отправки уведомления в Telegram:

<?php
// Получаем данные из формы
$name = $_POST['name'];
$phone = $_POST['phone'];

// Ваш API-ключ Telegram бота
$telegram_api_key = 'YOUR_TELEGRAM_API_KEY';

// Чат-идентификатор группы в Telegram, куда будут отправляться уведомления
$chat_id = 'YOUR_CHAT_ID';

// Сообщение для отправки в группу
$message = "Новая заявка на обратный звонок:\nИмя: $name\nНомер телефона: $phone";

// URL для отправки сообщения в Telegram
$telegram_url = "https://api.telegram.org/bot$telegram_api_key/sendMessage?chat_id=$chat_id&text=" . urlencode($message);

// Отправляем запрос к API Telegram
$response = file_get_contents($telegram_url);

// Проверяем результат отправки
if ($response === false) {
    echo 'Ошибка при отправке заявки.';
} else {
    echo 'Заявка успешно отправлена.';
}
?>

В этом коде мы получаем данные из формы $name и $phone, затем используем API-ключ Telegram бота $telegram_api_key и чат-идентификатор группы $chat_id, чтобы сформировать сообщение и отправить его в группу через API Telegram.

Шаг 7. Тестирование Telegram-бота

Настало время проверить работу нашего Telegram-бота.

Загрузите файлы index.html style.css и telegram.php на хостинг с поддержкой PHP.

Заявки приходят успешно.