Как сделать меню и кнопки в Telegram-боте
Заберите этого бота готовым шаблоном
Бесплатно для подписчиков канала «Нейроботы»: бот в Telegram проверит подписку и пришлет ссылку. Шаблон ставится в LeadContact одной кнопкой.
Человек открыл бота и не понимает, куда жать? Значит, меню не то. В Telegram-боте их три вида: кнопки под сообщением, клавиатура под полем ввода и кнопка «Меню» слева от поля. Собираем все три в конструкторе LeadContact без программиста и без кода. Пример в ролике - бот барбершопа «Бритва», подставьте свой салон, студию или мастерскую.
Где спотыкаются
- В ответе нет кнопки «Главное меню», и человек упирается в тупик.
- Пришло сообщение с кнопками под ним, и клавиатура под полем ввода свернулась в значок. Это нормально: нажмите значок, она вернется.
- Команды в BotFather задали, а «Глобальное меню» не добавили. Кнопка «Меню» есть, а бот на команды молчит.
Что понадобится
- аккаунт в LeadContact: подключить Telegram можно на пробном Pro (14 дней)
- бот в Telegram, его создают в BotFather (в ролике показано как)
- тексты для кнопок: цены, адрес, акция
Шаги
- Три вида меню в Telegram-боте Три вида меню и какое когда нужно. В конце ролика бота можно забрать шаблоном.
- Создаем бота в LeadContact «Создать», имя «Барбершоп Бритва» и еще раз «Создать». Мессенджер подключим позже.
- BotFather: как создать бота и получить ключ BotFather с синей галочкой → «новый бот» → имя → адрес с «bot» на конце. Нажимаем на строку ключа, и он скопирован. Ключ никому не показываем.
- Подключаем Telegram к конструктору В редакторе «Подключить мессенджер» → Telegram → вставляем ключ → «Сохранить».
- Кнопки под сообщением Стрелка от «Старта» к цепочке сообщений: фото и приветствие. Кнопки «Цены», «Где мы», «Акция недели», в «Раскладке кнопок» короткие по две в ряд, длинная отдельно.
- Ответы на кнопки и «Главное меню» Каждая кнопка на схеме стала выходом, от нее тянем стрелку к ответу. В ответе кнопка «Главное меню» и стрелка обратно к приветствию, чтобы человек не застрял.
- Проверяем бота в Telegram Жмем «Запустить» в Telegram: меню пришло прямо под сообщением. Минус один: переписка растет, и меню уезжает вверх.
- Клавиатура под полем ввода В «Раскладке кнопок» перетаскиваем ряды из зоны «Под сообщением» в «Под полем ввода». Стрелки на схеме те же, меняется только место кнопок.
- Кнопка «Меню»: команды в BotFather BotFather → /setcommands → свой бот → команды с новой строки: «menu - Главное меню», «prices - Цены». Слева от поля появляется кнопка «Меню».
- Глобальное меню: бот отвечает на команды Блок «Глобальное меню» с пунктами /menu и /prices, стрелки к приветствию и ценам. Команды работают из любого места бота.
- Какое меню когда ставить Кнопки под сообщением - для выбора на шаге, клавиатура - для главного меню, кнопка «Меню» - для команд, которые нужны откуда угодно.
Результат
Бот с главным меню тремя способами: кнопки под приветствием, клавиатура под полем ввода и кнопка «Меню» с командами /menu и /prices. Из любого места бота человек возвращается в меню одной кнопкой.
Расшифровка ролика
Три вида меню
В Telegram-боте бывает три вида меню. Кнопки под сообщением, клавиатура под полем ввода и кнопка «Меню» слева от поля. Сегодня соберем все три в конструкторе LeadContact, без программиста. На примере бота для барбершопа. И разберемся, какое меню когда ставить, чтобы человек в боте не терялся. В конце этого бота можно будет забрать готовым шаблоном, бесплатно.
Создаем бота
Это кабинет LeadContact. Жмем «Создать». Пишем имя бота: «Барбершоп Бритва». Еще раз «Создать». Мессенджер подключим чуть позже, пока жмем «Подключу позже». Открылась схема бота. Если у вас она выглядит по-другому, включите новый редактор: кнопка со стрелками справа вверху.
Свой бот у BotFather
Теперь нужен свой бот в Telegram. Ключ к нему выдает официальный бот BotFather. Находим BotFather в поиске. Смотрите, чтобы рядом стояла синяя галочка. Если вы здесь впервые, нажмите «Запустить». Отправляем ему команду «новый бот». Как она пишется, видно на экране. BotFather спрашивает имя. Его люди увидят в шапке чата, так что пишем, как будет называться ваш бот. Теперь адрес бота. Только латиница, и в конце обязательно «bot». Если адрес занят, BotFather попросит другой. Готово, бот создан. Длинная строка из цифр и букв в ответе и есть ключ. Нажимаем на нее, и ключ скопирован. Никому его не показывайте: по ключу можно управлять ботом.
Подключаем Telegram
Возвращаемся в редактор и жмем «Подключить мессенджер». Выбираем Telegram. Вставляем ключ в поле. Жмем «Сохранить». Бот подключен.
Кнопки под сообщением
На схеме уже есть заготовка. Блок «Заявка» нам сегодня не нужен: три точки, «Удалить». Тянем стрелку от «Старта» к цепочке сообщений. С нее бот начнет разговор. Открываем цепочку и убираем текст-образец крестиком. Жмем «Фото» и загружаем снимок барбершопа. В описании пара слов о себе, а в конце просьба: выберите, что нужно. Кнопку-образец «Привет» убираем корзинкой. Теперь первый вид меню: кнопки под сообщением. Жмем «Добавить ответ» и пишем «Цены». Еще две кнопки: «Где мы» и «Акция недели». Под кнопками раскладка. Сейчас у каждой кнопки свой ряд. Перетаскиваем «Где мы» к «Ценам», и они встают рядом. Короткие кнопки ставим по две в ряд, длинную отдельной строкой. Тогда меню читается с одного взгляда. Закрываем и называем блок «Приветствие».
Ответы на кнопки
Каждая кнопка на схеме стала выходом. От «Цен» тянем стрелку и выбираем «Цепочка сообщений». Пишем цены. И кнопку «Главное меню». Человек должен всегда понимать, как вернуться. Закрываем и называем блок «Цены». Теперь от «Главного меню» тянем стрелку обратно к приветствию. С «Где мы» то же самое: адрес, часы работы, «Главное меню» и стрелка обратно. И с акцией.
Проверка
Проверяем. Открываем бота в Telegram и жмем «Запустить». Меню пришло прямо под сообщением: «Цены» и «Где мы» рядом, акция ниже. Жмем «Цены». Цены на месте, а «Главное меню» возвращает назад. У таких кнопок один минус. Переписка растет, меню уезжает вверх, и его приходится искать.
Клавиатура под полем ввода
Для этого есть второй вид меню, клавиатура под полем ввода. Открываем приветствие. В раскладке перетаскиваем ряды из зоны «Под сообщением» в зону «Под полем ввода». Стрелки на схеме остались те же. Поменялось только то, где человек увидит кнопки. Снова пишем /start. Теперь кнопки стоят на месте клавиатуры телефона, крупные, прямо под пальцем. Жмем «Где мы». Бот ответил, а меню не пропало: оно свернулось в значок у поля ввода. Нажимаем его, и кнопки снова под рукой. Как выбрать? Кнопки под сообщением хороши для выбора на одном шаге: дата, размер, «да» или «нет». А главное меню, которое нужно всегда, ставьте под поле ввода.
Кнопка «Меню»
Третий вид меню прячется в кнопке «Меню» слева от поля ввода. Включают ее в BotFather. Открываем его и пишем /setcommands. Выбираем своего бота. И отправляем команды, каждую с новой строки: название, дефис, описание. У нас это menu, «Главное меню», и prices, «Цены». BotFather ответил «Success». Кнопка появилась. Осталось научить бота отвечать на команды. Добавляем блок «Глобальное меню». Его пункты работают из любого места бота. Пишем «/menu» и «/prices». Тянем стрелки: «/menu» к приветствию, «/prices» к ценам. Проверяем. Слева от поля появилась кнопка «Меню». Жмем, вот наши команды. Жмем /prices, и цены тут как тут, где бы человек ни был в боте.
Что когда ставить
Что в итоге? Кнопки под сообщением ставим для выбора на шаге. Клавиатуру для главного меню. А кнопку «Меню» для команд, которые нужны из любого места. А чтобы не собирать с нуля, заберите этого бота готовым шаблоном. Бесплатно, ссылка под видео.