Мы используем 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) Бот для салона красоты “Дива”, который помогает клиенту самостоятельно записаться на приём к специалисту. Это происходит пошагово:
  1. каталог услуг
  2. список мастеров
  3. выбор времени и даты.
Страниц тоже немного, всё функционально и наглядно.

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

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

3) Тематический вариант Авито внутри Телеграма — сервис “Детали” для поиска и продажи запчастей автомобилей и мотоциклов, который связывает продавцов и покупателей.
Покупатель создаёт запрос: название запчасти, данные о транспортном средстве, необходимые комментарии, можно прикрепить фото, аудиосообщение. Продавцы, которые находятся в одном с покупателем регионе и имеют такую деталь, получают запрос и отвечают на него. Когда покупатель выбрал продавца, чьи условия его устроили, открывается прямой чат в Телеграме. Покупка оформляется напрямую между участниками.
Все продавцы сервиса проходят отбор, также есть рейтинг и видны отзывы других покупателей.
С технической стороны проект выглядит так: бэкенд, то есть внутренняя сторона сайта, — PHP, MySQL; фронтэнд, то есть пользовательский интерфейс и функции, — HTML, CSS, JavaScript, jQuery; Telegram Web App. 4 человека справились с реализацией за 4 месяца.
В качестве кейс-бонуса покажем пример HTML-файла базового взаимодействия с Telegram Web Apps API. Так настроен вот этот бот для отслеживания выхода сериалов и фильмов.

8. Заключение

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

9. Источники

10. Список тестовых ботов

Если по ходу статьи пропустили какую-то ссылку, то вот здесь все тестовые боты в одном месте.
Поделиться
Сообщение об успешной отправке!

Медиа

Разработка чат-ботов
Разработаем чат-боты под ваши задачи: автоматизация, помощь, реклама. Интегрируем их на ваши платформы, социальные сети и мессенджеры.
на 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%
Бот поддерживает связь с клиентом круглосуточно
Снижение нагрузки на контакт-центр
Сообщение об успешной отправке!