К основному содержимому

Оформление приложения

Стандартное оформление приложения через Telegram.

Anton Ingachev avatar
Автор: Anton Ingachev
Обновлено больше недели назад

В любом Telegram-приложении можно оформить определенный набор элементов внешнего вида:

В качестве примера можно посмотреть тестовое приложение для кафе.

Ниже мы рассмотрим, как это сделать.

Аватар приложения

Обычно аватаром является лого бизнеса или личное фото.Добавить аватар для приложения можно на любой платформе.

Открываем нужное приложение в Telegram

Рис. 1. Открываем приложение.

Нажимаем на название приложения (рис. 1).

Рис. 2. Профиль приложения.

Жмем кнопку "Редактировать" (рис. 2).

Рис. 3. Жмем на иконку фотоаппарата.

Жмем на иконку фотоаппарата (рис. 3), загружаем нужную картинку, жмем кнопку "Сохранить".

В любой момент вы можете изменить текущую иконку на другую.

📌 Технические требования к аватару:

  • Формат изображения: JPG, PNG или WEBP.

  • Рекомендуемый размер: от 512×512 пикселей (Telegram сам обрежет в круг).

  • Пропорции: квадрат (1:1), чтобы избежать искажений.

  • Максимальный размер файла: до 5 МБ.

Краткое описание

Краткое описание приложения показано на рис. 4 под аватаром. Чтобы его изменить нужно повторить все действия, описанные для установки/замены аватара, только вместо загрузки картинки выбрать текст под ней и заменить на необходимый.

Рис. 4. Короткое описание приложения.

При необходимости можно в любой момент этим же способом обновить данное описание.

📌 Технические требования:

  • Длина: до 120 символов (включая пробелы).

  • Язык: должен соответствовать языку аудитории или настройкам локализации.

  • Формат: обычный текст, без эмодзи, ссылок, HTML и Markdown.

  • Поддержка Unicode: можно использовать любые алфавиты, но избегайте непонятных символов.

  • Не должно содержать:

    • запрещённых слов (наркотики, насилие и пр. — см. Политику Telegram).

    • вводящих в заблуждение утверждений (например, «официальный», если это не так).

Приветственное сообщение

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

Чтобы добавить их нужно использовать @BotFather. Открываем его, в меню выбираем "Мои боты", далее выбираем нужного бота. После этого видим меню на рис. 5. Выбираем "Редактировать бота".

Рис. 5. Меню для выбранного бота в BotFather.

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

Рис. 6. Список пунктов для редактирования.

Чтобы добавить/изменить картинику/гифку, выбираем пункт 1.

📌 Технические требования:

  • К картинке: форматы - JPG, PNG или WEBP, размер - 640x360 пикселей.

  • К гифке: формат - GIF, размеры - 320x180, 640x360 или 960x540 пикселей.

Чтобы добавить/изменить текст, выбираем пункт 2.

📌 Технические требования:

  • К тексту: до 512 символов, включая пробелы. Можно использовать Markdown.

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

Кнопка "Открыть"

Данная кнопка будет выглядеть как на рис. 7. Ее наличие позволит пользователю запускать ваше приложение из списка чатов или поиска, что удобнее и быстрее.

Рис. 7. Кнопка "Открыть" в Telegram-приложении.

Чтобы добавить кнопку "Открыть", вам нужно открыть нужное приложение в сервисе Mini Apps Builder, выбрать пункт "Дашборд", а потом скопировать ссылку после слова "Domain", как показано на рис. 8.

Рис. 8. Ссылка для кнопки "Открыть".

После этого открываем @BotFather в Telegram, выбираем /mybots, выбираем нужное приложение, далее выбираем пункт "Настройки бота". Видим меню как на рис. 9.

Рис. 9. Список меню.

Выбираем "Сконфигурировать Mini App". Видим рис. 10.

Рис. 10. Следующий шаг.

Жмем "Включить Mini App". Бот попросить вставить URL-адрес, это тот, что мы копировали на рис. 8. После отправки сообщения с этим URL, вы увидите подтверждение, что все установлено.

После этого появится кнопка "Открыть" у вашего приложения. Иногда может понадобится закрыть и открыть приложение Telegram, чтобы заработало.

Нашли ответ на свой вопрос?