Внедряем приложение Web App в Telegram

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

Сам интерфейс приложения уже интегрирован в экосистему Телеграм, где уже изначально поддерживается его дизайн. Это значит, что на визуальном уровне вы получаете решение, понятное и удобное для большей части пользователей. Более того, вы здесь сможете реализовать разнообразные идеи как в дизайне, так и в структуре, создавать интерфейсы любого уровня сложности в соответствии с той логикой, которая будет оптимальна именно для вас. Это именно то, чего недостает многим современным чат-ботам, настройки которых не подразумевают такой гибкости. Все это позволяет с уверенностью утверждать, что при помощи Web App вы превратите свой Telegram в действительно функциональное и высокотехнологичное решение для полноценного и эффективного развития бизнеса.

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

Уникальные фишки Web App для Телеграм

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

1. Возможность создавать неординарные оригинальные интерфейсы, которые при всей своей эксклюзивности будут максимально удобными для пользователей.
2. Возможность использовать различные интерактивы для привлечения пользовательской аудитории, в частности с использованием игровых механик.
3. Возможность получать оплату непосредственно через приложение, что будет способствовать минимизации переходов между каналами. Это положительно скажется на показателях конверсии, будет способствовать улучшению пользовательского опыта.
4. При желании вы сможете легко стилизовать собственного бота под цветовую тему каждого пользователя, добавить сюда в оригинальные кастомные анимации, графику, спецэффекты. Также сюда можно встроить собственного голосового помощника, разработать дизайн чата с нуля, сделав его действительно уникальным и оригинальным.

Все это позволяет с уверенностью утверждать, что Telegram Web App — это то, что позволит бизнесу эффективно выделиться на фоне конкурентов, подчеркнуть собственную уникальность и неординарность, привлечь новых клиентов и удерживать их внимание на протяжении длительного периода времени.

Функциональные возможности Телеграм Web App

Наряду с неординарными решениями интерфейса Телеграм Web App отличается также достаточно богатыми функциональными возможностями. В частности, из основных решений, реализованных на практике уже сегодня, можно выделить:

• Простая и удобная оплата в один клик. Теперь вашим покупателям не обязательно переходить на официальный сайт компании для того, чтобы приобрести необходимые товары либо же услуги. В данном случае витрина уже присутствует внутри приложения. К тому же софт сразу же запомнит адрес клиента и предложит для него огромное разнообразие вариантов для оплаты. После того как необходимая сумма будет переведена, этот факт также сохраняется в мессенджере. То есть такое решение особо удобно будет для постоянных покупателей, так как исключается необходимость постоянно вводить реквизиты. Все последующие оплаты будут осуществляться буквально в один клик. Но самое интересное здесь то, что приложение не будут хранить карты ни в Telegram, ни в магазине. Это значит, что ваша персональная финансовая информация будет надежно скрыта от стороннего доступа.
• Использование игрового интерактива. До того как в Телеграм появилось приложение Web App, здесь были доступны исключительно имитации игровых механик. То есть это были достаточно элементарные решения, которые уже на сегодня утратили возможность привлекать внимание пользовательской аудитории. Теперь же непосредственно в мессенджере вы сможете создавать индивидуальные HTML-5 игры, что обязательно найдут своих ценителей среди ваших подписчиков.
• Автоматический сбор данных для аналитики. Классический Telegram-бот ранее знал о пользователе достаточно мало информации. В частности, ему был доступен ник и полное имя, ID, а также язык общения. Благодаря приложению Web App вы также получаете возможность собирать персонализированные данные, в том числе IP-адрес, портрет, регион, часовой пояс, а также ряд другой информации, входящей в профиль пользователя непосредственно на платформе данных клиента (CDP). После настройки соответствующих метрик вы будете видеть конверсию, исходящую от того или иного пользователя, тип устройства, с которого он подключается к сети, глубину просмотра. Более того можно будет проанализировать, какие страницы вашего сайта он посетил, какие из них удержали его внимание, а какие он банально перелистнул. Но хотим обратить внимание то, что уже при первом открытии приложения у пользователя, увидев сообщение, предлагающие ему показывать персональный IP-адрес его устройства. Подобное решение может отпугнуть часть пользователей, но далеко не всех. Каждый кто знает, что все интернет-сайты автоматически собирают пользовательскую информацию, в частности тот же IP-адрес, они будут вполне лояльно относиться к подобному решению и предоставлять свое согласие.
• Наличие нативной рекламы. Приложение Web App предлагает встроить в Телеграм рекламный баннер. Подобное решение не вызовет негативной реакции со стороны пользователей, так как, заходя на ваш аккаунт в мессенджере, большая часть людей уже на интуитивном уровне готова видеть какие-то рекламные предложения. К тому же вы сможете сделать свой баннер максимально персонализированным, креативным, что обязательно будет оценено пользовательской аудиторией.
• Отображение пути пользователя. Чат-бот Telegram с приложением Web App вы сможете легко встроить в свою воронку продаж и те рекламные кампании, которые в данный момент времени у вас запущены. Сбор информации о пользовательских действиях и портрете ваших клиентов будет собираться в привычных средах. Как вариант, если вы запустили рекламу в Инстаграм и привлекаете пользователей непосредственно в собственные аккаунты, то пользователи автоматически будут перенаправляться на бота. То есть вы устанавливаете изначально в боте специальный инструмент, далее уже подключаете его в ретаргетинг. Также в приложении Web App имеется встроенная собственная метрика, которая в автоматическом режиме будет собирать информацию и направлять ее на платформу клиентских данных. На основании полученной информации вы сможете подобрать для того или иного клиента персональное предложение, которое будет в наибольшей степени учитывать его интересы и пожелания, что наверняка вызовет ответную реакцию и поможет настроить кросс-канальную коммуникацию.

Как видите, функциональные возможности, которые на сегодня реализованы в приложение Web App для Телеграм достаточно широкие и они наверняка пригодятся представителям разных категорий бизнеса.

ТОП-5 причин для внедрения Web App в Телеграм бот

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

1. Обеспечение более тесного и эффективного взаимодействия с потенциальными покупателями. На сегодня в России Телеграм — это второй по популярности мессенджер после WhatsApp. К тому же в последнее время наметилась тенденция к ускоренному росту пользовательской аудитории: она увеличивается намного быстрее, чем у любой другой площадки. На сегодня количество людей, которые используют на практике данный мессенджер уже превысило 100 миллионов человек и продолжает увеличиваться. То есть внедряя приложение в свой чат-бот вы не уводите людей из привычной для них среды общения, при этом сокращаете путь клиента, повышаете уровень конверсии.
2. Подключение и настройки аналитики. Мы уже говорили о том, что данное приложение имеет собственный инструмент, собирающий пользовательские данные, структурирующие их. Это значит, что при составлении портрета аудитории или выполнении других сопутствующих работ вам не придется подключать сторонние сервисы для того, чтобы понять, какие именно товары, услуги больше всего интересуют вашу аудиторию, какие нет, находить индивидуальные решения для каждого потенциального покупателя, контролировать моменты, что вызывают сложности в процессе взаимодействия.
3. Решение широкого спектра бизнес-задач. Классический Telegram-бот с приложением Web App позволит вам создавать абсолютно любые сервисы. Как вариант, это может быть полноценный онлайн-каталог товаров с уже встроенной корзиной. Либо же отдельная страничка, на которой потенциальные покупатели могут принять участие в той или иной программе лояльности. При желании можно подключить форму для добавления кешбэка, выделить страничку, где люди могли бы заполнить форму обратной связи, записаться на консультацию, услугу. Также при помощи данного приложения можно создать обучающую платформу для персонала. Последний вариант уже неоднократно был реализован на практике, так как в итоге удается сформировать гибкий, прозрачный и технологичный процесс обучения с высоким уровнем доступности обучающих материалов, их удобством в восприятии. Если у учеников будут возникать какие-то вопросы, то чат-бот на них ответит. К тому же будут регулярно рассылаться напоминания о появлении новых учебных модулей тех или иных креативов, викторин.
4. Снижение расходов на привлечение целевой аудитории. Особенно это актуально будет для бизнеса, что уже использует на практике чат-бот и у которого есть собственная база подписчиков. Настроив Телеграм Web App, вы сможете направлять в свое приложение уже подогретый трафик, что в разы повысит эффективность работ и позволит получить максимальный результат.
5. Повышенная забота об удобстве пользователя. Более быстрого, комфортного канала для взаимодействия с пользовательской аудиторией, чем мессенджеры на сегодня сложно найти. Несмотря на то, что сегодня существует огромное количество отдельных приложений, которые по своему функционалу не будут уступать тем же чат-ботам, они постепенно теряют свою актуальность. И основная проблема в том, что их необходимо скачивать и устанавливать себе на телефон дополнительно, забивая память, тратя лишнее время. Здесь же ничего подобного не надо будет делать: весь функционал реализован непосредственно в мессенджере.

Но один из наиболее главных нюансов во всем этом — это готовность пользовательской аудитории к взаимодействию с техническими новшествами и передовыми решениями.

Кому из представителей бизнеса подойдет Телеграм Web App?

А сейчас выделим четыре основных направления бизнеса, где внедрение в чат-бот Telegram приложения Web App даст на практике максимальный результат:

• Используя Телеграм Web App, вы сможете запустить мессенджер на целый интернет-магазин, подключив к нему наиболее подходящие для себя способы оплаты, форму для введения промо-кодов и даже опцию проверки кассового чека.
• Дело в том, что классический чат-бот для решения подобных задач не предназначен. Все дело здесь в том, что для него она будет достаточно сложной ввиду наличия особой логики. Но добавление приложения Web App к нему позволит гарантированно справиться с поставленной задачей. А это значит, что вы можете запускать различные игровые приложения, обучающие курсы с разноплановыми заданиями, создавать библиотеки знаний и пр.
• Сфера услуг. Представьте, что теперь ваши клиенты смогут записаться к вам буквально путем пары кликов. Не надо будет звонить, отправлять сообщения, заполнять формы обратной связи и ждать обратных звонков. Буквально пару нажатий пальцем по экрану или кликом мышки будет достаточно, чтобы записаться к врачу в клинику, к парикмахеру, заказать суши, забронировать номер в отеле или столик в ресторане, оставить отзыв, внести персональные данные в личный кабинет.
• Ритейл. Используйте возможности, которые дает данное приложение для того, чтобы запускать различные промо-акции, обзоры среди пользовательской аудитории. На чат-бот вы можете возложить обязанность сообщать вашей аудитории о появлении в магазине новых товаров, запуске того или иного акционного предложения.

Все это позволяет с уверенностью утверждать, что добавление в Telegram-бот приложения Web App в разы расширит функциональные возможности мессенджер-маркетинга. С его помощью вы сможете создавать неординарные прогрессивные интерфейсы, выстраивать сложные сценарии для взаимодействия с пользовательской аудиторией. Это все то, что невозможно реализовать при помощи самих чат-ботов. Не забудьте использовать его и для повышения эффективности воронки продаж. В итоге вы получаете продукт, который может стать полноценной заменой классическому мобильному приложению. Только в этом случае вам не надо будет выполнять какие-либо дополнительные настройки, скачивать его себе на устройство.

Теперь, когда вы понимаете необходимость реализации данного решения, дело осталось за малым — реализовать все на практике. О том, как внедрить приложение в Телеграм-бот мы и поговорим далее. В частности, распишем все те действия, которые вам предстоит реализовать на практике, чтобы получить Telegram Web App и запустить его в работу.

Внедряем Web App в Telegram-бот

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

Чтобы получить доступ к самим приложением, в частности Web App вам необходимо воспользоваться инлайн- кнопками либо же клавиатурой. К тем типам, которые существуют уже на сегодня был добавлен новый параметр web_app. Необходимое значение для него — это добавленный тип WebAppInfo, содержащей ссылку, ведущую непосредственно на само приложение. На фото видно, как будет выглядеть реализация данного этапа.

Также можно выполнить переход к данному онлайн-приложению через кнопки меню. Вы сможете закрепить его при помощи BotFather либо же воспользоваться опцией «Закрепленные». Для этого вам достаточно будет создать отдельную кнопку, содержащую самую простую ссылку на своего бота, в том числе и с использованием инлайн- кнопок. В данном случае можно воспользоваться в следующим параметром:

startattach — InlineKeyboardButton ("Перейти", url='https://t.me/?startattach').

Но хотим обратить ваше внимание на то, чтоб переход через «Закрепленные» возможно реализовать далеко не через каждого бота. То есть опция доступна не везде. Если вы ее не увидите у себя, значит воспользуйтесь другими вариантами подключения.

Программируем Web App

На данном этапе мы подключаем наше приложение к Телеграм-боту. Для этого вам необходимо будет всего лишь вставить в ваш HTML-код странички скрипт telegram-web-app.js непосредственно в тег head еще до всех скриптов:

Сразу после того, как вы подключите свое приложение в скриптах, то сможете пользоваться всеми иными возможностями, которые предлагает решение Telegram WebApps. Для более простой и удобной работы вам стоит использовать Window.Telegram.WebApp. Хотим обратить внимание на то, что список методов и объектов, которые здесь предусмотрены, достаточно внушительный. Как вариант, вы сможете добавить опцию приветствования пользователя, который перешел в ваш мессенджер Телеграм через бота.

Также у вас теперь есть возможность обрабатывать различные события при помощи клика на главную кнопку (MainButton) либо же при помощи кнопки назад (BackButton). Реализовать это можно несколькими способами:

Выше мы уже говорили о том, что одно из наиболее весомых преимуществ, присущих данному решению состоит в том, что здесь реализована возможность осуществлять оплату непосредственно внутри приложения. Чтобы воспользоваться встроенной оплатой, вам необходимо реализовать метод OpenInvoice. В данном случае вы изначально формируете так называемый инвойс линк, то есть ссылку на оплату. Сделать это можно непосредственно в скрипте, отправив соответствующий запрос к Telegram API. Но выбирать такой вариант мы бы не рекомендовали, ведь в этом случае вам необходимо будет раскрыть персональные данные бота, которые должны быть по большому счету спрятаны от всеобщего доступа. В данном случае речь идет о его собственных токенах, провайдеры оплаты и прочих скажем так секретных данных. Поэтому более разумным решением будет воспользоваться сервером вашего приложения, то есть ботом, а уже из скрипты отправить запрос к нему.

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

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

Содержимое переменной initData [в window.Telegram.WebApp] — это строка, которая записывается в формате «ключ=значение». Каждая группа разделяется знаком &. Благодаря этому можно будет использовать параметры для поиска в ссылках. В данном случае мы говорим о таких параметрах, как auth_date, query_id, user и hash. Из данной строки может быть сформирована еще одна группа data-check-string. Она будет включать в себя те же параметры, за исключением Hash. Единственное, что они будут рассортированы и уже разделены при помощи \n, которая и участвует в валидации.

Еще одно значение, что принимает участие в валидации — это secret_key. Это своего рода хеш варианта HMAC-SHA-256 исходя из показателей токена вашего бота, также ключа WebAppData. То есть, исходя из условия, в том случае, если хэш варианта HMAC-SHA-256 в зависимости от значения data-check-string и ключа secret_key будет равняться hash, взятому непосредственно из initData, то пользователь окажется реальным. Вот пример псевдокода от разработчиков:

Еще один момент, на которой хотели бы обратить ваше внимание, так это на то, что валидировать и генерировать secret_key стоит на стороне. В частности, для решения данной задачи вполне подойдет сервер. Так вы сможете удержать в секрете token бота. На практике подобное решение может быть реализована следующим образом:

В том случае, если вы хотите настроить свой Telegram WebApps под каждого пользователя, то для этого вам стоит воспользоваться таким инструментом, как ThemeParams. У него внутри будут содержаться параметры, что автоматически будут подстраиваться под ту тему мессенджера, которая в данном случае реализована на его устройстве. В данном случае речь идет о фоне, ссылках, тексте и пр. Использовать все это вы сможете не только в скриптах. Также у вас будет возможность добавить все это в стили (CSS) с использованием параметра var.

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

Подводим итоги

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

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

Если вы пройдете по ссылке https://mobileproxy.space/user.html?buyproxy, то сможете познакомиться более подробно со всеми теми возможностями, которые предлагают вам мобильные прокси и сервис MobileProxy.Space, в частности. Также вы сможете познакомиться с актуальными тарифами, воспользоваться бесплатным двухчасовым тестированием. Если в работе возникнут сложности, нужна будет дополнительная консультация специалистов, обратитесь в службу технической поддержки, которая работает круглосуточно.

Поделитесь статьёй: