Меню. Вложенное меню в telegram-боте конструктора Fleep.Бизнес

Сегодня сделаем бота со вложенными меню. Они широко применяются в интернет-магазинах и в воронках продаж. Общую схему работы вложенных меню я показывал в этом обзоре: telega.su/fleep-business/menu-s-knopkam.

Оглавление

Почему вложенные меню так важны?

Представьте, что вы продаёте детскую обувь. У вас есть зимняя обувь, летняя обувь, резиновые сапоги. Вот это всё, что я перечислил, и есть первое, "Главное меню" с тремя кнопками (зимние, летняя, резиновая). Его и увидит пользователь при старте бота.

Но вместе с тем, каждый раздел (кнопка) содержит своё вложенное меню. Если выбрать "Резиновые", то получим такое меню: "Резиновые бывают: силиконовые, дино (модель сапог), вайпсы (тоже модель) и мамуты (третий вид резиновых)"

И такое же похожее меню вложено в каждую категорию.

Зимние - дутики, термосапожки и из натуральной кожи - это тоже меню из трёх кнопок (дутики, термо и кожаные), которое вложено в кнопку "Зимняя обувь".

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

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

Пока писал обзор, то сделал этот бот и он, конечно, уже есть и работает успешно, гляньте https://t.me/dinoeggbot и возвращайтесь, что бы продолжать делать деньги в telegram-ботах от конструктора Fleep.Бизнес

С чего начать

В конструкторе Fleep.Бизнес делаем бот

Да, сперва нужно создать "бот-шаблон". В нём уже будем работать над нашей задачей: "Интернет-магазин по продаже яиц динозавров", чтоб понять как делают вложенные меню. Если не помните как сделать простейший бот в конструкторе, смотрите вот тут: "Делаем простой Telegram-бот в конструкторе FLEEP.БИЗНЕС".

Схема бота

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

Обратите внимание, что перед тем, как приступить к меню нам надо настроить интернет-магазин. Для этого есть специальный раздел: "Магазин":

В нём нужно подключить кассу (там даже можно подключить несколько касс от разных платёжных провайдеров) и добавить товары. О том, как это сделать, я написал в обзоре: "Магазин. Товары и кассы". Обязательно попробуйте, перейдите добавьте кассу и товары. Это будет просто и полезно сделать, и вот почему.

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

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

А меню у нас будет три. Одно главное, которое мы отредактируем и два меню мы создадим своих.

Делаем все меню бота

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

Делаем меню с товарами

Отправляем и нажимаем: /start - Настройки - Меню - ➕:

Тут делаем, как просит бот, вводим название меню. Это название, кроме вас, никто не увидит. Поэтому называйте как вам удобно, можно сократить для скорости. Так как у нас по схеме в третьем меню яйца тиранозавра, то так и назовём "Яйца тиранозавра"

И вот тут нам надо добавить две кнопки (список наших товаров в категории тиранозавров), которые будут вести на те самые яйца. Жмём ➕:

Здесь нужно выбрать тип кнопки. Я хочу сделать так, чтоб список товаров был сразу под сообщением, которое получит пользователь. Поэтому выбираем "Inline":

А тут нажмём "Отправка нового сообщения". Почему?

После нажатия кнопки мы отправим пользователю товар, который добавили ранее. И он придёт новым сообщением:

Назовём кнопку так, как называется "товар" - "Красное пятнистое". Отправляем и получаем ответ:

Тут крепим карточку товара. Жмём "Прикрепить товар":

Все товары мы добавили заранее, поэтому просто нажмём кнопку нужного:

Товар прикрепили. Давайте посмотрим, что там у нас с меню вышло. Нажимаем: Настройки - Меню:

Видим, что появилось новое меню, которое мы только что создали. Продолжим добавлять. Нажимаем: "Яйца тиранозавра" - ➕.

Здесь повторим процесс добавления кнопки с товаром. Вот тут у нас начало: www.telega.su/fleep-business/vlozhenoe-menu. Я не буду комментировать, просто проиллюстрирую каждый шаг:

Меню с товарами: "Яйца тиранозавра" - готово.

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

Редактируем "Главное меню"

Итак, после того как сделали два меню с товарами и добавили все товары, отредактируем главное меню.

Главное меню сделаем таким, чтоб оно всегда было на виду. А именно, под строкой для ввода сообщений. Для этого мы выберим тип кнопок "Обычная".

Вводим и нажимаем: /start - Настройки - Меню - Главное меню - ➕ - Обычная.
Тут нас просят ввести название кнопки:

Согласно схеме выше, я ввожу название первой кнопки "Диплодок"

Тут отправим пользователю сообщение, в котором напишем о том, какие есть яйца и чем они отличаются, чтоб покупатель определился. Я отправил такой текст:

"Яйца диплодока очень прочные и уход за ними простой. Положите в холодильник на верхнюю полку и ждите 2 месяца. Да, не забудьте купить запасной холодильник. Есть вероятность, что после появления на свет птенцы проклюют ваш холодильник и вылетят. Выбрать цвет можно в кнопках ниже 👇🏻".

А в ответ получил следующее:

И вот тут вкладываем меню с товарами, которое мы уже подготовили. Жмём "Прикрепить меню":

Выбираем, соответственно, "Яйца диплодока":

Всё. Первая кнопка "Главного меню" - Диплодок, готова. И ведёт она на меню "Яйца диплодока".

Давайте проверим, как это выглядит для пользователя. Перед этим смените "Приветствие" которое увидит пользователь при первом старте. Обзор есть тут: "Приветствие".

А теперь смотрим, что вышло:

За кадром добавлю вторую кнопку главного меню "Тиранозавр" и вложу в него меню "Яйца тиранозавра". А для вас готовый бот есть по ссылке https://t.me/dinoeggbot. Посмотрите, как он работает. И встретимся в следующем обзоре.