Как сделать встроенный браузер в Телеграмме

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

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

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

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

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

Как записать видео с экрана Windows #shorts

Все крупные бренды либо ушли из соцсетей, либо полностью приостановили свою активность на этих площадках. Бизнес ринулся в доступные и очевидные альтернативы — «Вконтакте», «Одноклассники», и — 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 в теге перед любыми другими скриптами, размещенными на странице.

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

Функционал 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), но в массе не спешат переводить клиентов в мессенджер.

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

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

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

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

* Meta и входящие в нее Facebook и Instagram признаны экстремистскими организациями, деятельность которых запрещена в РФ.

Иллюстрации предоставлены автором
Фото на обложке: Parilov / Shutterstock

Источник: rb.ru

Как сделать встроенный браузер в телеграмме

Будь в курсе последних новостей из мира гаджетов и технологий

iGuides для смартфонов Apple

Как читать Telegram-каналы без установки мессенджера

Георгий Лямин — 16 мая 2019, 20:45

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

Похоже, Telegram начал эволюционировать. При переходе по ссылке канала появилась новая кнопка открывающая превью канала. Веб-превью внешне напоминает интерфейс Twitter, в правом блоке отображается информация о канале, а пространство левой части экрана занимает лента постов канала. Для того, чтобы читать каналы в веб-браузере нужно нажать кнопку «Preview chanel».

Напомню, адреса Telegram формата «t.me/…» заблокированы на территории РФ, поэтому если захотите читать каналы с помощью браузера придется воспользоваться VPN-сервисом.

Источник: www.iguides.ru

Яндекс.Браузер: мессенджеру не нужна отдельная вкладка

Решил проверить в работе обновление Яндекс.Браузера, позволяющее открыть мессенджер WhatsApp, Telegram, ВКонтакте во всплывающем окне. Получается, что отдельная вкладка для обмена сообщениями больше не нужна.

Как работает технология всплывающих окон в Яндекс.Браузере

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

Установите приложение мессенджера

Если кнопка не появилась, то одно из двух: у вас старая версия браузера, обновите, или этот сервис обмена сообщениями не поддерживает приложения под Яндекс.Браузер. Я проверил работу ВКонтакте, Telegram, WhatsApp — везде кнопка была доступна.

Установите режим работы окна

При установке браузер предложит три варианта: как отдельное окно (это как было раньше), всплывающее или закрепленное.

Разница в режиме работы прикрепленного и всплывающего окна:

• Всплывающее окно отображается поверх активного окна браузера. Удобно, когда в мессенджер вы заглядываете время от времени. Если приходит сообщение в WhatsApp или Telegram, окно не всплывет автоматически. Уведомление выводится в нижний правый угол.
• Закрепленное окно удобно, если использование мессенджера — часть вашей работы. Окошко не загораживает текущую страницу в браузере. По умолчанию располагается в левой части экрана.

Настройте дополнительную панель Яндекс.Браузера

После установки приложений мессенджеров их нужно активировать в боковой панели браузера. Она вызывается отведением мыши к левому краю дисплея.

Нажимаем кнопку с плюсом, выбираем приложение из списка. Теперь оно будет доступно в два клика.

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

По идее, на боковой панели при поступлении новых сообщений на значке мессенджера должна загораться красная точка. Она показывает, что появились уведомления от приложения. Но при тестировании на Телеграм это не сработало. Уведомления выводились в правый нижний угол окна браузера. Красная точка не появлялась.

Понравилась статья? Поделитесь!

1. 6 функций Telegram, о которых WhatsApp может только мечтать
2. Telegram против WhatsApp – 9:0
3. 7 важных настроек для защиты вашего WhatsApp-аккаунта
4. Яндекс.Браузер — что это такое и почему он набирает популярность
5. 7 советов по защите WhatsApp, о которых вам необходимо знать

Источник: myfreesoft.ru