Отправка сообщений в Telegram из обратной связи вебсайта

Сегодня мы в пошаговом режиме разберем алгоритм процесса отправки сообщений с веб-сайта в бот Телеграмма. Насколько Telegram сегодня актуальнее электронной почты решать вам, но в плане оперативного получения информации и уведомлений с вашего сайта данный мессенджер имеет массу преимуществ по сравнению с более привычной и традиционной электронной почтой.

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

Первым делом нам необходимо создать бота – приложение, которое будет получать сообщения с сайта и уведомлять вас об их получении. В Телеграмме существует отдельный бот для создания и управления другими ботами. Называется он BotFather. Найти и запустить его можно из поисковой строки командой 

/start

В результате получим подсказку по работе с ботом BotFather:

Теперь введем команду

/newbot

для создания нового бота:

Введем имя и “алиас” нового бота, после чего получим информацию о нем. Нас будет интересовать token созданного бота, поэтому сразу скопируем его. Кстати, при необходимости token можно пересоздать командой

/revoke

Получение Chat ID

К боту может подключиться любое количество пользователей, однако уведомления о новых сообщениях будут отправляться только одному. Все остальные увидят сообщения только при непосредственном обращении к боту.

Для дальнейшей настройки нам понадобится Chat ID выбранного пользователя. Получить его можно с помощью еще одного бота – userinfobot. Командой 

/start

получим необходимые нам данные:

Создаем форму для отправки сообщений

На данном этапе ничего особенного не потребуется. Для примера мы создадим простую форму с двумя полями:

<form class="telegram_bot" action="#" method="post">
	<input type="text" name="rname" value="Some sample name" required />
	<textarea name="rtext" rows="8" cols="80">Some sample text</textarea>
	<button type="submit">Submit</button>
</form>
<script src="telegram.js"></script>

Вы можете расширить ее под все необходимые требования. После кода формы подключим файл со скриптом. Для демонстрации добавим к данным также тестовое изображение:

let telegram_bot_token = 'ТОКЕН БОТА';
let telegram_chat_id = 'ВАШ CHAT ID';

let form = document.querySelector("form.telegram_bot");

let form_name = document.querySelector('input[name=rname]').value;
let form_text = document.querySelector('textarea[name=rtext]').value;
let form_image = 'https://telegram.org/img/t_logo.png';

form.addEventListener('submit', (e) => {
	e.preventDefault();

	fetch('https://api.telegram.org/bot' + telegram_bot_token + '/sendMessage', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify({
			chat_id: telegram_chat_id,
			text: form_name + '\n' + form_text + '\n' + form_image;
		})
	})
	.catch(error => {
		console.error('Error sending message:', error);
	});
});

Нам осталось только протестировать нашу форму и убедиться в том, что в бот приходят все уведомления:

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

Здесь все немного сложнее, но не настолько, чтобы вы не смогли справиться! 

Прежде всего, нам необходимо создать группу. Затем добавим в нее нашего бота с правами администратора (возможности можно оставить по умолчанию). Теперь получим ID группы. Для этого поиском находим бота IDBot и добавляем его в нашу группу. Запускаем команду

/getgroupid

и получаем искомый код. Он должен начинаться с “-100”. Бота теперь можно из группы удалить.

В нашем скрипте отдадим Group ID переменной telegram_chat_id, и наш бот начнет постить уведомления в группу. Вам останется только добавить в нее своих коллег, которые должны получать эти уведомления вместе с вами.

Заключение

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

Если все шаги вы выполнили правильно, в результате вы получите обратную связь, действующую в режиме реального времени – критическое условие для функционирования вашего проекта. Независимо от того, что это – коммуницирование с подписчиками или заказы на покупку товаров – вы получите механизм отправки сообщений, который позволит вам оставаться на связи круглосуточно.