Telegram webz что это

Статьи по теме:

• Интеграция с 2ГИС
• Интеграция с Дром.ру
• Подключение бота SaluteBot
• Интеграция с Aliexpress
• Интеграция с Google Sheets
• Интеграция с САМО-турагент
• Интеграция с ВКонтакте
• Интеграция с Авито
• Подключение интеграции с Viber
• Включение функции Омниканальность
• Интеграция с VideoForce
• Интеграция с i2crm
• Интеграция с Zapier
• Интеграция с Ploomes
• Интеграция с Piperun
• Интеграция с Zoho
• Интеграции с CRM — вопросы и ответы
• Интеграция с RetailCRM
• Интеграция с Yoolla
• Интеграция с amoCRM
• Интеграция с CRM Ramex
• Интеграция с Y-clients
• Интеграция с РемОнлайн
• Интеграция с WireCRM
• Интеграция с Pipedrive CRM
• Интеграция с FreshOffice
• Интеграция с Creatio
• Интеграция с Битрикс24
• Интеграция с InSales CRM
• Интеграция с GetCourse
• Интеграция с МойСклад
• Интеграция с EnvyCrm
• Добавление чата в Auto.ru
• Интеграция с Мегаплан
• Интеграция со Slack
• Интеграция с email каналом
• Подключение группы в Одноклассниках
• Отслеживание событий и конверсий Jivo в Google Analytics и Яндекс Метрике
• Интеграция с U-ON.Travel CRM
• Интеграция с CRM RegionSoft

Ещё статьи Свернуть

Как пользоваться Telegram Web | Телеграмм Веб – новая версия мессенджера!

1. На главную
2. База знаний
3. Интеграции с CRM, Google Analytics, Яндекс.Метрикой и сторонними системами
4. Подключение интеграции с Telegram

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

Telegram WebApps. Как встроить веб-приложения в чат-бота?

Относительно недавно команда Telegram выпустила обновление, с которым появилась возможность встраивать в мессенджер веб-приложения. Как заявляют разработчики: «Telegram-бот нового поколения станет полноценной заменой любому сайту».

Встроенные веб-приложения поддерживают авторизацию пользователя (проверку его подлинности), встроенную оплату через различных провайдеров, кастомизацию под выбранную пользователем тему и многое другое. И все это на JavaScript.

Эта статья — обзор основных моментов внедрения веб-приложениий в телеграм-ботов. Она написана скорее для новичков или тех, кто хочет быстро узнать, «что к чему».

Внедряем веб-приложения

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

Переход к ним стал возможен через инлайн-кнопки (InlineKeyboardButton) и кнопки клавиатуры (KeyboardButton): к соответствующим типам был добавлен параметр web_app, необходимое значение для которого — добавленный тип WebAppInfo со ссылкой на веб-приложение. Пример реализации:

Telegram: что это такое и для чего он нужен | SEMANTICA

# Python 3: AIOgram v2.23.1 from aiogram import InlineKeyboardButton, KeyboardButton, WebAppInfo # . ikb = InlineKeyboardButton(«Перейти», web_app=WebAppInfo(‘https://’)) kb = KeyboardButton(«Перейти», web_app=WebAppInfo(‘https://’)) # .

Переход к одному веб-приложению возможен через меню: его можно закрепить с помощью BotFather. А также через закрепленные: достаточно создать кнопку с обычной ссылкой на бота (например, с помощью тех-же инлайн-кнопок) с параметром startattach — InlineKeyboardButton(«Перейти», url=’https://t.me/?startattach’) ; однако переход через закрепленные оказывается доступным не для всех ботов.

Программируем веб-приложение

Чтобы подключать веб-приложение к пользователю Telegram, достаточно вставить в HTML-код страницы скрипт telegram-web-app.js в тег до всех скриптов:

После его подключения в скриптах, объявленных после, мы можем пользоваться всеми возможностями Telegram WebApps с помощью объекта window.Telegram.WebApp.

Список методов и объектов в window.Telegram.WebApp достаточо большой, полностью ознакомиться с каждым из них вы можете здесь. Например, вы можете поприветствовать пользователя, который перешел в веб-приложение через бота:

Также мы можем обрабатывать различные события. Например, нажатие «главной» кнопки (MainButton) или кнопки «Назад» (BackButton), причем несколькими способами:

var MainButton = WebApp.MainButton; var BackButton = WebApp.BackButton; MainButton.show(); BackButton.show(); MainButton.onClick(function() < WebApp.showAlert(«Хорошо, ты нажал на главную кнопку.»); >); WebApp.onEvent(‘mainButtonClicked’, function() < /* also */ >); BackButton.onClick(function() < WebApp.showAlert(«Нет пути назад!»); BackButton.hide(); >); WebApp.onEvent(‘backButtonClicked’, function() < /* also */ >);

Особый интерес представляет возможность перейти к встроенной оплате из веб-приложения. Сделать это можно через метод openInvoice. Однако прежде необходимо сформировать ссылку на оплату (инвоис-линк). Формировать ее прямо в скрипте с помощью запроса к Telegram API оказывается плохой идеей, так-как для этого потребуется раскрыть секретные данные бота (токены бота, провайдера оплаты и т.п.). Поэтому формировать ее следует, например, на сервере веб-приложения (через бота), а из скрипта сделать запрос к нему:

let xhrURL = new URL(‘https:///’); xhrURL.searchParams.set(‘title’, . ); /* . setting other non-private optional parameters */ let xhr = new XMLHttpRequest(); xhr.open(‘GET’, xhrURL); xhr.send(); xhr.onload = function()

После чего у нас будет открываться карточка товаров/услуг с возможностью их оплатить. На примере встроенной в веб-приложение оплаты Liot:

Также мы можем обрабатывать события после закрытия окна оплаты:

WebApp.onEvent(‘invoiceClosed’, function(object) < if (object.status == ‘paid’) < WebApp.close(); >else if (object.status == ‘failed’) < WebApp.showAlert(«Не беспокойтесь. Мы сохраним ваш выбор.»); >>);

Особое внимание стоит уделить безопасности. Для проверки подлинности пользователя («Настоящий ли пользователь зашел в веб-приложение и через Telegram ли?») предусмотрен способ валидации получаемых [через скрипт] данных.

Содержимое переменной initData [в window.Telegram.WebApp] представляет из себя строку формата ключ=значение , разделенных WebAppData» .

И так, по условию, если хэш варианта HMAC-SHA-256 по значению data-check-string и ключу secret_key равно hash [из initData], значит пользователь подлинный. Какой псевдо-код демонстрируют разработчики:

data_check_string = . secret_key = HMAC_SHA256(, «WebAppData») if (hex(HMAC_SHA256(data_check_string, secret_key)) == hash) < // data is from Telegram >

Очевидно, что генерировать secret_key и валидировать следует на стороне, например, на сервере, чтобы не раскрыть токен бота. Пример реализации:

Дизайн веб-приложения можно подстраивать под пользователя с помощью объекта ThemeParams, внутри которого содержатся подстроенные под выбранную пользователем тему мессенджера: фон, текст, ссылки и т.п. При этом, вы можете использовать их не только в скриптах, но и в стилях (CSS) с помощью var :

h1 < color: var(—tg-theme-text-color); >p < color: var(—tg-theme-hint-color); >/* . */

Возможности встроенного в чат-бот веб-приложения вы можете также увидеть на примере Liot — концептуального телеграм-бота для записи в один из салонов красоты. Он же на ГитХабе по ссылке.

Надеюсь, вы смогли из этой статьи вынести для себя что-то полезное 🙂

Источник: habr.com

Обновление Telegram Web Z: защитный код и другие опции

1 и 6 июня в официальном канале Telegram WebZ появились сообщения об обновлениях. Рассказываем самое важное про обновление Telegram Web Z!

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

Чтобы установить код,

• на главной странице веб-клиента нажмите на три чёрточки в левом верхнем углу,
• выберите Passcode lock ,

• придумайте код и введите его два раза.

Вот какие ещё добавлены обновления Telegram WebZ:

• в Media Viewer теперь есть встроенные жесты масштабирования и панорамирования для трекпада или Magic Mouse;
• улучшения в статистике групп и каналов.

• Подкасты и длинные треки теперь могут воспроизводиться со скоростью х2.

• Стали лучше воспроизводиться и отправляться видео в формате .mov.

Чтобы обновить Telegram Web Z, не нужно ничего делать, ведь это веб-клиент. Изменения в нём появляются автоматически.