Приложение внутри чат-бота Telegram — альтернатива в условиях блокировок в сторах. Кому подойдет?

Содержание:

• Что это такое?
• В чем выгода для бизнеса? 
• Какому бизнесу будут особенно полезны Telegram Web Apps?
• Могут ли TWA быть полноценной альтернативой мобильному приложению? 
• TWA — универсальное решение для любого бизнеса? 

Инструкция для TWA:

1. Компоненты и логика создания TelegramWebApp
2. Рекомендации по проектированию
3. Запуск TWA-приложения
4. Объекты и аппаратные возможности TWA-приложения

После февральских событий российский бизнес лишился двух важных каналов продвижения и продаж — соцсетей Facebook* и Instagram*. Официального запрета вести корпоративные и личные аккаунты не последовало, однако рекламные возможности все-таки отключили.

По аналитическим исследованиям, охваты в соцсетях у постов и сториз снизились почти втрое: Instagram* потерял до 55% объема русскоязычного контента и 54% публикуемых авторов контента, число авторов в Facebook* снизилось на 33%, а общий объем публикуемого контента упал на 40%.

Все крупные бренды либо ушли из соцсетей, либо полностью приостановили свою активность на этих площадках. Бизнес ринулся в доступные и очевидные альтернативы — «Вконтакте», «Одноклассники», и — Telegram.

Ситуация с конкуренцией в основных каналах достигла исторического пика. Рекламные ставки взлетели до масштабов, которые не порадовали ни один бизнес.

В марте и апреле аукцион «Вконтакте» просто хронически ломался:

• наблюдались проблемы с модерацией объявлений,
• многие рекламодатели просто не могли зайти в свой рекламный кабинет из-за большого притока рекламного трафика на платформу.
• Цены за 1000 просмотров колебались от 200 до 2000 руб. и выше.

Все ли так плохо?

Конечно, нет, если вы следите за digital-тенденциями и не зацикливаетесь на классических инструментах привлечения клиентов, а готовы тестировать новинки и гипотезы, понимая их пользу для бизнеса.

Как можно заметить, именно Telegram в России вырос двукратно самыми быстрыми темпами по сравнению с остальными платформами. DAU мессенджера к июню достигло 40 млн и на данный момент составляет более половины от всех пользователей Рунета. 

У платформы много очевидных преимуществ:

• площадка бесплатна в использовании;
• начать развивать новую группу или канал проще, по сравнению с другими каналами;
• можно автоматизировать работу бизнеса с помощью веб-ботов без мобильных приложений.

Это все мы знали про любимый россиянами мессенджер и раньше, но не так давно Telegram анонсировал уникальную новинку, которая с большой вероятностью сильно повлияет на трансформацию бизнес-сценариев: веб-приложения внутри чат-ботов.

Что это такое? 

С точки зрения пользователя — это полноценные сайты, запускающиеся по тапу в знакомом чат-боте, но глубоко интегрированные в экосистему Telegram, визуально выглядящие однородно с дизайном самого мессенджера.

С точки зрения разработчика — любой, ничем не ограниченный интерфейс в браузере, раскрывающийся поверх интерфейса мессенджера.

Почему это так круто? Вся бизнес-логика TWA написана на JS на стороне веб-страницы. Это значит, что издатель приложения может использовать абсолютно любые идеи в дизайне и структуре приложения, а ведь именно они и стопорили глобальное развитие чат-ботов: раньше они выглядели достаточно монструозно и отстало.

В этом и состоит уникальность TWA: можно делать красивые интерфейсы с любой логикой, не затрачивая огромные бюджеты на дорогостоящую разработку, как в случае с нативными приложениями, которые требуют кода на Objective-C, Swift или Kotlin. 

В чем выгода для бизнеса? 

• Можно дать клиентам любое приложение — онлайн-магазин с каталогом товаров, онлайн-витрину с корзиной и формой оплаты, программу лояльности или систему кешбека для постоянных клиентов. 
• Владелец бизнеса экономит на стоимости разработки и получает готовое бизнес-решение за пару недель вместо нескольких месяцев, а в сложных проектах — лет.

Если вы ведете бизнес, то у вас точно есть сайт, а значит, — можно в сжатые сроки переиспользовать его дизайн и структуру при помощи логики front-end, адаптировать их для отображения в чат-боте — и больше ничего не потребуется, вы готовы к продажам в Telegram!

Для создания эффективной и устойчивой воронки продаж, как правило, используется целый ряд звеньев одной цепи:

1. сайт,
2. нативное приложение,
3. чат-бот,
4. кол-центр.

• Отпадает необходимость уводить клиента из привычного мессенджера, поскольку теперь весь симбиоз широты функционала и удобства интерфейсов доступен в рамках мессенджера. Это кратно сокращает CJM и повышает его конверсионность. 

Помимо этого, преимущество Telegram WebApp еще и в том, что пользователю не нужно устанавливать отдельное приложение и забивать память своего устройства. Не нужно даже переходить в браузер — бренд будет присутствовать в жизни клиента в интерфейсе мессенджера.

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

Читайте по теме: Может ли бизнес работать без сайта? Разбираемся, всегда ли достаточно только соцсетей

И наконец, Telegram WebApps полностью меняют логику маркетинга в мессенджерах: они могут собирать данные пользователей, открывая новые возможности таргетинга и настройки аудиторий.

Имея на руках IP-адрес пользователя и подключив к своему боту пиксели «Вконтакте» (или Facebook*), бизнес сможет «возвращать» человека, хотя бы раз зашедшего в бота. Как и к обычной веб-странице, к боту можно подключить привычные аналитические системы и пользоваться всем спектром маркетинговых инструментов.

Именно сейчас, когда бизнес направил основные рекламные бюджеты на «Вконтакте», «Яндекс.Директ», «Одноклассники», «Дзен» или другие площадки, конкуренция в новом инструменте будет минимальной. А как бесплатный бонус вы можете использовать то, что новые инструменты в привычных каналах всегда создают некий инфо-бум и надолго привлекают внимание аудитории.

Компоненты и логика создания TelegramWebApp

Приложение состоит из основной кнопки и веб-страницы, которая загрузилась по тапу на кнопку — вы можете протестировать TWA на примере официального тестового бота от разработчиков Telegram.

Как мы уже сказали выше, функционал, интерфейс и дизайн самой веб-страницы ничем не ограничен: пользователь видит на экране мини-приложение в привычном интерфейсе мессенджера. Соответственно, TWA — это сайт, который открывается в интерфейсе Telegram. 

Подключение веб-страницы

Подключить веб-страницу к клиенту Telegram очень просто: нужно поместить скрипт telegram-web-app.js в теге <head> перед любыми другими скриптами, размещенными на странице.

Цветовые схемы приложений

Функционал TWA подразумевает, получение данные о текущей цветовой теме пользователя в онлайн-режиме, настроить внешний вид интерфейсов можно в соответствии с ней.

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

Рекомендации по проектированию

Telegram дает официальные советы-рекомендации, как сделать веб-приложение максимально эффективным: оно должно отличаться быстротой, плавностью и последовательным кросс-платформенным дизайном.

Например:

• все элементы должны быть отзывчивыми и разрабатываться с учетом подхода, ориентированного на мобильные устройства.
• все анимации должны быть плавными, в идеале 60 кадров в секунду.

Запуск TWA-приложения

Сейчас Telegram поддерживает четыре различных способа запуска веб–приложений:

1. с помощью кнопки клавиатуры,
2. встроенной кнопки,
3. кнопки меню бота,
4. из меню вложений:

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

• идентификатор,
• имя пользователя,
• код языка,
• фото,
• уникальный идентификатор для сеанса веб-просмотра query_id, который позволяет отправлять сообщения любого типа в чат от имени пользователя, который открыл бота.

Пользователи могут взаимодействовать с ботами с помощью пользовательских клавиатур, кнопок под сообщениями бота или через отправку текстовых сообщений произвольной формы или любых типов вложений, поддерживаемых Telegram: фотографий, видео, файлов, местоположений, контактов или опросов.

Для еще большей гибкости боты могут использовать HTML5 для создания удобных интерфейсов. 

Объекты и аппаратные возможности TWA-приложения

Кроме кнопок вызова и содержания самой веб-страницы, TWA-приложения содержат:

• поп-апы,
• кнопку «Назад»,
• основную кнопку приложения,
• вибрационную обратную связь,
• данные юзеров,
• скрипты проверки данных, отправленных через веб-приложение,
• пользовательские события (клик по кнопке или смена темы).

TWA-приложение может задействовать аппаратные функции устройства и запрашивать у пользователей файлы с диска, подключать камеру или микрофон после получения соответствующего разрешения от юзера.

Тестирование TWA-приложения

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

Схема работы TWA-приложения

1. Пользователь открывает чат-бот и видит кнопку;
2. При нажатии на нее подгружается веб-страница, написанная на JS;
3. Пользователь взаимодействует со страницей в интерфейсе Telegram;
4. Запросы пользователя отправляются в ядро бота;
5. Бот реагирует на запрос в соответствии со скриптом и отдает пользователю релевантный ответ.

Какому бизнесу будут особенно полезны Telegram Web Apps? 

Сфере eCommerce 

Telegram WebApp — полноценный аналог интернет-магазину.

Сфере услуг 

Функционал TWA-приложения позволяет собирать отзывы клиентов, предоставлять возможность заполнения заявок, бронировать, синхронизироваться с бонусной системой и входить в личный кабинет.

Это основной функционал для сервисов бьюти-сегмента, медицины, авиа- и ЖД перевозок, гостиничного и ресторанного бизнеса, клининга и других направлений в сфере услуг. 

Сфере ритейла, FMCG-сектору

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

Могут ли TWA быть полноценной альтернативой мобильному приложению? 

Можно с достаточной степенью уверенности сказать, что приложения в ботах Telegram могут полностью заменить любое мобильное приложение. Они поддерживают плавную авторизацию, интегрированные платежи через 15 платежных провайдеров, доставку пользовательских push-уведомлений и многое другое.

С другой стороны, сама архитектура решения накладывает на него ограничения — весь код должен интегрироваться с Telegram Bot API, да и техническая документация на новую технологию на данный момент весьма скудная.

Читайте также:

Из мобайла — в веб: как интернет-банку на смартфоне заменить мобильное приложение

Создание мобильных приложений — что важно учесть в нынешних условиях?

Telegram анонсировал новинку, но пока не предоставил никаких автоматизированных инструментов для работы с ней. Полную ответственность за качество итогового TWA-приложения в таком случае ложится на плечи разработчика, поэтому бизнесу крайне важно выбирать качественных и опытных исполнителей. 

Более того, в отличие от авторов мобильных систем iOS и Android, Telegram пока не спешит с созданием гайдлайнов, которые ускоряют и удешевляют разработку приложений. 

В целом, TWA — решения подойдут для конечного потребителя, когда клиент что то покупает, бронирует, отслеживает или просто играет. Но в тех случаях, когда софт предназначен для внутреннего использования (корпоративное приложение для сотрудников), некоторые его элементы которые можно реализовать в нативном мобильном приложении, просто невозможно и нерационально будет разрабатывать под мессенджер.

Например:

• Таск-трекер

Если в нативном мобильном приложении это достаточно распространенный функционал, то в TWA разработка будет кратно сложнее, и итоговый результат вряд ли будет соответствовать высоким требованиям к удобству и качеству интерфейса.

• Гант-графики

Аналогично трекерам, слишком сложный визуально и функционально инструмент, который будет кратно дороже и дольше реализовывать в TWA с учетом ограничений, накладываемых API Telegram.

• Административные панели управления, системы управления доступами, механики делегирования 

И все остальное, что связано с функциональностью бизнес-приложений для сотрудников. Пытаться реализовать подобное в рамках TWA будет крайне затруднительно или невозможно, поскольку требует интеграций с внутренними и внешними системами данных компании, но что самое главное — контрпродуктивно.

TWA — универсальное решение для любого бизнеса? 

Безусловно, TWA-решения — не панацея, и есть доля бизнесов, кому такое решение не подойдет по разным причинам.

Разберем некоторые из них:

• Повышенные требования к безопасности ИС

Компании FinTech-сектора или компании, деятельность которых связана с высокими требованиями к обеспечению безопасности информационных систем, вряд ли переведут бизнес в Telegram-приложения.

В первую очередь это банки, которые точечно уже пробовали зайти на платформу (вспомним сервис Alfa Message), но в массе не спешат переводить клиентов в мессенджер.

• 152-ФЗ

Организации, деятельность которых ограничена нормами закона о защите персональных данных, не смогут свободно использовать TWA-решения, поскольку в них нет официального инструмента контроля дата-обмена пользователя, и они по умолчанию получают от пользователя ряд личных данных.

• Закрытый контур

Представители бизнеса или госструктур, рабочие бизнес-процессы которых проходят в строго закрытых внутренних системах и сетях и передают данные в выделенных каналах — например, ЕСИА и RSNet.

TWA-приложения — это новая и потенциально интересная альтернатива обычным нативным мобильным приложениям, которая подойдет в первую очередь для B2C-сегмента, ритейла, E-commerce проектов.

Синергия новизны, быстроты разработки и ее относительно низкой стоимости является основанием, чтобы не держать все яйца в одной корзине и попробовать запустить TWA-приложение в дополнение к классическим каналам взаимодействия с аудиторией.