Как добавить аватарку в мини-приложение PuzzleBot
Аватарка делает бота более личным: пользователь видит своё фото в личном кабинете мини-приложения. Ниже — рабочая схема через Telegram API, переменную PuzzleBot и HTML-блок.
Настраиваем переменную
Сначала настраиваем переменную, которая получает изображение аватарки из Telegram-профиля подписчика. Для этого переходим во вкладку «Переменные».
- Создаём персональную переменную.
- Выбираем вариант «Интегрированный».
- Тип интеграции оставляем «HTTP запрос».
- Формат значения оставляем «Текст».
- В ссылку JSON вставляем запрос к Telegram API.
https://api.telegram.org/bot<TOKEN из BotFather>/getUserProfilePhotosТокен берём из бота @BotFather. Тип запроса оставляем «GET».
Передаём параметры запроса
- Нажимаем «Добавить параметр».
- Ключ: user_id, значение: {{USER_ID_TEXT}}.
- Второй параметр: ключ limit, значение 1.
Значение 1 ограничивает запрос одной последней аватаркой.
Нажимаем «Проверить запрос». Если всё хорошо, в ответе появятся варианты для выбора. Нужно выбрать значение, которое показано на скриншоте.
Выводим аватарку в мини-приложении
Переходим в любое мини-приложение и добавляем блок HTML-кода. Сейчас это самый простой способ вывести картинку через переменную в мини-приложении.
В HTML-блок вставляем пример:
<img src="{{LINK_BY_FILE_ID}}{{AVATAR_PHOTO}}" style="width: 100%" onerror="this.src='URL_заглушки';">AVATAR_PHOTO — название созданной ранее переменной. URL_заглушки — прямая ссылка на файл, который покажется, если у подписчика нет аватарки.
Почему не {{USER_AVATAR_URL}}
Можно спросить: почему не взять системную переменную {{USER_AVATAR_URL}}? Потому что размер этого изображения маленький. Если растянуть его на ширину экрана, качество сильно ухудшится.
Поэтому берём фото через Telegram API и выводим его через свою переменную.
Отдельное спасибо разработчикам
Антону @bertish_zog, Евгению @Alexashin и Наталье @B0gdanka, благодаря инициативе которой этот урок стал возможен.
Ирина Захарова, разработчик ботов.
