Заполните форму
И наши менеджеры ответят на ваши вопросы
Нажимая на кнопку, вы соглашаетесь с нашей Политикой в отношении обработки персональных данных пользователя
Иннополис
ул. Университетская, д. 7
Позвоните нам
Напишите нам
Мы используем cookies и собираем технические данные
Находясь на сайте вы соглашаетесь с применением данных технологий
Находясь на сайте вы соглашаетесь с применением данных технологий
Что такое Telegram Web App и как эта технология помогает создать интернет-магазин в мессенджере
/
/
/
1. Описание технологии
Телеграм быстро развивается. Его популярность отражается в статистических данных: доля Телеграма среди мессенджеров в России в марте 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-сегмента, ритейла.
3. Сравнение с привычными чат-ботами
Давайте сравним бот для продаж в телеграмме с привычным чат-ботом.
Вот несколько вариантов веб-ботов развлекательного характера:
4. Основные ограничения
В первую очередь отметим технические ограничения:
- мало технической документации по технологии;
- необходимо интегрировать код с Telegram Bot API;
- нет стандартизированной библиотеки стилей, а значит дизайны бота и площадки не будут совпадать;
- нельзя загружать или скачивать файлы через окно браузера;
- ограничения на работу с аудио: звуки проигрываются только после действия пользователя
Telegram не предлагает никаких автоматизированных инструментов, которые помогли бы создать магазин в боте. Поэтому нужно тщательно выбирать исполнителей — они будут на 100% определять качество итогового приложения.
Как ограничение срабатывает и специфика бизнеса. Веб-боты не подойдут, если:
- есть ограничения по закону о защите персональных данных;
- работа проходит в закрытой внутренней системе или сети
Из того, что может не понравиться пользователю мессенджера — это размер окна TWA. Перекрывается интерфейс мессенджера и, чтобы ответить на сообщение или прочитать уведомление, пользователю нужно выйти из интернет-магазина в телеграмме. И сообщения от бота будут видны только тогда, когда закроется окно приложения.
Помогу подобрать решение для твоего бизнеса. Просто напиши мне
Нажимая на кнопку, вы соглашаетесь с нашей Политикой в отношении обработки персональных данных пользователя
Алсу Биктемерова
Менеджер
5. Схема работы
С плюсами и минусами ознакомились, теперь давайте разберёмся, как это работает:
- Открываем разработанный нами чат-бот и видим кнопку
- Нажимаем на кнопку и попадаем на веб-страницу, которая написана на JavaScript.
- Взаимодействие происходит в интерфейсе Телеграма: запросы отправляются в ядро бота и бот отвечает на них так, как прописано в скрипте. Протестировать работу TWA можно здесь.
6. Структура веб-бота
С точки зрения разработки, Web App построен на основе обычного Telegram-бота, добавляется только внешняя оболочка. Нужное веб-приложение Telegram запускает через webview, поэтому можно использовать любые технологии для фронтенд-разработки. Сам бот должен только в нужный момент выдать кнопку, после нажатия на которую откроется webview c готовым дизайном и функциями.
Фронтенд может взаимодействовать с клиентом Telegram через специальный js-скрипт telegram-web-app.js. Схема такова: после подгрузки скрипта появляется объект window.Telegram.WebApp и через него можно авторизовать пользователя, получить текущую тему приложения, вызвать системные всплывающие окна.
При разработке не забудьте учесть и рекомендации Телеграма:
- анимации плавные, 60 кадров в секунду;
- элементы отзывчивые и ориентированы на мобильные устройства;
- работа приложения должна быть бесшовной, то есть без резких изменений интерфейса, поэтому лучше отслеживать изменения цветов темы с помощью API и подстраиваться под них.
7. Примеры реализации
Переходим к конкретике. Давайте разберём несколько кейсов.
1) Telegram— и WhatsApp-бот, который заменяет собой и кассира, и кассовый аппарат. Мы разработали его для сети микромаркетов WorkEat, которые размещены во многих московских офисах и в них нет персонала. Приходите, берёте нужные вам товары, находите их в каталоге бота и там же оплачиваете.
Разработка TWA заняла 2 месяца, за основу был взят текстовый бот. В итоговом приложении всего несколько страниц:
- экран авторизации, который обязателен, потому что в каждом микромаркете разные товары — выбираете нужный адрес;
- страница со списком категорий товаров;
- каталог товаров каждого раздела с фото, названием, ценой и дополнительной информацией, например, о весе и КБЖУ;
- корзина, где можно изменять количество товаров и есть функция очистить всё — тогда вновь попадаете на страницу с выбором категории.
Для оплаты проходите по ссылке на эквайринг Сбербанка, оплачиваете и возвращаетесь назад в бот.
Приложение очень утилитарное, поэтому нагромождать много анимации не стали — настроили только плавные переходы между страницами и разработали приятный дизайн. Сейчас этот веб-бот каждый день используется работниками московских офисов.
Администратор приложение видит немного по-другому, потому что он может управлять товарами: добавлять, удалять, редактировать. Также сотрудник может просмотреть историю покупок в каждом микромаркете и задействовать маркетинговые инструменты, например, Яндекс.Метрику.
Приложение очень утилитарное, поэтому нагромождать много анимации не стали — настроили только плавные переходы между страницами и разработали приятный дизайн. Сейчас этот веб-бот каждый день используется работниками московских офисов.
Администратор приложение видит немного по-другому, потому что он может управлять товарами: добавлять, удалять, редактировать. Также сотрудник может просмотреть историю покупок в каждом микромаркете и задействовать маркетинговые инструменты, например, Яндекс.Метрику.
2) Бот для салона красоты “Дива”, который помогает клиенту самостоятельно записаться на приём к специалисту. Это происходит пошагово:
- каталог услуг
- список мастеров
- выбор времени и даты.
Страниц тоже немного, всё функционально и наглядно.
Рабочее время специалистов и другие настройки приложения меняет администратор, который видит все новые заявки в личных сообщениях или получает их по API в другую систему работы с клиентами при дополнительной интеграции.
Предварительная запись на нужную услугу, доступная внутри Телеграмма, обеспечивает устойчивую воронку продаж.
Рабочее время специалистов и другие настройки приложения меняет администратор, который видит все новые заявки в личных сообщениях или получает их по API в другую систему работы с клиентами при дополнительной интеграции.
Предварительная запись на нужную услугу, доступная внутри Телеграмма, обеспечивает устойчивую воронку продаж.
3) Тематический вариант Авито внутри Телеграма — сервис “Детали” для поиска и продажи запчастей автомобилей и мотоциклов, который связывает продавцов и покупателей.
Покупатель создаёт запрос: название запчасти, данные о транспортном средстве, необходимые комментарии, можно прикрепить фото, аудиосообщение. Продавцы, которые находятся в одном с покупателем регионе и имеют такую деталь, получают запрос и отвечают на него. Когда покупатель выбрал продавца, чьи условия его устроили, открывается прямой чат в Телеграме. Покупка оформляется напрямую между участниками.
Все продавцы сервиса проходят отбор, также есть рейтинг и видны отзывы других покупателей.
С технической стороны проект выглядит так: бэкенд, то есть внутренняя сторона сайта, — PHP, MySQL; фронтэнд, то есть пользовательский интерфейс и функции, — HTML, CSS, JavaScript, jQuery; Telegram Web App. 4 человека справились с реализацией за 4 месяца.
В качестве кейс-бонуса покажем пример HTML-файла базового взаимодействия с Telegram Web Apps API. Так настроен вот этот бот для отслеживания выхода сериалов и фильмов.
8. Заключение
Разработка текстовых чат-ботов помогли автоматизировать общение с клиентами, а веб-боты позволяют ещё и красиво оформить интерфейс, сократить количество используемых площадок и проводить оплату внутри мессенджера.
Подумайте, чем Telegram Web App может помочь вашему бизнесу. Или приходите на консультацию и мы вместе рассмотрим варианты.
9. Источники
- Веб-приложения внутри telegram. Как использовать на практике. Личный опыт
- Приложение внутри чат-бота Telegram — альтернатива в условиях блокировок в сторах. Кому подойдет?
- Почему новые веб-боты в Telegram — это подарок для бизнеса
- Веб-боты изменят Telegram. Обзор новой функции
- Создание telegram web apps для ботов в телеграм
- Бот-магазин и другие примеры использования WebApps в Telegram
- Я хочу знать замысел Бога. Все остальное всего лишь «Детали»
10. Список тестовых ботов
Если по ходу статьи пропустили какую-то ссылку, то вот здесь все тестовые боты в одном месте.
- От разработчиков Telegram
- Оплата
- Колесо фортуны
- AR-маска
- Весёлая ферма
- Квиз
Поделиться
Сообщение об успешной отправке!
Медиа
Разработка чат-ботов
Разработаем чат-боты под ваши задачи: автоматизация, помощь, реклама. Интегрируем их на ваши платформы, социальные сети и мессенджеры.
на 30%
Сокращает расходы на поддержку клиентов
>1 000 000 ₽
В месяц вы экономите, используя бота
1/5
Услуги
2/5
Услуги
Навыки для голосового ассистента
Мы создадим навыки для любого голосового ассистента, который расскажет, повеселит и предложит товары и услуги под запросы ваших клиентов
65%
93%
Людей разного возраста пользуются голосовыми ассистентами минимум раз в день
Потребителей довольны голосовыми помощниками
3/5
Услуги
Робот для колл-центра
Поможем автоматизировать систему колл-центра вашей компании, чтобы разгрузить их и минимизировать риск выгорания сотрудников
250 000
72%
Звонков в месяц принимает голосовой помощник
Доля обращения клиентов в колл-центр, а не в чат
4/5
Услуги
Консультация в ИИ
Поможем избежать ошибок и потерь при внедрении ИИ. Пройдем вместе с вами путь от задумки до написания ТЗ и реализации проекта
> 100
с 2015
ИИ-проектов реализовано
Года с головой в ИИ
5/5
Услуги
Боты для интернет-магазинов
Увеличивайте продажи ваших товаров с помощью ботов в Телеграм, Whatsapp, ВКонтакте или на любой другой вашей платформе. Пройдем путь вместе с вами от идеи до запуска
24/7
на 70%
Бот поддерживает связь с клиентом круглосуточно
Снижение нагрузки на контакт-центр
Сообщение об успешной отправке!