Всем — привет. Давно зрела идея разобраться с отправкой данных из формы на сайте в мессенджер Telegram, но руки не доходили, а моментально получать заявки прямо в телефон, ой как хотелось!
И вот, наконец-то посидел и разобрался. Конечно постичь все тонкости API — не удалось, но по кусочкам насобирал информацию и удалось отправить данные из контактной формы в чат Telegram.
Это актуализированная статья, в которой решены такие проблемы, как отправка фото и пропадающий символ «+», который не приходил в сообщение и из-за этого номер телефона был некликабельным. Появилась возможность не просто отправлять 1 фото, а сразу несколько файлов, в том числе PDF, docx и любых других.
Важно: для отправки файла из формы в Телеграм на вашем сервере должен быть включен cURL. Обратитесь к техподдержке вашего хостинга, они подскажут что делать и как включить. У многих он включен по умолчанию. Например, на моем хостинге Beget — так.
Как отправить данные формы на сайте в Telegram
Как создать кнопки к постам в Telegram канале // Кнопка в закрепе ТГ канала
- Пишем команду /newbot, для создания нового бота.
- Придумываем имя бота.
- Придумываем ник бота.
Если все прошло успешно, то увидите поздравления и токен вашего бота, в моем случае это:
После этого можно пойти двумя путями:
- создать групповой чат, в который будут приходить заявки и пригласить туда нашего бота;
- вступить в переписку с ботом и получать личные сообщения от него.
Давайте займемся этим и, пока, пойдем по первому пути.
Зайдите в меню, нажмите «New Group» («Создать группу») и задайте имя вашему чату.
Не забываем пригласить своего бота в чат. Откройте меню чата, перейдите в «Add Members» («Добавить участников») и введите имя своего бота.
На данный момент у нас есть бот, мы знаем его токен, есть чат, в который будут приходить заявки, и нам осталось узнать только id чата. Для этого, напишем в чате:
А затем перейдите в браузер, если используете приложение и введите:
https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates
где, XXXXXXXXXXXXXXXXXXXXXXX — токен вашего бота, полученный ранее.
Если все сделали правильно, то перед вами откроется подобная страница:
Разметка формы
Не стал выдумывать что-то сверхсложное, а просто 2 поля и возможность прикрепить файл. Оставил телефон, ведь у многих возникала проблема с символом «+», а файл добавил, так как меня просили разобраться с этой темой, при этом, теперь можно вставлять несколько штук.
Добавил стили — получилось примерно так (внешний вид в исходнике немного отличается):
Не забывайте, что форма отправляется без перезагрузки страницы, а значит используется ajax, и, для упрощения, jQuery. Поэтому подключаем сам jQuery, если не подключен, а после, и сам скрипт. Я сделал специальную папку telegramform, которую нужно поместить в корень сайта. Если нужно, сделаю исходник без использования jQuery.
Код с AJAX запросом. Файл — telegramform.js
(function ($) < $(«.contact-form»).submit(function (event) < event.preventDefault(); // Сообщения формы let successSendText = «Сообщение успешно отправлено»; let errorSendText = «Сообщение не отправлено. Попробуйте еще раз!»; let requiredFieldsText = «Заполните поля с именем и телефоном»; // Сохраняем в переменную класс с параграфом для вывода сообщений об отправке let message = $(this).find(«.contact-form__message»); let form = $(«#» + $(this).attr(«id»))[0]; let fd = new FormData(form); $.ajax(< url: «/telegramform/php/send-message-to-telegram.php», type: «POST», data: fd, processData: false, contentType: false, beforeSend: () =>< $(«.preloader»).addClass(«preloader_active»); >, success: function success(res) < $(«.preloader»).removeClass(«preloader_active»); // Посмотреть на статус ответа, если ошибка // console.log(res); let respond = $.parseJSON(res); if (respond === «SUCCESS») < message.text(successSendText).css(«color», «#21d4bb»); setTimeout(() =>< message.text(«»); >, 4000); > else if (respond === «NOTVALID») < message.text(requiredFieldsText).css(«color», «#d42121»); setTimeout(() =>< message.text(«»); >, 3000); > else < message.text(errorSendText).css(«color», «#d42121»); setTimeout(() =>< message.text(«»); >, 4000); > > >); >); >)(jQuery);
А теперь сам обработчик нашей формы. Файл — send-message-to-telegram.php:
Во многом он повторяет обработчик из других форм на блоге. Например, в статье «Создание формы обратной связи» используется аналогичный подход, и вы легко сможете осуществить отправку данных как на почту, так и в мессенджер одновременно. Но помните, что это все тестовый, учебный пример и в реальной жизни можно сделать намного больше проверок.
Тут стоит обратить внимание на константы TOKEN и CHATID. Не забывайте подставить туда свои данные. Чтобы принимать какой-то определённый тип файла, поместите его в «Массив допустимых значений типа файла.» Из популярных можно выделить:
При этом файлы будут приходить общим потоком, одним сообщением. Если тип файла не проходит проверку, то он просто не отправляется. Специально не прерываю отправку, так как для большинства важно получить хотя бы контакты для связи, чтобы не потерять лида. Больше типов файлов тут.
Вот так выглядит отправка сообщения:
Не стал делать каких-то серьезных валидаций, так как это просто пример и вам наверняка нужно будет не только отправка текста или картинки в Телеграм, но и на почту, а значит все равно подстраивать под свои нужды. Если будут вопросы и замечания — пишите в комментариях.
Вот так, средствами PHP можно отправлять в Telegram сообщения и файлы. Если вы используете CMS MODX, то на блоге igamov.ru есть отличная инструкция по интеграции формы с мессенджером.
Исходник для отправки данных формы в Телеграм
Источник: smartlanding.biz
Как создать чат-бота в Телеграм самостоятельно
Система объединяет в одном окне все мессенджеры, социальные сети и чаты. Обращение клиента нельзя пропустить, ответ будет мгновенным.
Попробовать бесплатно
Аудитория Telegram прошла рубеж в 27 млн активных пользователей в России еще в 2020 году и остается самой быстрорастущей для мессенджеров. По понятным причинам бизнес переходит в Telegram, используя боты для продаж и коммуникации с клиентами. Их можно научить отправлять сообщения-автоответы, добавлять переменные, отправлять веб-хуки, сохранять данные про пользователей, сегментировать аудиторию и делать много другого полезного по работе с клиентами.
Нужно помнить, что бот для Телеграм — это все еще приложение, программа. Создать бота может кто угодно, но вот чтобы обучить, нужно уметь программировать. Если вам незнакомы понятия Python, JavaScript или Flask, API, cgi и HTTP-интерфейс, вряд ли получится написать бота вручную. Но есть решение — конструкторы. В этой статье мы расскажем, как создать бота для телеграмма с нуля, если вы не программист. Но сначала общие сведения.
Общие сведения
Бот — это интерактивное приложение, программа, если хотите — интерфейс к вашему серверу. Бот умеет запускать разные варианты предустановленных сценариев в ответ на нажатие кнопки или какое-то слово. По сути, бот имитирует живое общение.
Зачем нужны боты
Чтобы автоматически обрабатывать и отправлять сообщения. Пользователь может написать вашему боту в обычном чате или канале, и тот ему ответит по заранее разработанному скрипту. Он имитирует живое общение и может выпытывать у юзеров полезную для бизнеса информацию: номера телефонов, э-мейлы, анкетные данные и переносить их в переменные. Его можно научить выполнять команды, рассылать сообщения, отвечать на вопросы клиентов и делать все то, что менеджер раньше делал вручную.
Это можно использовать в бизнесе:
- презентовать себя и продукт
- делать массовые рассылки с новостями
- регистрировать на мероприятия, делать запись на консультацию
- организовать выбор еды в меню для доставки, бронь столиков
- давать ответы на часто задаваемые вопросы
- организовать первичную обработку сообщений в службу поддержки
- сделать сервис оплаты и доставки товаров
- подписать пользователей на обновления
- организовать выбор врача и запись для клиники
- организовать сбор обратной связи, отзывов по продуктам и услугам, т.д.
Любые из этих действий можно упаковать в бота и не делать это вручную. Главное — грамотно продумать логику его поведения. Для примера: вот как выглядит бот для продажи курсов и консультаций от семейного психолога.
Что могут делать боты
Боту можно поручить любую функцию, которую в мессенджере может выполнить человек. Он не просто выполнит ее лучше, но и во много раз быстрее.
- Настроить для коммуникации с клиентами. Бот будет отвечать на сообщения, подбирать продукты, собирать контакты и заявки, давать инструкции, ссылки на оплату, распределять между менеджерами
- Интегрировать с любыми другими сервисами. Например, его можно научить управлять умным домом в приложении, подбирать картинки или gif-анимации в Яндексе под ключевые слова или отвечать на комментарии пользователей в вашем канале
- Использовать как утилиту. Например, бот может отображать юзерам погоду по запросу в конкретном городе, делать автоматический перевод текста, проводить опросы или сообщать о каком-то событии, например, появлении нового товара
- Использовать как интерактив. Бот может играть в шахматы, проводить викторины, тестировать знания пользователей, присылать анекдоты или подбирать вид кофе по вашему знаку зодиака
- Применять для социальной коммуникации. Например, учитывать интересы и предпочтения людей при поиске собеседника, подбирать музыкальные проигрыватели для меломанов
В самом Telegram говорят, что бота можно научить делать что угодно, если это не мытье посуды.
BotFather
С его помощью можно настраивать ранее созданных ботов или создавать новых. Напишите ему, следуйте инструкциям и он поможет вам сделать бота самостоятельно, добавить его и активировать. Правда, все инструкции на английском языке. Ниже — наш пошаговый алгоритм для создания бота на русском.
Как создать бота в Телеграм
2. Придумать название. Можно вписать любое имя, какое хочется. оно будет отображаться в контактах и чатах.
3. Придумать логин. Пишем боту придуманное название и он предлагает нам выбрать для бота логин. Программа предупредит, что логин должен заканчиваться на «bot». Логин должен быть уникальным, программа не пропустит имя пользователя, если оно уже занято. А еще он должен быть написан на латинице (с цифрами и нижним подчеркиванием), содержать от 5 до 32 символов.
3. Сохранить токен. Бот-отец пришлет вам токен вашего бота. Сохраните его в текстовом файле, например, в блокноте. Это ключ для доступа к HTTP API, с помощью которого вы будете программировать робота, получать и отправлять сообщения. Запомнить получится вряд ли, выглядит он примерно вот так:
4. Добавить аватар, описание, приветственное сообщение. Жмем /help и получаем перечень базовых команд. Тут будут в том числе команды для изменения описания (/setdescription), информации о боте (/setabouttext), для загрузки аватара (/setuserpic) и другие. Мы их продублировали в разделе про настройки.
Теперь бот создан, сохранен и активирован. Но чтобы научить его выполнять какие-то функции и отвечать на команды, бот нужно обучить. Для этого нужно работать с языками программирования, уметь писать код и использовать Bot API — HTTP-интерфейс для работы с ботами в Telegram. Или воспользоваться одним из сервисов-конструкторов. Они помогают создавать логику работы ботов без особых проблем и навыков программирования. О них ниже.
Создание токена
Настройки бота
/setname — коррекция имени робота
/setdescription — коррекция описания. Это краткая характеристика создаваемого бота, что он умеет. Это описание будет видно другим пользователям
/setabouttext — коррекция информации. Это описание профиля, еще короче, чем дескрипшн. Если человек даст кому-то ссылку на вашего бота, то второй человек получит это короткое описание вместе со ссылкой
/setuserpic — коррекция аватарки. Иллюстрация — это всегда хорошо, люди смогут идентифицировать вашего бота в списке контактов по картинке
/setcommands — коррекция перечня команд робота. Это команды в формате «/команда». Их увидят пользователи при использовании вашего бота
/setprivacy — настройка приватности. Нужна на случай, если вы хотите подключить бота в группу включить или ограничить его возможность видеть групповые сообщения
/deletebot — удаляет вашего бота
Источник: okocrm.com