В рунете заблокирован домен t.me, через который работают ссылки на телеграм. Сервисы-заменители (t-do.ru и прочие) напичканы рекламой и в любой момент могут перестать работать. Используйте лучше нативные ссылки — они гарантированно работают на любом устройстве, где установлен телеграм. И никакой Роскомнадзор ничего с этим не сделает.
Вот как это работает:
Канал
https://t.me/название → tg://resolve?domain=название
Заметка в канале
https://t.me/название/номер → tg://resolve?domain=названиеtext=описание → tg://msg_url?url=ссылка#128640;
Источник: antonz.ru
Создание telegram web apps и взаимодействие с ними в телеграм ботах
В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
HOW TO HACK Telegram. Telegram’s HIDDEN issues
Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.
— Все элементы должны быть отзывчивыми и спроектированы с учетом мобильной ориентации устройств.
— Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
— Все анимации должны быть плавными, в идеале 60 кадров в секунду.
— Все input и изображения должны содержать label для доступности.
— Приложение должно обеспечивать бесшовную работу, отслеживая изменение цветов темы с помощью API, и используя их соответствующим образом.
Давайте же опробуем это на практике!
Создание кнопки
Первое, что нам нужно сделать — создать кнопку запуска веб-приложения. Это можно сделать двумя способами:
1.2. Далее выбираем бота, которому нужна кнопка веб приложения
1.3. Отправляем ссылку по которой доступно наше веб-приложение
1.4. Пишем имя кнопки — будет отображаться внизу слева
Вот и все. В целом, если у вас есть адаптивный сайт и вы хотели просто добавить его в бота, тут можете остановиться.
Только при добавлении кнопки этим способом мы можем получить информацию о пользователе.
2. В коде бота — клавиатурные кнопки.
Запуск бота с inline-кнопки даёт суть тоже самое, что и предидущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.
Покажу на примере pytelegrambotapi — я понимаю, что это не самая популярная библиотека для написания телеграмм-ботов, но так получилось, что я пишу именно на ней. Если вы пользуетесь другой библиотекой/языком, думаю, вам не составит труда действовать по аналогии. Вы можете сразу посмотреть пример или перейти в репозиторий и посмотреть код с комментариями:
How to Use Telegram
2.1. Делаем все стандартные штуки для запуска бота — импорт библиотеки, ввод токена, infinity_polling, обработчик команды start. Если вы не понимаете о чем я, вам сюда.
2.2. Создаем функцию, которая вернет нам клавиатуру с нужной кнопкой.
Для того, чтобы создать кнопку, нужно сначала создать WebAppInfo-объект внутри которого будет url на наш сайт.
def webAppKeyboard(): #создание клавиатуры с webapp кнопкой keyboard = types.ReplyKeyboardMarkup(row_width=1) #создаем клавиатуру webAppTest = types.WebAppInfo(«https://telegram.mihailgok.ru») #создаем webappinfo — формат хранения url one_butt = types.KeyboardButton(text=»Тестовая страница», web_app=webAppTest) #создаем кнопку типа webapp keyboard.add(one_butt) #добавляем кнопки в клавиатуру return keyboard #возвращаем клавиатуру
2.3. Отправляем сообщение с нашей клавиатурой при отправке команды или любом другом действии:
bot.send_message( message.chat.id, ‘Привет, я бот для проверки телеграмм webapps!)’, reply_markup=webAppKeyboard())
Готово. Кнопки у нас есть.
Тут можно вообще закончить, если вы просто хотели, чтобы пользователь мог открыть ваш сайт из бота (зачем-то). Работать это будет вот так:
Работа с веб-приложением
Теперь идем в наше веб-приложение. На момент написания статьи открывается любая ссылка, даже на codepen.
Инициализация
Чтобы взаимодействовать с телеграм подключаем скрипт:
После этого нам будет доступен объект: window.Telegram.WebApp
Записываем его в переменную и начинаем нашу работу.
let tg = window.Telegram.WebApp;
Что же мы теперь можем? Не так много, как хотелось бы, но и не мало. Приложение состоит из: основной кнопки (telegram-объект) и самой страницы, которая загрузилась по ссылке. Остальные элементы telegram-интерфейса нам не доступны. Однако, доступны цвета темы пользователя:
Цвета
Они доступны в формате hex как css-переменные:
var(—tg-theme-bg-color)
var(—tg-theme-text-color)
var(—tg-theme-hint-color)
var(—tg-theme-link-color)
var(—tg-theme-button-color)
var(—tg-theme-button-text-color)
Или как объект ThemeParams в js (вместо window.Telegram.WebApp я использую переменную tg):
Но будьте осторожны, цвета — необязательный параметр, поэтому стоит проверять, есть ли они, перед тем как использовать.
Также имеется обработчик события изменения цветовой схемы:
При изменении цветовой схемы или размеров окна можно поменять что-то и в нашем веб-приложении.
Основные возможности
С цветами разобрались — теперь к другим основным параметрам:
tg.initData //получаем данные от пользователя в виде строки (работает только при запуске из меню команд бота). tg.initDataUnsafe // получаем данные от пользователя в виде объекта (работает только при запуске из меню команд бота). tg.isExpanded // возвращает true, если приложение открыто на всю высоту, false — если нет. tg.viewportHeight // вернёт ширину окна. tg.sendData(data) // отправляет данные боту в строковом виде, после чего закрывает приложение (работает только если приложение запущено с keyboard button). tg.ready() // метод позволяет отследить, когда приложение готово к отображению. tg.expand() // метод позволяет растянуть окно на всю высоту. tg.close() // метод закрывает приложение.
Main button
Виджет Телеграм-канала: как сделать и поставить на сайт
Посетителей сайта нужно удерживать и возвращать на сайт снова и снова. Также их можно дополнительно монетизировать. Раньше для этой задачи использовали емейл-рассылки, но есть не менее эффективный инструмент — Телеграм-канал. Привлечь посетителей сайта в Телеграм канал можно через виджет.
В статье расскажем, как создать виджет для Телеграм и добавить его на сайт.
Какие бывают виджеты для Телеграм
- виджет для приглашения в группу или на канал;
- виджет для диалога через Телеграм (аналог онлайн-консультантов и чат-ботов);
- виджет в виде кнопки для перепоста материала или страницы в Телеграм.
Как создать Телеграм виджет и добавить на сайт
Есть 2 основных способа создать и добавить виджет на сайт:
- через HTML-код;
- с помощью плагинов;
Через HTML-код
Писать код с нуля нет необходимости — можно воспользоваться готовыми сервисами. Они позволяют настроить внешний вид виджета и дают готовый код, который нужно вставить на страницу сайта.
Сервисы, в которых можно создать Телеграм виджет:
- TGWidget (виджет для привлечения на канал);
- T.website (виджет канала с кнопкой подписки);
- Telegram.im (кнопка для начала диалога через ТГ);
- Elfsight (виджет Телеграм диалога);
- Hoversignal (виджет Телеграм диалога);
- Teletype (виджет Телеграм диалога);
- Widg.io (виджет чата, есть интеграция с Wix и WordPress);
- myWidget (чат-бот);
- SendPulse (виджет подписки на бота Telegram);
- DiscussBot (comments.app — виджет комментариев на сайте через Телеграм);
Также есть конструктор виджетов от самого Телеграма. В нем доступно 4 типа виджетов: кнопка «Поделиться в Телеграм», виджет поста (с возможностью перейти на канал), виджет, позволяющий авторизоваться через Телеграм и виджет для комментариев.
Создаем виджет подписки на канал на примере сервиса T.website:
Создаем виджет поста (с кнопкой подписки) через конструктор Телеграма:
Заходим на страницу core.telegram.org/widgets. Выбираем тип виджета (один из четырех). В нашем случае это виджет поста, второй по счету. Кликаем на него.
Здесь есть инструкции, как получить код.
Важно: пост должен быть в публичном канале или группе.
Чтобы просто получить код поста без внешних изменений, нужно найти нужное сообщение в Телеграм, нажать правой кнопкой мыши и скопировать ссылку на сообщение.
Полученную ссылку открываем в браузере и нажимаем на кнопку < >EMBED.
Получаем код виджета. Копируем и вставляем на страницу сайта.
Если хотим кастомизировать виджет, например, изменить его размер и цвет, то нужно вставить ссылку на сообщение на сайте core.telegram.org/widgets (там, где выбирали тип виджета). Вносим изменения и получаем обновленный код.
Как вставить готовый HTML-код на сайт
Зависит от того, на чем сделан сайт. Если на чистом HTML, то в коде страницы нужно найти место, где будет размещен виджет и вставить туда код виджета. Если сайт на движке или на конструкторе, то обычно там предусмотрены виджеты, которые называются HTML-код. Нужно добавить виджет на страницу и в его настройках уже прописать полученный код.
Вот, например, как это выглядит на конструкторе Тильда — нужно добавить новый блок на страницу. Категория «Другое» — блок «HTML-код». В него вставляем код виджета. Блок доступен только на платных тарифах. У Wix есть аналогичный инструмент.
С помощью плагинов
Если сайт на движке, например, на Вордпрессе — можно подключить и настроить плагин. Хотя и на движок можно добавить виджет через код. Но так как плагины существуют, опишем и этот способ.
*В большинство тем для Вордпресс уже встроены виджеты с кнопками соцсетей и мессенджеров. Они выглядят, как иконки с ссылками на соцсети, мессенджеры, YouTube-канал. Но если стоит задача визуально выделить именно Телеграм канал, то нужен отдельный виджет.
Плагины с виджетом Телеграм для Вордпресса:
- Channel Widget for telegram (показывает пост из Телеграм, можно перейти через него на канал);
- Replain (плагин для общения с посетителями сайта через Телеграм);
- QuadLayers Telegram Button (кнопка для начала диалога через ТГ)
- Telegram Chat (еще один виджет чата);
- WP Telegram Comments (виджет комментариев для сайта, чтобы оставлять комментарии посетители должны авторизоваться через ТГ);
Виджеты работают по аналогии — сначала нужно скачать и активировать плагин, затем в настройках указать ссылку на канал и кастомизировать его внешний вид.
Лайфхак: если стоит задача просто перенаправлять трафик с сайта в Телеграм канал, можно создать на странице сайта кнопку в цветах Телеграм с надписью-приглашением подписаться на канал, чтобы получать рассылки с новым материалом. Кнопку желательно сделать с иконкой Телеграма. Дальше просто привязываем к этой кнопке ссылку на Телеграм канал и получаем новых подписчиков.
Заключение
В зависимости от типа виджета выбирайте удобный для себя способ его создания и добавления на сайт. Если есть возможность добавить виджет через код — лучше выбрать этот вариант вместо тех же плагинов. Большое количество плагинов могут перегружать сайт. Тем более, получить код для Телеграм виджета и поставить его на сайт проще простого.
Источник: quasa.io