Также оставлю инструкцию в видео-формате ↴
В этой статье мы расскажем, как сделать приложение "Колесо Фортуны" в Telegram боте без программирования. Данное приложение поможет вам набрать людей в своего Telegram бота, получить их контакты и добавить интерактива в ваши взаимодействия с клиентами.
Создавать бота с нуля будем через модуль воронок в бесплатном сервисе https://chatium.ru/start Данный модуль также доступен в рамках вашего GetCourse аккаунта.
Создадим бота
Создавать бота мы будем с помощью Telegram-бота под названием BotFather
Подробнее про работу с BotFather и получение токена можно прочитать в этой статье или посмотреть в этом видео.
- Копируем полученный токен
- На этом этапе мы получили токен бота, который нам понадобится позже
Создаем воронку
Вернемся к полученному токену и привяжем нашего бота к Сценарию.
- Сценарий → шестеренка → управление ботами.
- Выбираем Telegram Bot и вставляем токен, который мы получили ранее у BotFather. Проверить ключ бота → Использовать этого бота.
Привязав бота, мы можем приступить к созданию приложения.
- Добавляем новый блок «WebApp». Сцена → Шаблоны → WebApp
- WebApp - блок, который нам необходимо будет настроить.
Далее нам необходимо выбрать, какой шаблон приложения мы хотим запустить. В нашем случае, мы будем запускать колесо фортуны.
- Проваливаемся в блок WebApp→ Выбираем шаблон Колесо фортуны → Создать файл экрана.
Теперь, когда мы создали наш файл, необходимо его настроить.
- Для этого, после создания файла переходим в настройки.
Настраиваем колесо
Нас перекидывает на страницу, где мы можем видеть всевозможные настройки.
На странице можно настроить Колесо как нам угодно. К примеру, можно поменять название кнопки для прокручивания, цветовую схему Колеса, настроить его сегменты, названия сегментов, и что будет выдавать пользователю при их выпадении.
Взглянем поближе на настройку сектора. Мы можем выставить:
- id - Его идентификатор
- label - Название сектора
- resultLabel - Надпись кнопки при выпадении сектора
- url - Ссылку для получения приза
- restartByClick - Возможность прокрутить колесо вновь
Давайте зададим название кнопки и ссылку при выпадении сектора, выглядит это так:
Теперь, когда мы настроили вид Колеса, и определились с призами, вернемся к воронке, чтобы выставить события.
Настроим блоки событий
От блока с Колесом создадим цепочки со всеми событиями, которые могут произойти при взаимодействии с приложением.
Можно задать боту реакции на события. Создадим связи событий с блоками отправки сообщения.
Размещаем приложение
Чтобы разместить приложение в нашем боте, нам необходимо снова поговорить с BotFather.
- Вводим /newapp
- Выбираем нужного бота
- Задаем название и описание приложения
- Далем скрин Колеса размером 640х360
- Вводим /empty
После этого BotFather попросит от нас ссылку на приложение. Ее можно получить в блоке Колеса.
- Генерируем ссылку и отправляем боту
- Задаем короткое имя для приложения
Возвращаемся к блоку Колесо фортуны. Теперь мы можем установить колесо фортуны в меню нашего бота.
Наконец, когда мы разместили приложение в нашего бота, мы можем открыть его в Telegram. Заметим, что Колесо уже прокручено, так как мы крутили его при настройке.
Чтобы прокрутить колесо, вернемся в блок Колесо фортуны, и сбросим его.
Мы сделали рабочее Колесо фортуны, которое крутится. Теперь проверим, как это работает.
- Включаем бота (Запуск → Включить)
- Запускаем отладку
- Открываем приложение и видим его в начальном состоянии
- Прокручиваем колесо
Приложение работает отлично, Колесо крутится и поздравления отправляются.
В отладке мы можем наблюдать сколько раз и какие действия выполнялись, и какой сектор выпал пользователю. Также в отладке показываются логи (список взаимодействий пользователя с ботом)
Добавляем страницу сбора E-mail
Мы можем усовершенствовать приложение, добавив страницу сбора E-mail, который может использоваться, например, для выдачи приза.
- Возвращаемся к схеме
- Создаем блок Шаблоны → WebApp
- В блоке WebApp выбираем шаблон приз, и создаем файл экрана
- Переходим в настройки приза
По аналогии с Колесом, мы можем настроить экран выдачи приза, здесь можно изменить
- title - Заголовок
- image - Картинку
- description - Описание
- needAuth - Необходимость аутентификации (в нашем случае она нужна)
Настроим все на свой вкус, заменим картинку, впишем текст. Страница приза будет выглядеть подобным образом:
- Теперь вернемся к блоку приза, и копируем ссылку.
- Переходим на страницу настройки Колеса фортуны, и вставляем нашу ссылку в ячейки url для всех сегментов, чтобы проверить работу страницы.
Тест для нового пользователя
Мы создали рабочего бота с Колесом фортуны и призами с аутентификацией по почте. Теперь проверим как он работает с новым пользователем.
- При запуске приложения, оно запросит у пользователя разрешение писать сообщения
- Разрешив, пользователь запускает приложение и прокручивает Колесо фортуны.
- Бот отправляет поздравление, а пользователь может получить приз. Нажав соответствующую кнопку, его перекинет на страницу подтверждения почты.
- Подтвердив почту, пользователь получает свой приз
Перейдя в режим отладки, мы увидим все действия пользователя, и приз который он получил.
Итак, наше Колесо фортуны работает и мы можем получить данные пользователя взаимодействующего с нашим приложением.
Наслаждаемся результатом :)
Еще больше про Telegram ботов и не только вы сможете найти на моем YouTube канале
