Fleep.бизнес — конструктор ботов для тех, кто хочет зарабатывать больше.
Если перейти по ссылке t.me/FleepBot , то можно создать свой первый бот бесплатно.
Меню в ботах Fleep.Бизнес даёт нам огромные возможности. Более того, без меню бизнес-бот практически теряет свою актуальность. Давайте глянем, как это работает начиная с простых меню и заканчивая сложными. И посмотрим, как их создать и привязать к сообщениям бота, как связывать с товарами, если у вас интернет-магазин. И узнаем, где ещё можно использовать меню с кнопками, для заработка.
Оглавление
Что такое «Меню» и какие они бывают
Меню — это набор кнопок, которые ведут в другие меню с кнопками, или присылают в ответ на нажатие контент (сообщение, фото, видео, стикер и т.д.), или отправляют по ссылке внутри бота (UTM-метки) или за его пределы (в каналы и чаты, на сайты в интернете).
Меню с обычными кнопками
В первую очередь это может быть простое меню, которое ведёт пользователя по вашему боту и отвечает на его вопросы. Такой пример я показал на картинке в заголовке этой статьи. Мой бот t.me/culturenetbot при старте выдаёт именно это меню. Кнопки такого меню называются: «обычные». Обычные кнопки находятся внизу экрана под строкой для ввода сообщений.
Как опубликовать скрытый текст в кнопках в Телеграм канале
Меню с inline-кнопками
Кнопки в меню, которые прикрепляются к сообщениям бота — называются inline-кнопки. Они выглядят вот так:
В меню может быть минимум одна кнопка и максимум 9 9 кнопок
Вложенное меню
Меню могут быть «вложенным». Это когда при нажатии какой-то из кнопок в меню бот показывает новое меню. С помощью вложенных меню создают интернет магазины и в оронк и продаж, примерно как на картинке ниже:
Воронка продаж начинается с первого меню, с пары-тройки кнопок. После нажатия одной из кнопок пользователь получает сообщение и с ним новое меню с кнопками. Каждая кнопка ведёт покупателя и пользователя бота в своё новое меню. Так до тех пор пока ваша воронка не заканчивается.
Преимущество такой ветвистости в том, что вы ведёте клиента туда, куда он хочет и в итоге продаёте ему. А ещё можете отследить всех пользователей на любом этапе. Вы увидите какие кнопки нажимали ваши пользователи и сможете разослать предложения только им — тем, кто нажимал конкретные кнопки. Но об этом позже, а сейчас продолжим уточнять, как создать меню с кнопками.
Главное меню
Итак, мы увидели, что меню — это набор кнопок, которые мы в него добавляем. Таких наборов мы можем сделать около сотни. В каждый набор можно добавить до 100 кнопок, если это нам нужно, конечно.
Любое меню, которое вы создадите существует само по себе и поначалу ни к чему не прикреплено. Оно просто существует в разделе «Меню» пока вы сами не укажете, где его показать.
Но «Главного меню» уже есть по умолчанию в боте. В «Главном меню» со старта нет кнопок. Как только вы добавите кнопки в «Главное меню» — это меню будет прикрепляться к первому сообщению, которое получит пользователь.
Давайте глянем как это выглядит в боте для вас, как творца бота, отправляем боту команду — /start:
После старта своего бизнес-бота получаем кнопку «Настройки»: жмём её
Видим по умолчанию только
«Главное меню»
«Главное меню» есть всегда. Его нельзя переименовать или удалить. Оно просто есть. Как пустой кувшин для компота. Пока мы кувшин не наполним, то разливать из него нечего. Он просто стоит и ждёт когда его наполнят, чтоб появится на столе.
Так и меню — пока в нём нет кнопок, то оно не может нигде появиться. Оно ждёт, пока вы его наполните кнопками и прикрепите куда вам нужно. Это касается любого меню, не только «главного меню».
Но у «главного меню» есть своя особенность: как только мы добавим в него хотя бы одну кнопку, то его можно не только привязать куда захотите, но также оно появится при первом старте бота пользователем. Вот что написано в нашем конструкторе после того как мы нажмём кнопку «Главное меню» с предыдущей картинки:
Собственно, это то самое место, где мы уже можем создать кнопки в «Главном меню». Но перед тем, как создать кнопки давайте посмотрим как создать наше новое меню, которое понадобится позже.
Создание меню
Представьте, что вы хотите пить и у вас есть компот. Компот не может быть сам по себе, он всегда где-то хранится. Вы хотите пить — наливаете из кувшина. Но перед тем как налить компот в стакан из кувшина вы наполнили этот кувшин. Согласитесь, трудно наливать компот из пустого кувшина, как и без кувшина налить компот в стакан.
С кнопками такая же ситуация. Кнопки это наш компот и есть.
Перед тем как привязать какую-то кнопку к нужному сообщению или товару (налить компот), вам всегда понадобится создать меню (взять пустой кувшин), потом в меню создать кнопку (наполнить кувшин компотом) и только уже после привязать это меню к нужному сообщению или товару (налить из кувшина в стакан).
Вообще, когда собираешь бот, лучше продумать заранее структуру бота и записать всё это отдельно. После чего легко увидеть сколько меню понадобиться, какие в них будут кнопки и как они должны быть расположены (обычные — снизу или inline — под сообщением или под товарами).
Но сейчас мы хотели увидеть процесс рождения меню. И начнём, как обычно: /start -> Настройки -> Меню -> ➕:
Источник: www.telega.su
Создание telegram web apps и взаимодействие с ними в телеграм ботах
В обновлении Bot API 6. 0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.
— Все элементы должны быть отзывчивыми и спроектированы с учетом мобильной ориентации устройств.
— Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
— Все анимации должны быть плавными, в идеале 60 кадров в секунду.
— Все input и изображения должны содержать label для доступности.
— Приложение должно обеспечивать бесшовную работу, отслеживая изменение цветов темы с помощью API, и используя их соответствующим образом.
Давайте же опробуем это на практике!
Создание кнопки
Первое, что нам нужно сделать — создать кнопку запуска веб-приложения. Это можно сделать двумя способами:
1. 2. Далее выбираем бота, которому нужна кнопка веб приложения
1. 3. Отправляем ссылку по которой доступно наше веб-приложение
1. 4. Пишем имя кнопки — будет отображаться внизу слева
Вот и все. В целом, если у вас есть адаптивный сайт и вы хотели просто добавить его в бота, тут можете остановиться.
Только при добавлении кнопки этим способом мы можем получить информацию о пользователе.
2. В коде бота — клавиатурные кнопки.
Запуск бота с inline-кнопки даёт суть тоже самое, что и предидущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.
Покажу на примере pytelegrambotapi — я понимаю, что это не самая популярная библиотека для написания телеграмм-ботов, но так получилось, что я пишу именно на ней. Если вы пользуетесь другой библиотекой/языком, думаю, вам не составит труда действовать по аналогии. Вы можете сразу посмотреть пример или перейти в репозиторий и посмотреть код с комментариями:
2. 1. Делаем все стандартные штуки для запуска бота — импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.
2. 2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.
Для того, чтобы создать кнопку, нужно сначала создать WebAppInfo-объект внутри которого будет url на наш сайт.
def webAppKeyboard(): #создание клавиатуры с webapp кнопкой keyboard = types.ReplyKeyboardMarkup(row_width=1) #создаем клавиатуру webAppTest = types.WebAppInfo(«https://telegram.mihailgok.ru») #создаем webappinfo — формат хранения url one_butt = types.KeyboardButton(text=»Тестовая страница», web_app=webAppTest) #создаем кнопку типа webapp keyboard.add(one_butt) #добавляем кнопки в клавиатуру return keyboard #возвращаем клавиатуру
2. 3. Отправляем сообщение с нашей клавиатурой при отправке команды или любом другом действии:
bot.send_message( message.chat.id, ‘Привет, я бот для проверки телеграмм webapps!)’, reply_markup=webAppKeyboard())
Готово. Кнопки у нас есть.
Тут можно вообще закончить, если вы просто хотели, чтобы пользователь мог открыть ваш сайт из бота (зачем-то). Работать это будет вот так:
как работают web apps
Работа с веб-приложением
Теперь идем в наше веб-приложение. На момент написания статьи открывается любая ссылка, даже на codepen.
Инициализация
Чтобы взаимодействовать с телеграм подключаем скрипт:
После этого нам будет доступен объект: window. Telegram. WebApp
Записываем его в переменную и начинаем нашу работу.
let tg = window. Telegram. WebApp;
Что же мы теперь можем? Не так много, как хотелось бы, но и не мало. Приложение состоит из: основной кнопки (telegram-объект) и самой страницы, которая загрузилась по ссылке. Остальные элементы telegram-интерфейса нам не доступны. Однако, доступны цвета темы пользователя:
навигатор цветов
Цвета
Они доступны в формате hex как css-переменные:
Или как объект ThemeParams в js (вместо window. Telegram. WebApp я использую переменную tg):
tg. ThemeParams.bg_color
tg. ThemeParams.text_color
tg. ThemeParams.hint_color
tg. ThemeParams.link_color
tg. ThemeParams.button_color
tg. ThemeParams.button_text_colorString
Но будьте осторожны, цвета — необязательный параметр, поэтому стоит проверять, есть ли они, перед тем как использовать.
Также имеется обработчик события изменения цветовой схемы:
Telegram. WebApp.onEvent(themeChanged, function());
При изменении цветовой схемы или размеров окна можно поменять что-то и в нашем веб-приложении.
Основные возможности
С цветами разобрались — теперь к другим основным параметрам:
tg.initData //получаем данные от пользователя в виде строки (работает только при запуске из меню команд бота). tg.initDataUnsafe // получаем данные от пользователя в виде объекта (работает только при запуске из меню команд бота). tg.isExpanded // возвращает true, если приложение открыто на всю высоту, false — если нет. tg.viewportHeight // вернёт ширину окна.tg.sendData(data) // отправляет данные боту в строковом виде, после чего закрывает приложение (работает только если приложение запущено с keyboard button). tg.ready() // метод позволяет отследить, когда приложение готово к отображению.tg.expand() // метод позволяет растянуть окно на всю высоту.tg.close() // метод закрывает приложение.
Main button
Кнопка назад
Кнопка Назад отобразится в списке команд бота автоматически если пользователь окажется внутри команды в которой есть команды. Но если требуется создать независимую от общей иерархии область — то отображение такой кнопки будет излишне. Здесь можно ее отключить. Более того, даже вручную введенная команда Назад при отключенной кнопке не сработает.
Недостатком системной кнопки назад является то, что ее нельзя переименовать и прикрепить к ней смайл. Но есть способ сделать кнопку «назад» из любой команды:
Для этого в настройках такой команды Скриншот примера настроек:
У родительской команды нужно скрыть системную кнопку «Назад» (в противном случае у нас будет две кнопки назад — наша и та, которую добавит система, ориентируясь на то, что у нас не первый уровень команд):
Источник: ebot.one