Всем — привет. Давно зрела идея разобраться с отправкой данных из формы на сайте в мессенджер Telegram, но руки не доходили, а моментально получать заявки прямо в телефон, ой как хотелось!
И вот, наконец-то посидел и разобрался. Конечно постичь все тонкости API — не удалось, но по кусочкам насобирал информацию и удалось отправить данные из контактной формы в чат Telegram.
Это актуализированная статья, в которой решены такие проблемы, как отправка фото и пропадающий символ «+», который не приходил в сообщение и из-за этого номер телефона был некликабельным. Появилась возможность не просто отправлять 1 фото, а сразу несколько файлов, в том числе PDF, docx и любых других.
Важно: для отправки файла из формы в Телеграм на вашем сервере должен быть включен cURL. Обратитесь к техподдержке вашего хостинга, они подскажут что делать и как включить. У многих он включен по умолчанию. Например, на моем хостинге Beget — так.
Как отправить данные формы на сайте в 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 через свой веб-сайт WordPress. Отправляйте сообщения на свои каналы Telegram через веб-сайт WordPress, чтобы генерировать больше потенциальных клиентов, привлекать трафик на свой сайт и даже координировать свои команды.
Уведомление команды и координация
Канал Telegram отлично подойдет вам, если вам нужно быстро уведомить всю свою команду о таких вещах, как покупки, происходящие на вашем веб-сайте. Этот плагин делает это возможным.
Быстрый ответ аудитории и лидам
Используйте этот подключаемый модуль, если вам нужно быстро реагировать на действия ваших лидов, например, на повторные комментарии, и получать информацию в режиме реального времени о регистрации пользователей и входах в систему.
Получите трафик и социальные сигналы
Нужно, чтобы аудитория вашего веб-сайта была замечена при публикации сообщения? Сообщите участникам вашего канала, что вы опубликовали сообщение, и предложите им посетить ваш веб-сайт.
Источник: vipadmin.club
Instant View для Telegram в WordPress
Всем привет. Сегодня расскажу, как я сделал Instant Viewдля своих постов с WordPressв telegramи настроил автоматический постинг сообщений в нужные каналы сразу после публикации статьи на блоге. Я давненько задавался этим вопросом, но все никак не доходили руки. А тут выдался свободный денек – сел, за пару часов разобрался и реализовал. Данное решение будет работать не только на WordPress — любой сайт можно настроить данным способом.
Сразу делаю оговорку, что для автоматического размещения постов в социальные сети, в том числе telegram-каналы— использую плагин NextScripts: Social Networks Auto-Poster. Это сильно упрощает задачу по репосту и планированию постинга в социальных сетях. Рекомендую.
Давайте вернемся к Instant View.В первую очередь — что же такое Instant View?Это технология быстрого просмотра статьи прямо в telegram.Подобные страницы избавлены от лишнего контента и кешируются самим телеграмом, поэтому открываются прямо на лету – что очень удобно как для глаз так и с точки зрения пользовательского опыта. Характерны такие посты синей кнопкой с молнией:
Для того, чтобы нужные ссылки на вашем сайте при отправке в телеграм имели функцию Instant View – необходимо проделать следующие шаги.
- Вход в центр управления шаблонами Instant View.Переходим на сайт https://instantview.telegram.org и справа видим ссылку “My templates”, по клику на нее входим через свой telegram-аккаунт. На открывшейся странице вводим адрес статьи на Вашем блоге, на примере которой хотите создать свой Instant View. Рекомендую выбирать статью, в которой есть максимальное количество элементов ,которые можете использовать: картинки, видео, аудиофайлы и т.д.:
Нажимаем Enter и видим три окна – статья как она выглядит в браузере, правила для обработки Instant View и предварительный просмотр готового Instant View.
- Поиск нужных тегов в статье.Далее, начинается самое сложное для неискушенного пользователя. Но не волнуйтесь – если у Вас не будет получаться – в комментариях оставляйте свои ссылки на статьи, помогу создать нужный код. Итак, открываем предпросмотр кода в браузере (меню левой кнопки мыши) и находим теги, которые отвечают за вывод статьи. Для примера у меня это
Чтобы понять какой у вас тег отвечает за вывод статьи – наводите и открывайте гармошку кода до тех пор, пока не найдете нужный. Таким же образом находим теги для заголовка статьи, картинки, описания, автора, даты публикации, подзаголовка. Для примера, вот мои теги:
–
Подзаголовок (у меня это количество времени на прочтение статьи)–
Картинка поста–
Тело статьи–
Автор статьи–
Можете открыть код этой статьи и изучить его, чтобы понимали о чем речь.
Вот полный пример обработчика для моего блога:
На сегодня все ) Обязательно задавайте свои вопросы в комментариях и подписывайтесь на мой канал в telegram >>
Источник: poltavcev.biz