Telegram крут, я его обожаю. В середине апреля мы увидели анонс нового обновления — веб-аппы внутри мессенджера. Что это такое, кому надо и насколько их сложно делать?
Мои друзья, которые регулярно тестируют новинки собрали статью про веб-ботов в Telegram, передаю им слово.
Как новое обновление изменит маркетинг в Telegram?
Привет, на связи команда SMIT.Studio. Мы — студия интерактивного маркетинга. Вот уже 5 лет мы делаем для крупнейших российских и международных брендов спецпроекты с использованием современных диджитал-технологий. Один из самых любимых инструментов у нас — чат-боты. Именно они получили революционные возможности в последнем обновлении Telegram.
Почему этот апдейт так важен, и как он изменит правила игры, — читайте в нашей стать.
Когда боты только появились, они уже умели многое, но почти все сделанные через них решения оставляли ощущение некоторой «костыльности». Кажется, сейчас времена тех самых «костылей» навсегда прошли, и теперь возможности чат-ботов стали практически безграничны. Ведь у разработчиков появилась возможность создавать их с использованием JavaScript.
PWA: что такое прогрессивное веб-приложение?
Поддержка JavaScript дает Telegram возможность открывать на своей платформе сайты и мини-приложения. Это превращает Telegram в «суперплатформу», наподобие китайского WeChat.
Чат-боты теперь смогут иметь полноценный графический интерфейс. А это мощно упрощает пользовательский опыт. И позволяет делать ботов более продающими и эмоциональными.
Как это выглядит сейчас:
А вместо того, чтобы обмениваться с ботом бездушными сообщениями с цифрами, теперь вы можете воспользоваться привычной и удобной формой:
Чтобы интерфейс выглядел более нативно, команда Telegram добавила возможность ботам адаптироваться под стиль системы, который стоит на устройстве (темная/светлая).
Как это применить для конкретных сегментов бизнеса?
Возможности чат-ботов и прежде были невероятно широкими. На нашем онлайн-курсе «Перезагрузка» студенты уже нетривиально решают бизнес-задачи через ботов. Ниже мы приведем несколько примеров, какие механики открываются теперь для digital-специалистов и брендов.
1. Ecommerce
Если вы продвигаете продвигаете интернет-магазин или любой ecom-сервис, вы можете внедрить в него полноценную витрину:
И на этом возможности не заканчиваются, — помимо витрины можно развернуть бота, в который встроены платежная система, служба доставки, комментарии и другие фичи для полноценного шопинга.
2. Сфера Услуг
В случае продвижения услуг — можно реализовать виджет с отзывами:
Также вы можете добавить возможность создания заявки, бронирования времени или билетов, составить подборки товаров, внедрить бонусную систему и личный кабинет вашего клиента. И всё это в удобном графическом интерфейсе.
Чем веб-приложения отличаются от веб-сайтов | Иван Петриченко
3. FMCG
Если говорить про продвижение FMCG-товаров, можно вспомнить классическую чековую механику, которая теперь легко встраивается в мессенджер:
С WebApp можно будет отказаться от накопительных карт и акционных стикеров, которые нужно собирать покупателям, — все это можно будет собрать внутри одного приложения на базе Telegram.
Все уведомления о скидках, акциях и новых поступлениях можно будет реализовывать там же. То есть WebApp является дополнением к привычным ботам и работает совместно с ними.
- Необычные возможности
- Огромные возможности открылись для всевозможных механик геймификации. На этом площадка сделала отдельный фокус — теперь можно запустить конкурс «колесо фортуны» или устроить между пользователями творческое соревнование. Например, проекты в формате квиза теперь можно интерактивно подать внутри мессенджера:
- Наша команда уже начала экспериментировать с новыми возможностями и выяснила, что теперь в Telegram можно внедрить даже AR-маску.
- А вот здесь нам удалось перенести игру Ferma в мессенджер и подключить монетизацию.
Реализация WebApp-ботов сложнее разработки стандартных сайтов из-за ограничения консоли в API Telegram. Из-за этого и сжатой технической документации доработка проекта и выявление ошибок происходит пока методом перебора. Поэтому кост на разработку стоит закладывать в 1,5 — 2,5 раза больше по сравнению с web-сайтом.
Для создания бота потребуется команда из frontend-разработчика на JS, backend-разработчика и дизайнера, который разработает интерфейс. Проджект как правило берет на себя проработку пути пользователя, технического задания и контроль реализации проекта. В случае масштабных проектов команду приходится расширять для обеспечения скорости и качества работы.
Что по аналитике?
Новые чат-боты в Телеграм открывают и возможности для аналитики, которые ранее были немыслимы:
- Как минимум, мы видим IP-адрес пользователя. Если получится сопоставить IP-адрес от бота с данными, собранными на других сайтах, можно составить агрегированный «портрет пользователя».
- В играх есть возможность сохранять прогресс, благодаря передаче user ID.
- Можно подключить пиксель VK/FB и настраивать ретаргет по зашедшим в бота пользователям. Работает без ограничений, как и на web-сайте или приложении.
- Для аналитики поведения внутри WebApps есть возможность добавить необходимые счетчики. Например, Яндекс.Метрику. Можно собирать источники трафика, глубину просмотра, время на сайте, типы устройств, анализировать поведение посетителей на вебвизоре, выставлять цели и события и даже анализировать конверсии. В общем, вся привычная нам аналитика теперь доступна в WebApps.
Что всё это значит и куда дует ветер?
Масштабному обновлению предшествовало заявление Павла Дурова, в котором он призывает бороться с монополией таких техно-гигантов как Apple и Google на распространение программного обеспечения. К чему это приведет?
К тому, что Telegram может стать мега-приложением, как китайский WeChat и его менее успешные аналоги — японский Line и корейский Kakaotalk.
Сейчас китайский WeChat может практически полностью заменить «большой» интернет для жителя Китая. Им пользуются даже государственные организации. Помимо привычной функции обмена сообщениями, в приложении можно заказывать еду или такси, расплачиваться через встроенный Wechat-кошелек, покупать билеты на поезда и самолёты и много другое.
На родине WeChat приложением пользуются даже премиальные бренды. Например, Givenchy для продвижения лимитированной коллекции сумок (80 штук, по 15 000 юаней за сумку) запустил проект в партнерстве с местным инфлюенсером Тао Лян с аудиторией 1,2 миллионов подписчиков. В рамках проекта в аккаунте блогера был опубликован интерактивный пост, посвященный партнерству с брендом.
Как итог, всего за 12 минут бренд распродал всю свою коллекцию и привлек к себе огромное количество внимания.
Все это стало возможно за счет внедрения разного рода мини-приложений, которые работают на JavaScript внутри WeChat. Оно подгружает все данные в виде веб-страниц с указанных источников.
За счет того, что одно приложение объединило под своей крышей все остальные, Wechat и пользуется популярностью. И все это — возможное будущее Telegram.
Подстегнуть развитие приложений внутри мессенджера может случившаяся сейчас частичная блокировка App Store и Google Play. Через магазины приложений нельзя скачивать платные программы, большое количество софта удалено из-за санкций. Многие сервисы могут захотеть переехать внутрь телеграма — он может превратиться в подобие альтернативного магазина приложений.
А какие есть ограничения?
Так как WebApp — это сайт, который открывается внутри приложения, а не самостоятельная программа, мы сталкиваемся с парочкой нюансов:
- Первая и самая очевидная проблема — окно бота перекрывает основное окно приложения. Из-за этого мы не можем пользоваться основными функциями мессенджера, — например, звонками;
- Из этого вытекает вторая проблема — если необходимо настроить отправку сообщений пользователю через сам бот, то юзер сможет увидеть их только после закрытия окна браузера;
- Несмотря на то, что команда Telegram добавила возможность синхронизировать тему бота с системной, у нас нет стандартизированной библиотеки стилей. Это значит, что все боты будут выглядеть по-разному и отличаться от дизайна основного приложения;
- Нет возможности скачивать или загружать файлы через окно браузера;
- Звуки проигрываются только после какого-нибудь действия пользователя (например, после нажатия кнопки);
Почему нужно внедрять новый тип чат-ботов прямо сейчас?
Новый подход к визуальному отображению информацию позволяет делает сложные вещи — простыми. Это сильно влияет на пользовательский опыт и расширяет возможности performance маркетинга и интерактивного маркетинга.
Чат-боты нового типа обеспечивают:
- Большее время контакта пользователя с продуктом
- Эффект новизны и удивления, который приковывает внимание к товару/услуге
- Увеличение времени контакта с пользователем (ему хочется пощупать новую «фишку»)
- Оцифровку и большую прозрачность поведения пользователя внутри WebApp.
Всё это позволяет эффективнее влиять на целевые метрики, такие как заявки, продажи, конверсии, прирост подписчиков Telegram-канала. При грамотной стратегии рекламных посевов и внедрении в бота реферальной системы он может стать мощным источником выручки.
Как обычно, больше выиграет тот, кто будет в числе первых — пока сегмент еще не переполнен, а аудитория не устала от нового уровня интерактива. Что вы можете сделать прямо сейчас?
Ответьте себе на вопрос — какой функционал вашего сайта или приложения заиграет новыми красками при переносе в WebApp-бота. Или обратитесь к нам за консультацией, а мы поможем вам придумать, как применить новые возможности Telegram для продвижения вашего продукта.
Хочешь больше классных исследований
и статей?
Подпишись на мои соцсети:
Уникальная платформа для подкастеров и рекламодателей — mave
— Бесплатный и безлимитный хостинг для подкастов с продвинутой аналитикой.
— Крупнейшая в СНГ база подкастов для рекламодателей с риалтайм статистикой
Источник: dnative.ru
Telegram WebApps. Как встроить веб-приложения в чат-бота?
Относительно недавно команда Telegram выпустила обновление, с которым появилась возможность встраивать в мессенджер веб-приложения. Как заявляют разработчики: «Telegram-бот нового поколения станет полноценной заменой любому сайту».
Встроенные веб-приложения поддерживают авторизацию пользователя (проверку его подлинности), встроенную оплату через различных провайдеров, кастомизацию под выбранную пользователем тему и многое другое. И все это на JavaScript.
Эта статья — обзор основных моментов внедрения веб-приложениий в телеграм-ботов. Она написана скорее для новичков или тех, кто хочет быстро узнать, «что к чему».
Внедряем веб-приложения
Веб-приложения для встраивания Telegram поддерживает только защищенные протоколом HTTPS. Для тестирования вы можете обеспечить его самостоятельно с помощью самописного сертификата.
Переход к ним стал возможен через инлайн-кнопки (InlineKeyboardButton) и кнопки клавиатуры (KeyboardButton): к соответствующим типам был добавлен параметр web_app, необходимое значение для которого — добавленный тип WebAppInfo со ссылкой на веб-приложение. Пример реализации:
# Python 3: AIOgram v2.23.1 from aiogram import InlineKeyboardButton, KeyboardButton, WebAppInfo # . ikb = InlineKeyboardButton(«Перейти», web_app=WebAppInfo(‘https://’)) kb = KeyboardButton(«Перейти», web_app=WebAppInfo(‘https://’)) # .
Переход к одному веб-приложению возможен через меню: его можно закрепить с помощью BotFather. А также через закрепленные: достаточно создать кнопку с обычной ссылкой на бота (например, с помощью тех-же инлайн-кнопок) с параметром startattach — InlineKeyboardButton(«Перейти», url=’https://t.me/?startattach’) ; однако переход через закрепленные оказывается доступным не для всех ботов.
Программируем веб-приложение
Чтобы подключать веб-приложение к пользователю Telegram, достаточно вставить в HTML-код страницы скрипт telegram-web-app.js в тег до всех скриптов:
После его подключения в скриптах, объявленных после, мы можем пользоваться всеми возможностями Telegram WebApps с помощью объекта window.Telegram.WebApp.
Список методов и объектов в window.Telegram.WebApp достаточо большой, полностью ознакомиться с каждым из них вы можете здесь. Например, вы можете поприветствовать пользователя, который перешел в веб-приложение через бота:
Также мы можем обрабатывать различные события. Например, нажатие «главной» кнопки (MainButton) или кнопки «Назад» (BackButton), причем несколькими способами:
var MainButton = WebApp.MainButton; var BackButton = WebApp.BackButton; MainButton.show(); BackButton.show(); MainButton.onClick(function() < WebApp.showAlert(«Хорошо, ты нажал на главную кнопку.»); >); WebApp.onEvent(‘mainButtonClicked’, function() < /* also */ >); BackButton.onClick(function() < WebApp.showAlert(«Нет пути назад!»); BackButton.hide(); >); WebApp.onEvent(‘backButtonClicked’, function() < /* also */ >);
Особый интерес представляет возможность перейти к встроенной оплате из веб-приложения. Сделать это можно через метод openInvoice. Однако прежде необходимо сформировать ссылку на оплату (инвоис-линк). Формировать ее прямо в скрипте с помощью запроса к Telegram API оказывается плохой идеей, так-как для этого потребуется раскрыть секретные данные бота (токены бота, провайдера оплаты и т.п.). Поэтому формировать ее следует, например, на сервере веб-приложения (через бота), а из скрипта сделать запрос к нему:
let xhrURL = new URL(‘https:///’); xhrURL.searchParams.set(‘title’, . ); /* . setting other non-private optional parameters */ let xhr = new XMLHttpRequest(); xhr.open(‘GET’, xhrURL); xhr.send(); xhr.onload = function()
После чего у нас будет открываться карточка товаров/услуг с возможностью их оплатить. На примере встроенной в веб-приложение оплаты Liot:
Также мы можем обрабатывать события после закрытия окна оплаты:
WebApp.onEvent(‘invoiceClosed’, function(object) < if (object.status == ‘paid’) < WebApp.close(); >else if (object.status == ‘failed’) < WebApp.showAlert(«Не беспокойтесь. Мы сохраним ваш выбор.»); >>);
Особое внимание стоит уделить безопасности. Для проверки подлинности пользователя («Настоящий ли пользователь зашел в веб-приложение и через Telegram ли?») предусмотрен способ валидации получаемых [через скрипт] данных.
Содержимое переменной initData [в window.Telegram.WebApp] представляет из себя строку формата ключ=значение , разделенных WebAppData» .
И так, по условию, если хэш варианта HMAC-SHA-256 по значению data-check-string и ключу secret_key равно hash [из initData], значит пользователь подлинный. Какой псевдо-код демонстрируют разработчики:
data_check_string = . secret_key = HMAC_SHA256(, «WebAppData») if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) < // data is from Telegram >
Очевидно, что генерировать secret_key и валидировать следует на стороне, например, на сервере, чтобы не раскрыть токен бота. Пример реализации:
Дизайн веб-приложения можно подстраивать под пользователя с помощью объекта ThemeParams, внутри которого содержатся подстроенные под выбранную пользователем тему мессенджера: фон, текст, ссылки и т.п. При этом, вы можете использовать их не только в скриптах, но и в стилях (CSS) с помощью var :
h1 < color: var(—tg-theme-text-color); >p < color: var(—tg-theme-hint-color); >/* . */
Возможности встроенного в чат-бот веб-приложения вы можете также увидеть на примере Liot — концептуального телеграм-бота для записи в один из салонов красоты. Он же на ГитХабе по ссылке.
Надеюсь, вы смогли из этой статьи вынести для себя что-то полезное 🙂
Источник: habr.com
Что такое Telegram Web App и как эта технология помогает создать интернет-магазин в мессенджере
Телеграм быстро развивается. Его популярность отражается в статистических данных: доля Телеграма среди мессенджеров в России в марте 2022 составила 63%. Каждый день в среднем 101 Мб трафика расходует пользователь Телеграма, а вот в WhatsApp — только 26 Мб. Обновление в апреле 2022 года, в котором появилась технология Telegram Web App, открыло возможность полноценно вести бизнес на этой площадке.
TWA — это веб-приложение внутри мессенджера. Для разработчика это — неограниченный интерфейс в браузере, который открывается поверх интерфейса Телеграма. TWA превратила Telegram в Интернет внутри Интернета. Мессенджер уже сравнивают с китайским WeChat.
2. Плюсы TWA
Telegram Web App поддерживает легкую авторизацию, принимает платежи из 200 стран и через 20 провайдеров, отсылает индивидуальные уведомления и умеет ещё много полезного. Веб-бот совмещает в себе функционал чат-бота, мобильного приложения и сайта. Разработчик без проблем воплотит нужный дизайн и структуру приложения для Телеграма с помощью JavaScript и это будет органично встраиваться в экосистему мессенджера. У владельцев бизнеса появилась возможность создать магазин в мессенджере и осуществлять продажи без лишних посредников. Вот здесь вы найдёте информацию о том, как мы — студия EORA — работаем над подобными проектами.
TWA подойдёт для решения следующих задач:
- Размещение товаров — онлайн-витрина
- Осуществление платежей
- Геймификация
- Проведение опросов и квизов
- Реализация дисконтных программ и программ лояльности
- Подключение виджета с отзывами
- Подключение привычного интерфейса доставки
- Оформление личных кабинетов пользователей
- Отслеживание активности и сбор необходимых маркетинговых данных
Ещё один плюс Telegram Web App в том, что не нужно устанавливать отдельное приложение и тратить память устройства. Нет необходимости и переходить в браузер — все данные и функции доступны в мессенджере. А у Телеграма есть все шансы стать альтернативным магазином приложений.
В современных реалиях эта технология будет отличным вариантом для тех компаний, чьи приложения оказались удалены или заблокированы в зарубежных сторах. ВТБ-банк уже анонсировал запуск цифрового банка в телеграмме .
Визуализация упрощает взаимодействие с клиентом и расширяет маркетинговые возможности. Интернет-магазин в Телеграме — новинка, а значит за её счёт можно привлечь внимание к товару или услуге и увеличить время контакта с пользователем.
TWA в качестве альтернативы нативным мобильным приложениям будет интересна для E-commerce проектов, B2C-сегмента, ритейла.
Источник: eora.ru