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