Как создать веб бота в телеграмм

5

Как написать Телеграм-бота на JavaScript

Сегодня будем делать бота — это отличное (и быстрое) занятие, которое развивает уставший мозг и даёт возможность отправить друзьям ссылочку со словами «Смотри, это моё».

Для работы понадобятся

• Редактор кода, чтобы писать код. Если не знаете, какой выбрать — мы уже рассказывали. Если не умеете писать код, то вот инструкция, как его написать и запустить.
• Node.js любой версии, выше 0.12. Нужно, чтобы библиотека для ботов заработала. Как установить Node.js.
• Консоль. Или встроенный в систему вариант, или какой-нибудь другой.
• VPN. Возможно но не факт, потому что Телеграм работает не везде.

Шаг 1. Регистрируем бота

Находим в поиске Телеграма бота @botFather — это главный инструмент для создания ботов. Набираем в нём /newbot .

Придумываем название и имя боту. Название — то, как он будет подписан в списке контактов. Имя — строка, по которой его можно будет найти. Обратите внимание, что имя должно оканчиваться на bot . В ответ мы получим токен — длинную последовательность символов, которая пригодится нам в будущем. Мы назвали бота echoKeksBot , но вам придётся придумать другое название, потому что это уже занято. Извините.

Шаг 2. Создаём проект

Создаем папку в любом месте и открываем её в консоли. Там пишем npm init -y — эта команда создаст файл package.json , который выглядит примерно так:

Теперь установим node-telegram-bot-api — это библиотека для создания телеграм-ботов на Node.js. Введём команду:

Создадим пустой файл index.js и напишем там самого простого бота, который будет отвечать на любое сообщение:

Шаг 3. Запускаем бота

Тут всё просто, в консоли пишем node index.js , заходим к нашему боту в телеграм и начинаем с ним общаться. Не закрывайте консоль — бот работает только на вашем компьютере, и без консоли он не станет отвечать.

Как видим, бот успешно отвечает. Но бот-повторяха — не интересно, усложним задачу. Пусть бот присылает нам картинку.

Шаг 4. Отсылаем картинку

Добавим картинку с Кексом в папку с проектом. Для отправки изображения используем метод .sendPhoto() — передадим в него id чата и путь до картинки. Получится такой код:

Запускаем бота, проверяем, работает:

Шаг 5. Добавим клавиатуру. И пёсика

Добавим фотографию милого пёсика в корень проекта. Теперь там две картинки.

Создадим конфигурацию для клавиатуры в боте, пусть у нас будет 3 кнопки: «Хочу кота», «Хочу пёсика» и «Пойти учиться».

На нажатия первых двух кнопок мы ответим соответствующим сообщением в Телеграме, а последняя уведёт на внешний ресурс.

Чтобы отличить первые 2 кнопки, воспользуемся полем callback_data , где будем передавать тип кнопки. Для обработки нажатий добавим слушателя на событие callback_query , и в зависимости от значения query.data отправим нужную картинку к пользователю.

Не забудем про возможные ошибки и предложим пользователю попробовать снова, если он ввёл что-то не то. Перезапустим бота и проверим — всё работает. Главное — не закрывать консоль, иначе бот перестанет отвечать.

Полный файл с кодом: index.js.

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

Познакомьтесь с JavaScript бесплатно

На интерактивных тренажёрах. А вместе с JavaScript — бесплатное знакомство с HTML и CSS.

15 сервисов для простого создания ботов в Telegram

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

Не стану писать типичную вводную часть для начала таких подборок про «что такое боты», «почему боты популярны», «для чего боты нужны» и так далее, поэтому перейдём к делу.

Я решила не останавливаться на тех конструкторах, которые нашла в прошлой статье, и найти вообще все сервисы по созданию ботов в Telegram. Если окажется, что не учла какие-либо проекты или сделала не совсем верное описание, пишите в комментарии — добавлю или исправлю.

Все сервисы расположены в том порядке, в котором на них наткнулась при поиске.

Manybot — личный кабинет сервиса представлен в виде бота в Telegram. Конструктор позволяет создавать меню, подменю, форму обратной связи, подключать RSS-ленты и делать рассылки по всем подписанным пользователям.

Стоимость: бесплатно (с рекламой, где создан бот). Поменять тариф или отключить рекламное сообщение нельзя.

Мобильная версия: есть. Сервис работает через Telegram.

Личный опыт: сервис идеально подходит для небольших проектов, но создавать меню более четырёх уровней через интерфейс бота становится сложно. Помимо этого, бот долго отвечает (или не отвечает совсем).

Сервис не обновляется с 2015 года.

Botobot — узконаправленный сервис, который позволяет создать бот-магазин. Загрузка товаров происходит через Excel. Можно делать рассылки новостей магазина, отсутствует настройка меню и вообще сделать что-то кроме магазина (или как-то кастомизировать магазин) не представляется возможным.

Стоимость: бесплатный тариф (бессрочно, ограничение 20 товаров, рекламное сообщение сервиса). Минимальный платный тариф — 640 рублей в месяц.

Мобильная версия: есть.

Личный опыт: сильно ограниченный сервис в плане дополнительных возможностей и настроек. Надеялась на оплату непосредственно через Telegram, но такую функцию не обнаружила. Есть возможность на платном тарифе подключить CRM или настроить API.

Bottap — конструктор со стандартными возможностями: можно создать меню, формы обратной связи, интернет-магазин, онлайн-запись, делать простые рассылки.

Стоимость: бесплатный тариф (бессрочно, рекламное сообщение сервиса, нет интернет-магазина и онлайн-записи). Минимальный платный тариф — 390 рублей в месяц.

Мобильная версия: есть.

Личный опыт: сервис с приятным и вполне понятным личным кабинетом. Подходит для средних (по глубине вкладок) ботов. При создании больших ботов появились сложности (исходя из реализации просмотра команд в конструкторе).

Присутствуют странности: у некоторых блоков нет кнопки «Удалить» (блок обратной связи), кнопки в меню нельзя расположить по желанию пользователя, нельзя изменить сообщение, отправляемое с клавиатуры, и прочее.

Chatforma — интересный сервис, имеется вся необходимая функциональность: форма ввода, интернет-магазин, разные опросы, рассылки и всё то, что должно быть (не нашла только общение через бота). Имеется возможность создать теги для распознавания команд. Большое количество сервисов для интеграции.

Стоимость: триал-версия (15 дней с полной функциональностью). Минимальный платный тариф — 4000 рублей за два месяца, дальше по 2000 рублей в месяц (странно, но как-то так).

Мобильная версия: нет.

Личный опыт: большой сервис с активной поддержкой сообщества (видеоуроки, конкурсы и прочее). Содержит в себе необходимую функциональность для создания серьёзного бота. Простой и понятный личный кабинет. Нет чего-то особенного (разве что опросы), но есть всё необходимое.

Botmaker — сервис со стандартной функциональностью: отправка сообщений разного вида, формы ввода, рассылки и. всё, но с парой интересных модульных решений, таких как: бронирование, запись на услугу, вызов персонала, приглашение и несколько других.

Стоимость: бесплатный тариф (отдельной страницы с информацией о тарифах нет, поэтому в чём конкретно ограничения, так и не поняла, недоступны модули). Минимальный платный тариф — 29 500 рублей (нет, не опечатка).

Мобильная версия: нет.

Личный опыт: очень странная реализация конструктора, причём их несколько кардинально разных (есть конструктор для клавиатуры-меню и ещё конструктор Smart Sale Tree). Интересные модульные решения, но не получилось посмотреть в работе, так как не смогла опубликовать модульные кнопки из-за постоянно вылезающей ошибки, с которой не поняла как справиться.

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

Стоимость: бесплатный тариф (бессрочно, есть рекламное сообщение сервиса). Минимальный платный тариф — 490 рублей в месяц.

Мобильная версия: есть.

Личный опыт: самая удобная мобильная версия личного кабинета из всех представленных конструкторов в статье, интуитивно понятный интерфейс, активная поддержка и разносторонность в возможностях (про группы и каналы).

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

Botmother — платформа с множеством различных функций (если получится разобраться, как их использовать) и интеграциями. Длинная «палитра» блоков для конструктора, диалоги с пользователем, рассылки и не только.

Стоимость: бесплатный тариф (бессрочно, нет рекламного сообщения сервиса, из вкладок доступен только конструктор с ограничениями). Минимальный платный тариф — 1499 рублей в месяц.

Мобильная версия: нет.

Личный опыт: безусловно сильный сервис, но как я уже писала в предыдущей статье (в которой разобрала плюсы и минусы), конструктор показался сложен в освоении из-за обилия функций и мессенджеров, которые можно подключить (что-то доступно для одного, но недоступно для другого).

Интерфейс личного кабинета сильно напоминает Aimylogic (про него ниже).

Socialbot — конструктор, который умеет выводить информацию и отображать клавиатуру. Помимо этого, есть восемь модулей, в числе которых: вопросы, общение с пользователями, информация о новинках с сайтов Lostfilm и Seasonvar, простой заказ и гадание таро.

Стоимость: бесплатный тариф (бессрочно, нет рекламного сообщения сервиса, есть ограничение по модулям). Минимальный платный тариф — 500 рублей в месяц.

Мобильная версия: нет.

Личный опыт: слабый по возможностям и по удобству в работе сервис.

Сервис не обновляется с 2016 года.

Aimylogic — очередной отличный сервис по созданию всеми привычных «текстовых» ботов и непривычных ботов для обзвонов (для платного тарифа). Интересные, но сложные для освоения функции, такие как: «интенты» и «сущности». Подойдёт для создания ИИ и захвата мира.

Стоимость: бесплатный тариф (бессрочно, нет рекламного сообщения сервиса, есть ограничение по функциям и по количеству пользователей). Минимальный платный тариф — 5900 рублей в месяц.

Мобильная версия: нет.

Личный опыт: интерфейс конструктора выглядит похожим на Botmother (но Aimylogic намного старше, а следовательно, можно предположить, кто на кого похож). В нём нет привычных функций: корзина, создание инлайн-клавиатуры, отправки файла, но можно создать бота, который будет угадывать то, о чём ему пишут.

Стоимость: бесплатный тариф (ограничение 50 исходящих сообщений в сутки, нет рекламного сообщения сервиса). Минимальный платный тариф — 499 рублей.

Мобильная версия: нет.

Личный опыт: очень долго грузит, часто натыкалась на ошибки «сервер не отвечает» — протестировать не удалось.

Telegrambot.biz — простой сервис для создания простых ботов, которые могут присылать разного рода информацию (текст, изображения, документы) с возможностью прикреплять клавиатуру.

Стоимость: бесплатно (нет рекламного сообщения сервиса).

Мобильная версия: есть.

Личный опыт: простой бесплатный сервис по созданию очень простых ботов.

Flow XO — насыщенная функциями платформа для создания ботов под бизнес-задачи. Включает в себя более чем 100 различных интеграций. Конструктор подключается к самым известным и популярным сервисам.

Стоимость: бесплатный тариф (бессрочно, нет рекламного сообщения сервиса, есть ограничение на пять диалогов). Минимальный платный тариф — $19 (1235 рублей) в месяц.

Мобильная версия: есть.

Личный опыт: совершенно непростой, полностью англоязычный сервис. Большая возможность для разработчиков: подключать API, настраивать веб-хуки, интеграции и прочее. Для команд можно задавать переменные, ставить фильтры срабатывания и создавать шаблоны для «распознавания» сообщений.

Telebot — сервис позволяет создавать ответы на команды с обычной и инлайн-клавиатурой, а также форму для ввода текста.

Стоимость: триал-версия (десять дней). Минимальный платный тариф — $20 (1300 рублей) за три месяца.

Мобильная версия: нет.

Личный опыт: непривлекательный интерфейс личного кабинета, совершенно обычная функциональность.

Info bot — с этим конструктором можно создать бота для отправки сообщений, умеет отображать клавиатуру, можно просматривать диалог с пользователем и делать рассылки.

Стоимость: триал-версия (десять дней). Минимальный платный тариф — 3000 рублей в месяц.

Мобильная версия: нет.

Личный опыт: создавать команды пришлось с использованием интуиции, так как отсутствуют подсказки и плейсхолдеры. Не во всём удалось разобраться. Внешний вид и возможности конструктора примитивны.

Ebot one — «редактор ботов позволяет без навыков программирования спланировать структуру бота. Если же навыки программирования имеются — логику можно сделать намного сложнее, а бота интереснее и полезнее». (Текст из группы во «ВКонтакте».)

Стоимость: бесплатный тариф (ограничен одним ботом и бесплатной функциональностью). минимальный платный тариф — 200 рублей в месяц.

Мобильная версия: нет.

Личный опыт: не смогла разобраться.

Последнее обновление сервиса было 8 сентября 2018 года.

Конструкторов для создания бота в Telegram много, но действительно хороших мало. Из приведённого выше списка могу отметить наиболее интересные платформы:

По этим пяти сервисам в ближайшее время напишу подробный сравнительный обзор. Пишите в комментариях, какие критерии для сравнения вам особенно интересны.

Если вы знаете ещё какие-либо проекты или считаете, что я сделала не совсем верное описание, то пишите в комментарии — добавлю или исправлю.

И какой смысл от таких сервисах? Создать бота "онлайн чат". На большее, такие сервисы неспособны. Вот когда какой-то сайт сможет создать что-то типа такого https://t.me/tegrocash_bot будет другой разговор.

5к – нормальная цена? Как вам?
P.S. Теперь все статьи так проверять, штоле.

Это нативка своего сервиса, ненавязчиво вшитая в сравнение с конкурентами? Или какой выхлоп публиковать купленный текст?

Конструкторы это круто, но для серьезных проектов они не подойдут.
1. Там есть реклама (не у всех)
2. Функционал ограничен
3. Ещё и платные.
Создавать ботов (таких как делают на этих сервисах)не так сложно, и хостить можно бесплатно.

Не совсем согласна) Создавать ботов не так сложно, если умеешь программировать (так можно сказать и про сайты, и про различный софт и так далее), а если не умеешь программировать, то единственный вариант воспользоваться сервисом-конструктором. Либо учиться программировать 🙂

Самое интересное что буквально недавно узнал новый сервис: Integromat, любые сложные сценарии и интеграции легко и просто. Учитывая мой опыт с Corezoid, могу сказать что это реально легко.

Спасибо за подборку!

Здорово, что сделали такой обзор!
А Вам не попадался конструктор ботов с автозаполнением документов? Задача: пользователь отвечает на вопросы, на выходе получает заполненную форму документа

Спасибо! К сожалению нет, задача слишком "узкая", подобного бота не встречала.

Могу помочь с этим 🙂

Ну, чисто теоретически, у того же botmother есть возможность работать с get\post запросами, и, судя по всему, если сделать какой-нибудь бекенд для генерации документов — то всё получится. С другой же стороны, если уже где-то крутится бекенд для этой штуки, то ничего не мешает там же поставить своего бота, благо сделать его стоит не дорого, и уже никак не зависеть от сторонних сервисов.

На Python такое пишется очень быстро)
Жаль, что я давно ничего не писал, так бы помог.

Можете посмотреть наше решение flexbby workflow, flexbby.com/ru/ это полноценный инструмент с workflow back end templating pdfing и т.п. есть расширение DialogForce для создания ботов под любые каналы. Оставляйте заявку обсудим задачу. Думаю такой бот очень легко настраивается.

Это можно сделать в Chatforma, используя интеграцию с Google Doc, например. Они даже записывали простой видеоурок, как это сделать

На конструкторе Чатформа эта задача реализовывается. На обучающем портале даже урок есть на эту тему.

Для ВК бы ещё подборку

Для ВК есть подборки, а вот для телеграма найти не могла) Botmother из подборки может работать в тг, вк, фб и других соцсетях. Еще могу посоветовать https://robochat.io/ сервис только для вк.

Aimylogic в ВК тоже работает, и в Facebook, и во всех ассистентах, и даже на английском 🙂

Я создаю ботов на платформе salebot.pro. Не выключили в этот список, хотя там функционал довольно хороший.

Спасибо — отличный обзор! Помог определиться с выбором (пробным).
Для следующих разборов можно попробовать итоговое сравнение в виде таблицы.
В таблице 10-15 типовых функций сравниваемых сервисов (что есть, чего нет, цифры и пр.).
Еще раз спасибо.

Благодарю за прочтение и предложение, постараюсь сделать �� Рекомендую прочитать более актуальную статью: https://vc.ru/services/110661-28-servisov-po-sozdaniyu-chat-botov-v-telegram

Комментарий удален модератором

Благодарю! Обязательно посмотрю.

Да, могут.
У меня на FlowXO такой функционал в боте реализован.

Для телеграмм более-менее картина ясна. Как быть с viber и Facebook messenger?

У нас два бота в Telegram работают на Botmother. Первый — бот-бухгалтер @iloveipbot (https://tele.click/iloveipbot), он отправляет и получает различные данные по API (рассчитывает налоги и взносы ИП, формируем платёжки для оплаты налогов и взносов, декларацию по УСН, определяет реквизиты ИФНС по адресу и геолокации и т. д.). Второй — ИФНС бот @ifnsbot (https://tele.click/ifnsbot), он формирует различные документы для ИП (заявление о внесении изменений в ОКВЭД, заявление о прекращении ИП). Оба бота связаны с нашим бэкендом.

В Ботмаме есть возможность присваивать разные ярлыки пользователям и по ним делать рассылку (это к вопросу о возможности отправлять рассылки по разным группам людей из предыдущей статьи). Также можно ограничить доступ к разделам разным пользователям, например, по паролю или по тому же ярлыку. У нас так работает оплата в боте. После того, как человек оплатил подписку, ему присваивается ярлык с полным доступом ко всем экранам.

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

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

Что такое Telegram знает каждый пользователь соцсетей. Это один из самых популярных мессенджеров в России, с помощью которого можно не только переписываться с друзьями, но и продвигать различные бизнес-проекты.

Чат-бот — это программа, которая имитирует реальный диалог с клиентом в различных мессенджерах. На сегодняшний день — это один из успешных инструментов рекламного продвижения. В статье мы разберёмся, как создать чат-бот в телеграмме самостоятельно бесплатно, не прибегая к услугам программистов.

Что такое чат-бот и для чего он нужен

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

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

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

Основные функции чат-бота:

• ответы на самые часто задаваемые вопросы;
• создание меню с командами для дальнейшей работы;
• создание рассылок для подписчиков;
• ведение статистики подписчиков;
• развлекательный контент;
• показ новостной ленты.

Чат-бот посылает запрограммированную информацию в зависимости от тематики канала. Это может быть график работы магазина, стоимость услуг, курс валют и так далее. В названии такого аккаунта всегда есть слово bot.

Основными преимуществами создания такого помощника является:

• круглосуточная работа — чат-бот предоставит информацию для клиента 24/7;
• клиент может моментально получить ответ на интересующий вопрос;
• для работы с роботом не требуется установка дополнительных программ.

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

Создание чат-бота в телеграме

Для начала необходимо зайти в свой аккаунт в телеграмме или скачать приложение через App Store или Play Маркет. Для установки приложения на компьютер необходимо скачать установочный файл с официального сайта.

Следующий шаг как создать бота в телеграмме самостоятельно бесплатно — создание своего помощника с помощью специальных сервисов-конструкторов. Самые популярные:

• Puzzlebot;
• Manybot;
• Botobot;
• Bottap;
• BotFather.

У каждого сервиса есть платные и бесплатные версии работы, также будет отличаться функциональные возможности будущего помощника. Разберем как создавать ботов в телеграме на телефоне.

Создаём чат-бот через сервис BotFather

Открываем приложение телеграма и в поисковой строке набираем имя «BotFather». Это официальный системный бот приложения, который помогает с регистрацией других ботов в мессенджере. Обратите внимание, что у данного сервиса есть официальное подтверждение — синяя галочка.

Шаг 1. Бот запрограммирован давать ответы, поэтому он никогда не начинает диалог. Чтобы получить информацию об установке вашего помощника, необходимо дать системному боту команду. Напишите в диалоговое окно /newbot. Далее бот будет задавать вопросы или давать инструкции.

Шаг 2. Необходимо придумать имя боту — оно будет отображаться в поисковой строке в списке контактов. Как правило, существующему названию компании или профиля в соцсети дописывают приставку bot. Если имя занято, то будут приходить системные сообщения — необходимо придумать другое. Для названия помощника можно использовать от 5 до 32 символов.

Шаг 3. После успешной регистрации бота появится следующее системное сообщение, в котором есть личный токен для последующих интеграций с различными сервисами.

Чат-бот готов. Для дальнейшей работы необходимо будет скопировать токен и вставлять на рабочие платформы для перехода в чат-бот. Также токен необходимо скопировать и вставить в диалоговое окно и после того придёт системное сообщение, что бот принят и готов к дальнейшей работе.

Настраиваем чат-бот

Для более полной информации необходимо настроить описание чат-бота — вставить аватар, написать информацию о компании.

Для этого нужно в диалоговом окне нажать команду /mybots. Появится меню настроек и редактирования.

И далее по очереди делаем описание каждого необходимого пункта. В любой момент можно редактировать описание и менять информацию.

Создаём команды для чат-бота

Далее необходимо прописать необходимые команды, которые будет выполнять бот. Необходим начать с ним диалог — для этого нажимаем команду «нажать» внизу чата.

Ниже отобразится список команд, которые можно использовать в работе с ботом:

• /newpost — отправка сообщений подписчикам;
• /schedule — посмотреть отложенные посты;
• /subscrlbers — посмотреть количество подписчиков;
• /commands — создание собственных команд и настройка бота;
• /botlang — установка языка бота
• /setdescription — возможность отредактировать описание бота;
• /channels — настройка автоматической выкладки постов в Телеграм;
• /admins — управление администраторами бота;
• /tutorials — ответы на вопросы, связанные с созданием и настройкой бота;

Данный список команд виден только владельцу бота. Например, если необходимо выложить пост, следует нажать на вкладку /newpost и выполнить дальнейшие указания.

Для удобства общения подписчиков с ботом необходимо создать несколько горячих кнопок, нажав на которые они могут получить ответ на интересующий вопрос. Для это нажимаем на кнопку «Пользовательские команды» и далее «Создать команду».

Название команды задаётся латинскими буквами. Впереди всегда необходимо ставить слэш / (косая черта). После ввода имени команды в поле и нажимаем «enter».

Сейчас заходя в бот, посетители видят коммуникационную кнопку. Далее необходимо создать ответ бота, который будет получать подписчик, нажав на кнопку. Не забываем сохранить ответ, который будет отображаться.

Если всё сделано верно, то придёт системное сообщение о том, что команда создана и она сразу будет отображаться. Самые популярные команды:

• ответы на популярные вопросы;
• прайс с ценами;
• сторонняя ссылка, где скачать бесплатную информацию — подарок при регистрации или покупки товара/услуги.

С помощью таких информационных кнопок клиент может быстро получить всю интересующую его информацию.

Добавляем команду в меню бота

Чтобы каждый раз не приходилось вручную вводить команду, необходимо создать кнопки запроса. Для этого нажимаем на кнопку «Настроить главное меню» и далее выбираем команду «Добавить пункт меню».

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

После этого кнопка отобразится в меню, именно в таком варианте её видит посетитель чат-бота.

Удаляем и редактируем команды

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

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

Заключение

Чат-бот — это неотъемлемый помощник в коммуникации с клиентом и в сборе информации. Каждый, кто прочёл нашу пошаговую инструкцию как создать бота в телеграмме самому бесплатно, теперь точно знает последовательность нужных действий. Всего за несколько минут можно создать виртуального консультанта, который будет всё время на связи с клиентом.

Web Apps for Bots

Telegram bots can completely replace any website. They support seamless authorization, integrated payments via 15 payment providers (with Google Pay and Apple Pay out of the box), delivering tailored push notifications to users, and much more.

With Web Apps, bots get a whole new dimension. Bot developers can create infinitely flexible interfaces with JavaScript, the most widely used programming language in the world.

To see a Web App in action, try our sample @DurgerKingBot.

Recent changes

August 12, 2022

Bot API 6.2

• Added the field isClosingConfirmationEnabled and the methods enableClosingConfirmation, disableClosingConfirmation, showPopup, showAlert, showConfirm to the class WebApp.
• Added the field is_premium to the class WebAppUser.
• Added the event popupClosed.

June 20, 2022

Bot API 6.1

• Added the ability to use bots added to the attachment menu in group, supergroup and channel chats.
• Added support for t.me links that can be used to select the chat in which the attachment menu with the bot will be opened.
• Added the fields version, headerColor, backgroundColor, BackButton, HapticFeedback and the methods isVersionAtLeast, setHeaderColor, setBackgroundColor, openLink, openTelegramLink, openInvoice to the class WebApp.
• Added the field secondary_bg_color to the class ThemeParams.
• Added the method offClick to the class MainButton.
• Added the fields chat, can_send_after to the class WebAppInitData.
• Added the eventsbackButtonClicked, settingsButtonClicked, invoiceClosed.

Designing Web Apps

Color Schemes

Web Apps always receive data about the user's current color theme in real time, so you can adjust the appearance of your interfaces to match it. For example, when users switch between Day and Night modes or use various custom themes.

Design Guidelines

Telegram apps are known for being snappy, smooth and following a consistent cross-platform design. Your Web App should ideally reflect these principles.

• All elements should be responsive and designed with a mobile-first approach.
• Interactive elements should mimic the style, behavior and intent of UI components that already exist.
• All included animations should be smooth, ideally 60fps.
• All inputs and images should contain labels for accessibility purposes.
• The app should deliver a seamless experience by monitoring the dynamic theme-based colors provided by the API and using them accordingly.

Implementing Web Apps

Telegram currently supports four different ways of launching Web Apps: from a keyboard button, from an inline button, from the bot menu button – and even from the attachment menu.

Keyboard Button Web Apps

TL;DR: Web Apps launched from a web_app type keyboard button can send data back to the bot in a service message using Telegram.WebApp.sendData. This makes it possible for the bot to produce a response without communicating with any external servers.

Users can interact with bots using custom keyboards, buttons under bot messages, as well as by sending freeform text messages or any of the attachment types supported by Telegram: photos and videos, files, locations, contacts and polls. For even more flexibility, bots can utilize the full power of HTML5 to create user-friendly input interfaces.

You can send a web_app type KeyboardButton that opens a Web App from the specified URL.

To transmit data from the user back to the bot, the Web App can call the Telegram.WebApp.sendData method. Data will be transmitted to the bot as a String in a service message. The bot can continue communicating with the user after receiving it.

Good for:

• Сustom data input interfaces (a personalized calendar for selecting dates; selecting data from a list with advanced search options; a randomizer that lets the user “spin a wheel” and chooses one of the available options, etc.)
• Reusable components that do not depend on a particular bot.

Inline Button Web Apps

TL;DR: For more interactive Web Apps like @DurgerKingBot, use a web_app type Inline KeyboardButton, which gets basic user information and can be used to send a message on behalf of the user to the chat with the bot.

If receiving text data alone is insufficient or you need a more advanced and personalized interface, you can open a Web App using a web_app type Inline KeyboardButton.

From the button, a Web App will open with the URL specified in the button. In addition to the user's theme settings, it will receive basic user information ( ID , name , username , language_code ) and a unique identifier for the session, query_id, which allows messages on behalf of the user to be sent back to the bot.

The bot can call the Bot API method answerWebAppQuery to send an inline message from the user back to the bot and close the Web App. After receiving the message, the bot can continue communicating with the user.

Good for:

• Fully-fledged web services and integrations of any kind.
• The use cases are effectively unlimited.

Launching Web Apps from the Menu Button

TL;DR: Web Apps can be launched from a customized menu button. This simply offers a quicker way to access the app and is otherwise identical to launching a Web App from an inline button.

By default, chats with bots always show a convenient menu button that provides quick access to all listed commands. With Bot API 6.0, this button can be used to launch a Web App instead.

To configure the menu button, you must specify the text it should show and the Web App URL. There are two ways to set these parameters:

• To customize the button for all users, use @BotFather (the /setmenubutton command or Bot Settings > Menu Button).
• To customize the button for both all users and specific users, use the setChatMenuButton method in the Bot API. For example, change the button text according to the user's language, or show links to different Web Apps based on a user's settings in your bot.

Apart from this, Web Apps opened via the menu button work in the exact same way as when using inline buttons.

@DurgerKingBot allows launching its Web App both from an inline button and from the menu button.

Launching Web Apps from the Attachment Menu

TL;DR: Web App Bots can request to be added directly to a user's attachment menu, allowing them to be quickly launched from any chat. To try this mode, open this attachment menu link for @DurgerKingBot, then use the menu in any type of chat.

Web App Bots can request to be added directly to a user's attachment menu, allowing them to be quickly launched from any type of chat. You can configure in which types of chats your web app can be started from the attachment menu (private, groups, supergroups or channels).

Attachment menu integration is currently only available for major advertisers on the Telegram Ad Platform. However, all bots can use it in the test server environment.

To enable this feature for your bot, open @BotFather from an account on the test server and send the /setattach command – or go to Bot Settings > Configure Attachment Menu. Then specify the URL that will be opened to launch the bot's Web App via its icon in the attachment menu.

You can add a 'Settings' item to the context menu of your Web App using @BotFather. When users select this option from the menu, your bot will receive a settingsButtonClicked event.

In addition to the user's theme settings, the bot will receive basic user information ( ID , name , username , language_code , photo ), as well as public info about the chat partner ( ID , name , username , photo ) or the chat info ( ID , type , title , username , photo ) and a unique identifier for the web view session query_id, which allows messages of any type to be sent to the chat on behalf of the user that opened the bot.

The bot can call the Bot API method answerWebAppQuery, which sends an inline message from the user via the bot to the chat where it was launched and closes the Web App.

You can read more about adding bots to the attachment menu here.

Initializing Web Apps

To connect your Web App to the Telegram client, place the script telegram-web-app.js in the <head> tag before any other scripts, using this code:

Once the script is connected, a window.Telegram.WebApp object will become available with the following fields:

The application can display just the top part of the Web App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Web App to its maximum height, while the bot can do the same by calling the expand() method. As the position of the Web App changes, the current height value of the visible area will be updated in real time.

The application can display just the top part of the Web App, with its lower part remaining outside the screen area. From this position, the user can “pull” the Web App to its maximum height, while the bot can do the same by calling the expand() method. Unlike the value of viewportHeight , the value of viewportStableHeight does not change as the position of the Web App changes with user gestures or during animations. The value of viewportStableHeight will be updated after all gestures and animations are completed and the Web App reaches its final size.

ThemeParams

Web Apps can adjust the appearance of the interface to match the Telegram user's app in real time. This object contains the user's current theme settings:

PopupParams

NEW This object describes the native popup.

PopupButton

NEW This object describes the native popup button.

BackButton

This object controls the back button, which can be displayed in the header of the Web App in the Telegram interface.

All these methods return the BackButton object so they can be chained.

MainButton

This object controls the main button, which is displayed at the bottom of the Web App in the Telegram interface.

All these methods return the MainButton object so they can be chained.

HapticFeedback

This object controls haptic feedback.

All these methods return the HapticFeedback object so they can be chained.

WebAppInitData

This object contains data that is transferred to the Web App when it is opened. It is empty if the Web App was launched from a keyboard button.

WebAppUser

This object contains the data of the Web App user.

WebAppChat

This object represents a chat.

Validating data received via the Web App

To validate data received via the Web App, one should send the data from the Telegram.WebApp.initData field to the bot's backend. The data is a query string, which is composed of a series of field-value pairs.

You can verify the integrity of the data received by comparing the received hash parameter with the hexadecimal representation of the HMAC-SHA-256 signature of the data-check-string with the secret key, which is the HMAC-SHA-256 signature of the bot's token with the constant string WebAppData used as a key.

Data-check-string is a chain of all received fields, sorted alphabetically, in the format key=<value> with a line feed character ('\n', 0x0A) used as separator – e.g., 'auth_date=<auth_date>\nquery_id=<query_id>\nuser=<user>' .

The full check might look like:

To prevent the use of outdated data, you can additionally check the auth_date field, which contains a Unix timestamp of when it was received by the Web App.

Once validated, the data may be used on your server. Complex data types are represented as JSON-serialized objects.

Events Available for Web Apps

The Web App can receive events from the Telegram app, onto which a handler can be attached using the Telegram.WebApp.onEvent(eventType, eventHandler) method. Inside eventHandler the this object refers to Telegram.WebApp, the set of parameters sent to the handler depends on the event type. Below is a list of possible events:

Adding Bots to the Attachment Menu

Attachment menu integration is currently only available for major advertisers on the Telegram Ad Platform. However, all bots can use it in the test server environment. Talk to Botfather on the test server to set up the integration.

A special link is used to add bots to the attachment menu:

https://t.me/botusername?startattach
or
https://t.me/botusername?startattach=command

For example, open this attachment menu link for @DurgerKingBot, then use the menu in any private chat.

Opening the link prompts the user to add the bot to their attachment menu. If the bot has already been added, the attachment menu will open in the current chat and redirect to the bot there (if the link is opened from a 1-on-1 chat). If a non-empty startattach parameter was included in the link, it will be passed to the Web App in the start_param field and in the GET parameter tgWebAppStartParam.

The following link formats are also supported:

https://t.me/username?attach=botusername
https://t.me/username?attach=botusername&startattach=command
https://t.me/+1234567890?attach=botusername
https://t.me/+1234567890?attach=botusername&startattach=command

These links open the Web App in the attachment menu in the chat with a specific user. If the bot wasn't already added to the attachment menu, the user will be prompted to do so. If a non-empty startattach parameter was included in the link, it will be passed to the Web App in the start_param field and in the GET parameter tgWebAppStartParam.

Bot API 6.1+ supports a new link format:

Opening such a link prompts the user to choose a specific chat and opens the attachment menu in that chat. If the bot wasn't already added to the attachment menu, the user will be prompted to do so. You can specify which types of chats the user will be able to choose from. It can be one or more of the following types: users, bots, groups, channels separated by a + sign. If a non-empty startattach parameter was included in the link, it will be passed to the Web App in the start_param field and in the GET parameter tgWebAppStartParam.

Testing Web Apps

Using bots in the test environment

To log in to the test environment, use either of the following:

• iOS: tap 10 times on the Settings icon > Accounts > Login to another account > Test.
• Telegram Desktop: open ☰ Settings > Shift + Alt + Right click ‘Add Account’ and select ‘Test Server’.
• macOS: click the Settings icon 10 times to open the Debug Menu, ⌘ + click ‘Add Account’ and log in via phone number.

The test environment is completely separate from the main environment, so you will need to create a new user account and a new bot with @BotFather.

After receiving your bot token, you can send requests to the Bot API in this format:

Note: When working with the test environment, you may use HTTP links without TLS to test your Web App.