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

Илья Ячменев

Илья Ячменев

Share on telegram
Share on whatsapp
Share on twitter
Share on vk
Share on odnoklassniki
Share on pinterest
Share on email

Содержание

Как отправлять заявки с сайта в 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. В конце сохраняем настройки и проверяем работоспособность формы, для настройки остальных форм повторите тоже самое.

 

Ссылки

 

Заключение

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

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

Илья Ячменев

Илья Ячменев

Share on telegram
Share on whatsapp
Share on twitter
Share on vk
Share on odnoklassniki
Share on pinterest
Share on email

Содержание

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

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

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