Несмотря на массовую блокировку социальных сетей и других сервисов в России, публичные интернет-сообщества не унывают и давно перевели все свои активности в Телеграм. Телеграм – защищенный мессенджер, шифрование протокола которого позволяет практически абсолютную свободу действий. Можно скачивать фильмы или книги, музыку и видео. Распространенное явление — массовое ведение каналов и блогов, чатов в Телеграм.
Сегодня ведением Телеграм канала никого не удивишь. Кто-то даже ведет канал в формате заметок – некая замена Твиттера или личного дневника. А с возможностью комментирования публикаций каналы все чаще стали напоминать блоги или другие социальные сети.
Мессенджер постигло множество обновлений с выходом релиза номер 12. Это и реакции, и новые стикеры, премиум-подписка. Еще в приложении теперь можно добавить свою визитную карточку – QR-код своего контакта или канала. Удобная штука для того, чтобы быстро найти пользователя или канал в Телеграм. Просто сосканировать код камерой смартфона, и добавить контакт.
Checkbox Style — Telegram Toggle Style
Можно генерировать QR-код не только для своего контакта или группы, но и для любого другого, у которого есть публичная ссылка.
Как в телеграм сделать QR код?
Для своего контакта: Зайдите в настройки контакта, кликнув на шестеренку (если вы со смартфона), либо кликнув на три точки в верхнем правом углу. Возле картинки профиля будет изображение qr-кода. Кликнув на него, можно выбрать цвет, узор и подпись. Сохранив код, можно поделиться им с друзьями, распечатать или отправить по электронной почте.
Для группы: Кликните на название канала или группы. Рядом с публичной ссылкой будет изображение qr-кода. Необходимо сгенерировать его, нажав на изображение. После генерации можно разослать код в Телеграм или в другие мессенджеры.
Для другого контакта: Нажмите на имя или аватарку контакта в Телеграм, найдите изображение qr-кода. Сгенерируйте и сохраните код.
Если у другого контакта или группы нет публичной ссылки (например, группа закрытая), то qr сгенерировать не получится.
Как добавить контакт по коду?
Встроенного считывателя в Telegram нет, но практически во всех современных смартфонах по умолчанию есть приложение для считывания qr. Нужно с помощью него открыть код и расшифровать информацию, после чего нажать на ссылку, которая сгенерировалась после считывания, и выбрать «Открыть в Телеграм». Приложение автоматически запросит разрешение на добавление контакта в мессенджер.
Иногда случаются проблемы с добавлением контакта или считыванием ссылки из кода. Ссылка не может быть прочитана, или не добавляется контакт. Решается данная проблема следующим образом – нужно обновить Телеграм тому, кому выслан qr-код. После обновления мессенджера сгенерируйте qr-код снова. Проблема должна исчезнуть.
Источник: cheatbot.ru
Создание telegram web apps и взаимодействие с ними в телеграм ботах
В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная — Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.
Как сделать бота в телеграмме | Обзор платформы Watbot
Приложения Telegram известны своей скоростью, плавностью и кросс-платформенным дизайном. Ваше веб-приложение в идеале должно соответствовать этим принципам.
— Все элементы должны быть отзывчивыми и спроектированы с учетом мобильной ориентации устройств.
— Интерактивные элементы должны имитировать стиль, поведение и назначение уже существующих компонентов пользовательского интерфейса.
— Все анимации должны быть плавными, в идеале 60 кадров в секунду.
— Все input и изображения должны содержать label для доступности.
— Приложение должно обеспечивать бесшовную работу, отслеживая изменение цветов темы с помощью API, и используя их соответствующим образом.
Давайте же опробуем это на практике!
Создание кнопки
Первое, что нам нужно сделать — создать кнопку запуска веб-приложения. Это можно сделать двумя способами:
1.2. Далее выбираем бота, которому нужна кнопка веб приложения
1.3. Отправляем ссылку по которой доступно наше веб-приложение
1.4. Пишем имя кнопки — будет отображаться внизу слева
Вот и все. В целом, если у вас есть адаптивный сайт и вы хотели просто добавить его в бота, тут можете остановиться.
Только при добавлении кнопки этим способом мы можем получить информацию о пользователе.
2. В коде бота — клавиатурные кнопки.
Запуск бота с inline-кнопки даёт суть тоже самое, что и предидущий вариант. Однако, запуск с keyboard button дает возможность отправлять данные из веб-приложения в бота.
Покажу на примере pytelegrambotapi — я понимаю, что это не самая популярная библиотека для написания телеграмм-ботов, но так получилось, что я пишу именно на ней. Если вы пользуетесь другой библиотекой/языком, думаю, вам не составит труда действовать по аналогии. Вы можете сразу посмотреть пример или перейти в репозиторий и посмотреть код с комментариями:
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
Как создать рассылку в Telegram
Рассылки в Telegram используется бизнесом для рекламы товаров или услуг, информирования людей о любом событии, приглашении или приветствии. В SendPulse можно отправлять рассылки в Telegram с текстом, изображением, файлом и кнопкой перехода на свой ресурс или запуска цепочки для массового оповещения по всей базе или сегментированной группе подписчиков.
Подписчиками на Telegram чат-бот — это пользователи, которые перешли по ссылке на ваш бот и нажали «Запустить» или подписались через виджет, добавленный на сайте. А также подписчиком может быть канал или группа, где вы являетесь администратором и куда добавили своего бота (этот канал будет отображаться как отдельный контакт в «Аудитории» чат-бота).
Чтобы создать рассылку, в разделе «Чат-боты» перейдите на вкладку «Главная» и нажмите «Создать рассылку» (Create campaign).
Содержание
Выберите подключенный бот
Выберите бота, на аудиторию которого будет отправляться рассылка.
Сегментируйте аудиторию
Чтобы фильтровать получателей, выберите чекбокс «Сегментировать получателей» (Segment recipients). Ваша рассылка будет отправлена только тем, кто отвечает заданному условию. Например, если вы собираете дополнительные переменные во время подписки, создаете глобальные переменные или устанавливаете тег, вы можете производить за ними сегментацию по условиям «Переменная» и «Теги».
Можно активировать опцию «Активен за последние сутки», чтобы сделать рассылку тех, кто взаимодействовал Telegram ботом за последние 24 часа.
Чтобы добавить несколько условий для более персонализированного сообщения, нажмите кнопку «Добавить условие» (Add the list segmentation criteria). А когда определите ее, нажмите кнопку «Применить» (Apply).
Добавьте текст сообщения
Введите сообщение. Ограничение по длине одного текстового блока – 2000 символов.
В него еще можно вставлять переменные и эмодзи. Для этого нажмите <> в правом верхнем углу текстового поля и выберите требуемую переменную из списка. Каждому пользователю пришлет сообщение со значением переменной из его контакта. Например, начать сообщение с обращением к имени и включить данные по регистрации или заказу.
Добавьте кнопку
Вы можете добавить кнопку со ссылкой на ваш ресурс, с запуском цепочки или кнопкой оплаты. Разместить его можно под текстом или любым другим элементом.
Нажмите кнопку «Добавить кнопку» (Add button).
Продолжить цепочку
Выберите тип кнопки «Продолжить цепочку» (Continue flow) и цепочку, которая отправится по щелчку на кнопку.
Добавьте текст кнопки. Ограничение по длине – до 256 символов.
Ссылка
Вы можете добавить ссылку на внешний источник и запуск цепочки сообщений после перехода подписчика по ссылке. Выберите тип кнопки «Ссылки» (URL) и добавьте ссылку.
Также для кнопки типа «Ссылка» (URL) вы можете добавить ссылку на веб-приложение, например, на одностраничный интернет-магазин. Активируйте опцию «Открыть во всплывающем Web-App окне» (Open in web app pop-up), чтобы по ссылке открывался попап для перехода к приложению.
Вы можете создать интернет-магазин с товарами, корзиной, формой для сбора контактных данных и привязать ссылку к кнопке в Telegram. Пользователь может нажать кнопку, а затем оформить свою покупку в отдельном окне.
На самой странице можно добавить JS-код от Telegram, который работает с данными из мессенджера и передает информацию о подписчике.
Чтобы включить отправку цепочки, активируйте трекинг в настройках бота.
Оплата
Доступно на тарифе Pro и выше
В рассылках SendPulse можно добавлять кнопки оплаты, по которым подписчики смогут оплачивать товары прямо в чате Telegram. Для этого подключите метод оплаты, а в настройках кнопки выберите платежную систему, сумму и введите название товара.
Вы также можете продумать и добавить сценарий цепочки чат-бота после успешной оплаты.
В одной рассылке можно добавить до 25 кнопок всего и до 4 кнопок в ряд.
Добавьте элементы
Также можно добавить дополнительные медийные элементы: картинку, карточку, файл, видео и дополнительно текст и кнопки.
Для этого нажмите кнопку «Добавить кнопку» (Add botton) и выберите нужный элемент.
Текст
Вы можете выбрать дополнительный текстовый блок, который будет визуально отделен от основного сообщения.
Картинка
Добавьте картинку в форматах JPG и PNG размером до 2 MB, а также краткое описание.
Карусель
Доступно на тарифе Pro и выше
В одну карту можно добавить изображение, заголовок – до 32 символов, описание – до 80 символов и 3 кнопки со ссылкой на другую цепочку, внешний источник или форму оплаты. Карточек может быть не более 10 в карусели. Чтобы добавить новую, щелкните плюс справа.
Файл
Поддерживаемые форматы файла: zip, pdf и gif. Максимальный размер вложения – 20 MБ. Вы можете загрузить файл со своего устройства или добавить на него ссылку.
Видео и аудио
Доступно на тарифе Pro и выше
Вы можете скачивать видео и аудио до 20 МБ.
Предварительный просмотр
Элементы можно перемещать вниз и вверх, удалять и копировать. Для этого наведите на нужный блок и справа появятся кнопки.
После добавления всех элементов рассылки сделайте тестовую отправку и просмотрите, как будет выглядеть сообщение на устройстве.
Если вы добавили весь необходимый контент, нажмите кнопку «Далее» (Next).
Выберите время отправки
В следующем окне можно выбрать название рассылки – его будете видеть только вы в списке «Мои рассылки».
А также время отправки(когда отправлять) — можно отправить сразу или запланировать на определенную дату и время.
Нажмите «Отправить рассылку» (Send a campaign) – ваша рассылка отправится получателям.
Telegram имеет ограничение на отправку – 100 сообщений в секунду. Поэтому отправка на обширный список может происходить постепенно.
Также у Telegram нет ограничений на отправку сообщений пользователям в отличие от Facebook. Вы можете отправлять сообщения пользователям, которые не привлекались в последние 24 часа. Но используйте это разумно, не пытайтесь послать пользователю слишком много сообщений, иначе это может привести к жалобам и блокировкам бота.
Редактирование запланированной рассылки
Если вы запланируете отправку на другое время, то после создания рассылки вы можете отредактировать ее еще раз до отправки. Перейдите в список рассылок, выберите рассылку и в поле «Статус» нажмите «Редактировать» (Edit). Чтобы отменить отправку рассылки, нажмите «Отменить».
Анализ рассылки
По каждой рассылке можно просмотреть подробную информацию: сколько сообщений было доставлено и сколько подписчиков взаимодействовало с рассылкой.
Для этого перейдите на страницу «Мои рассылки» и щелкните нужную рассылку из списка. Перейдите на страницу выбранной рассылки, где вы увидите статус и статистику рассылки, а также список получателей.
Вы также можете экспортировать файл CSV вместе со списком получателей кампании и статусом доставки в рамках платного тарифного плана.
Источник: sendpulse.com