Как отправлять заявки с сайта в Telegram (WordPress, Elementor Pro)

Илья Ячменев

Илья Ячменев

Содержание

Как отправлять заявки с сайта в Telegram (Wordpress, Elementor Pro)

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

 

Суть задачи

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

 

Термины и понятия

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

WordPress — популярная бесплатная cms система для управления сайтами
Elementor Pro — популярный конструктор веб страниц
Dynamic.ooo — плагин с пакет виджетов для Elementor
Telegram — популярный мессенджер для мобильного социального общения
/start — команда боту запуститься
/newbot — команда создать нового бота
token — идентификатор бота в Telegram
id chat — номер чата, требуется боту для отправки сообщения

 

Создание Telegram бота

Создаем бота в Telegram, который будет отправлять заявки клиенту:

  1. Чтобы создать бота переходим в Telegram, ищем в поиске @BotFather добавляем его к себе.
  2. Пишем боту команду /start
  3. Команду /newbot бот спросит имя нового бота и логин. В моем случай имя pingvinchik_bot логин zayvkassite_bot (логин должен заканчиваться на bot)
  4. В ответном сообщений придет token бота(токен нужно держать в безопасности и не где его не публиковать) он понадобится нам в бедующем
  5. Ищем нашего бота в Telegram по имени или логину и запускаем его /start (с аккаунта на который должны приходить заявки). В моем случай аккаунт клиента)

 

Создание Telegram бота

 

Получение id чата

Теперь нам нужно узнать id chata чтобы бот мог отправлять заявку клиенту:

Добавь бота в Telegram клиента @ShowJsonBot

Напиши боту /start после напиши text

В ответ придет сообщение ищем строчку:

“chat”: {

“id”: ********* – это и будет ваш id chat

 

Получение id chat

Установка плагина и настройка формы обратной связи

Нам нужно установить платный плагин Dynamic.ooo. В нём надо выключить все ненужные виджеты кроме Telegram for Elementor Pro Form, и настроить формы на страницах сайта для отправки заявок в Telegram.

1. Устанавливаем плагин dynamic в wordpres.

2. Отключаем в настройках плагина всё не нужные виджеты

3. В настройках плагина во вкладке Features > > > Extensions включите виджет Telegram for Elementor Pro Form

 

Включите виджет Telegram for Elementor Pro Form

 

4. Переходим в редактор страниц Elementor, находим форму которую необходимо настроить.

5. Настраиваем поле формы телефон. Form Fields > > > элемент телефон(в нашем случай) > > > Type значение «Tel» > > > выбираем вкладку ADVANCED. Смотрим значение поля id, оставляем его по умолчанию или меняем на свое. Я заменил его на значение phone (важно запомнить это значение оно нам понадобится далее).

 

Как отправлять заявки с сайта в Telegram (WordPress, Elementor Pro)

 

6. Добавляем действие которое будет выполняться когда пользователь отправит форму. Переходим на вкладку Actions After Submit > > > нажимаем «+» и выбираем из списка Telegram.

 

Добавляем действие

 

7. Далее настраиваем отправку сообщения из формы в наш Telegram бот. Здесь нам понадобится token бота и id chat. Переходим во вкладку Telegram > > > Добавляем элемент > > > поле Enable Message значение «Да» > > > поле Condition оставляем по умолчанию > > > поле Telegram authorization token заполняем наш token бота > > > поле Chat ID заполняем id чата клиента(куда отправлять заявку).

8. Последнее поле Message — это скрипт сообщения. В моем случай выглядит: «Номер телефона: [form:phone]» form: — это поле формы например телефон, почта и т.д. Значение phone это id во вкладке Form Fields > > > ADVANCED > > > id.

 

Добавляем действие

 

9. В конце сохраняем настройки и проверяем работоспособность формы, для настройки остальных форм повторите тоже самое.

 

Ссылки

 

Заключение

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

Над статьей работали: Илья Ячменев ; Татьяна Шаклеева

Илья Ячменев

Илья Ячменев

Содержание

Scroll
Оставить заявку

Расскажите немного о своем проекте

Обсудим с вами удобным способом