Что такое Telegram Web App и&nbsp;как эта технология помогает создать интернет-магазин в&nbsp;мессенджере

Позвоните нам

Бот поддержки

Напишите нам

Виртуальный ассистент

Боты для HR

Распознавание показаний счетчиков

Поиск по картинке

Подсчет товаров по фото

Блог

Контакты

Получить консультацию

Получить консультацию

8-800-550-17-62

Что такое Telegram Web App и как эта технология помогает создать интернет-магазин в мессенджере

Главная

Блог

Статья

1. Описание технологии
2. Плюсы TWA
3. Сравнение с привычными чат-ботами
4. Основные ограничения
5. Схема работы
6. Структура веб-бота
7. Примеры реализации
8. Заключение
9. Источники
10. Список тестовых ботов

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. Сравнение с привычными чат-ботами

Давайте сравним бот для продаж в телеграмме с привычным чат-ботом.

Пользовательский интерфейс;Общение через текст, с редким вкраплением фото и стандартных кнопок;Доступен полноценный дизайн, поиск по фото и всё остальное, так необходимое пользователям-визуалам Возможности для маркетинга;Нельзя собирать данные о пользователях и составить портрет клиента;Функционал сайтов работает и здесь. Можно: собирать IP-адреса пользователей, подключить пиксель VK или FB, встроить счётчики, например, “Яндекс.Метрику” Оплата товара;Переход на внешний сайт для оплаты снижал конверсию в покупку;Оплатить можно внутри интернет—магазина в телеграмме. И напомнить о товарах в корзине будет гораздо проще – через push—уведомления мессенджера. ;;Протестировать оплату можно здесь link=http://tilda.cc Удобство использования;Трудно решать user-кейсы, например, покупка билета в кино;Благодаря полноценному графическому интерфейсу можно настроить для решения многоступенчатых задач: посмотреть трейлер фильма, выбрать место в зале, провести оплату билета в кино Реклама;Рассылка рекламных сообщений в личку воспринимается как спам и часто уведомления отключаются;Рекламные сообщения встраиваются в интерфейс бота, работает нативная реклама

Вот несколько вариантов веб-ботов развлекательного характера:

4. Основные ограничения

В первую очередь отметим технические ограничения:

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

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

Как ограничение срабатывает и специфика бизнеса. Веб-боты не подойдут, если:

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

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

Помогу подобрать функционал WebApp для твоего бизнеса. Просто напиши мне

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

Менеджер

Арина Булах

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 в другую систему работы с клиентами при дополнительной интеграции.

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

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%