Создаём красивую ссылку на мини-приложение в Телеграм [подробная пошаговая инструкция по созданию специальной ссылки на telegram mini app]

© <a href="https://www.youtube.com/watch?v=1g9-vfO0o3k" rel="nofollow noreferrer noopener" target="_blank">Изображение</a>

В этой публикации мы подробно и пошагово разберём как создавать короткую, уникальную и красивую ссылку на ваше мини-приложение в Телеграм [Telegram mini apps, TMA], чтобы вы могли пересылать новым пользователям аккуратные и кастомизированные ссылки, по которым они в один клик будут запускать ваше мини-приложение (без необходимости специальных скачиваний и установок приложения на свой смартфон).
Итак, начнём...

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

Вам также могут быть полезны публикации:

1. Подробная пошаговая инструкция по созданию [ регистрации ] телеграм бота [ чат-бота, мини-приложения ] в BotFather

2. Подробная пошаговая инструкция по регистрации и созданию собственного мини-приложения в Телеграм [ Telegram mini apps ] в конструкторе Unitee Space

📖 Cодержание публикации [ навигация ]

1. Создание короткой ссылки на мини-приложение в BotFather

2. Исходная ссылка на мини-приложение из проекта на конструкторе Unitee Space

3. Как использовать короткую ссылку на мини-приложение?

Изображение 1:

1. Заходите в чат-бот BotFather , в котором зарегистрирован ваш бот, к которому "привязано" ваше мини-приложение (в данном случае мы будем рассматривать мини-приложение, которое создано на конструкторе мини-приложений Unitee Space)

2. Вводим команду - /newapp (🔴1 - на изображении) или находим её по нажатию кнопки "Меню" (🔴2 - на изображении). Рекомендую первый вариант, ибо проще, потому что искать в меню - это отдельные танцы с бубном.

Можете скопировать эту команду в один клик ⤵

/newapp

3. Отправляем команду /newapp в чат ⤵

Изображение 2:

1. После отправки команды BotFather выдает список всех ваших зарегистрированных ботов и спрашивает:

"Alright, a new web app. Which bot will be offering the web app?" (перевод: Хорошо, новое веб-приложение. Какой бот будет предлагать это веб-приложение?)

2. Выбирайте того бота, с которым связано мини-приложение. В нашем случае, это @test9897678_bot и нажимайте на эту кнопку (🔴1 - на изображении)

Изображение 3:

1. После отправки команды BotFather выдает список всех ваших зарегистрированных ботов и спрашивает:
"Creating a new web app for @test9897678_bot. Please enter a title for the web app." (перевод: Создание нового веб-приложения для @test9897678_bot. Пожалуйста, введите название веб-приложения.)

2. Напишите как будет называться ваше приложение на созданной ссылке. Для примера ⤵

🔴1 - на изображении примере - Telegram Mini Apps [DEMO]

Это соответствует названию веб-приложения (это синоним миги-приложения в Телеграм), в нашем случае, это будет Тестовое приложение

Изображение 4:

1. После отправки команды BotFather выдает список всех ваших зарегистрированных ботов и спрашивает: "Please enter a short description of the web app." (перевод: Введите краткое описание веб-приложения.)
2. Напишите описание вашего мини-приложения, которое будет отображаться на созданной ссылке. Для примера ⤵

🔴2 - на изображении примере - Демонстрация функционала мини-приложений в Telegram на no code платформе Unitee.space
Это соответствует описанию веб-приложения, в нашем случае, это будет ✅ Тестовое описание мини-приложения (кстати, можно использовать не только текст, но и эмодзи) - на изображении 4 это 🔴1

Изображение 5:

Далее BotFather предлагает "Please upload a photo, 640x360 pixels." (перевод: Пожалуйста, загрузите фотографию размером 640x360 пикселей.)

Необходимо изображение именно такого размера. По опыту, желательные форматы файлов - JPG, PNG, хотя BotFather не указывает ограничений.

Изображение 6:

Для загрузки изображения из файлового хранилища на вашем ПК или смартфоне, сначала наведите на знак "скрепки" (🔴1 - на изображении), а после в появившемся окне - на "Фото или видео" (🔴2 - на изображении).

Так же можно просто кликнуть знак "скрепки" (🔴1 - на изображении) и осуществляем выбор

Создаём красивую ссылку на мини-приложение в Телеграм [подробная пошаговая инструкция по созданию специальной ссылки на telegram mini app]

Вам необходимо выбрать и отправить в BotFather изображение, которое будет отображено следующим образом ⤵

Пример размещения изображения на итоговом виде ссылки

Для текущего примера мы разместим другое изображение:

Изображение 7:

Графу "Подпись" оставьте пустой (🔴1 - на изображении) и нажмите "Отправить" (🔴2 - на изображении).

Изображение 8

Бот предлагает Please send a GIF. Перевод: Пожалуйста, пришлите GIF.

В нашем случае, отправлять GIF не имеет смысла, так как отобразится всё равно только статичное изображение, которое мы отправили в бот ранее.

Для того, чтобы пройти этот шаг и перейти на следующий вам необходимо отправить боту команду:

/empty

На отправленную команду /empty BotFather отвечает:

No problem, you can always add a GIF later using the /editapp command. Now please send me the Web App URL that will be opened when users follow a web app direct link.

Перевод: Нет проблем, вы всегда можете добавить GIF позже с помощью команды /editapp. Теперь пришлите мне URL-адрес веб-приложения, который будет открываться, когда пользователи перейдут по прямой ссылке на веб-приложение.

Команда для копирования:

/editapp

↪ Вернуться в 📖 Cодержание публикации [ навигация ]

Для того, чтобы получить URL-адрес веб-приложения вам необходимо перейти в ваш проект на конструкторе мини-приложений Unitee Space и скопировать ссылку ⤵

Важно, чтобы внутри проекта переключатель был установлен на "Разработка" (🔴1 - на изображении), иначе у вас будет другой интерфейс "Администрирование" и вы не сможете найти в нём нужную вкладку.

Изображение 9:

В интерфейсе проекта выбираете вкладку "Боты" (🔴1 - на изображении), а после нажимаете на значок редактирования (🔴2 - на изображении).

Изображение 10:

Выбираете ссылку, которая так и называется "Ваш WebApp URL" и кликайте на значок копирования (🔴1 - на изображении).

Именно эту ссылку необходимо будет отправить в чат BotFather.

Изображение 11:

После того как вы отправите ссылку - получите ответ от бота:

Good! Now please choose a short name for your web app: 3-30 characters, a-zA-Z0-9_. This short name will be used in URLs like t.me/test9897678_bot/myapp and serve as a unique identifier for your web app.

Перевод: Отлично! Теперь выберите короткое имя для вашего веб-приложения: 3-30 символов, a-zA-Z0-9_. Это короткое имя будет использоваться в URL-адресах типа t.me/test9897678_bot/myapp и служить уникальным идентификатором для вашего веб-приложения.

Другими словами, BotFather предлагает написать и отправить ему короткое имя этой ссылки, которое будет использоваться, также BotFather указывает на определенные ограничения имени короткой ссылки:

1. короткое имя не должно быть меньше 3 символов и больше 30 символов.

2. можно использовать заглавные и прописные буквы латиницы и цифры от 0 до 9

Короткое имя - это t.me/test9897678_bot/myapp (та часть ссылки, которая выделена жирным шрифтом - myapp).

В нашем случае это будет TeSt989

Вместо неё подставьте то, что вам необходимо и на итоговом варианте это будет выглядеть ⤵

Итоговый вид ссылки (🔴4 - на изображении)

Изображение 12:

Отправив имя короткой ссылки - TeSt989, мы получили следующий ответ от бота:

You can now use TeSt989 as the short_name parameter value in Bot API. Your web app link is t.me/test9897678_bot/TeSt989. Open it to start developing your web app!

Перевод: Теперь вы можете использовать TeSt989 в качестве значения параметра short_name в Bot API. Ссылка на ваше веб-приложение - t.me/test9897678_bot/TeSt989. Откройте ее, чтобы начать разработку веб-приложения!

Выделяем полученную от ботфазера ссылку и копируем её в буфер обмена, чтобы установить её в соответствующее поле в проекте на платформе Unitee Space

Вставляем короткую ссылку в поле Telegram WebApp URL и нажимаем кнопку "Сохранить"

После чего появится всплывающее окно с надписью:

Для того, чтобы новые изменения применились сайт должен перезапуститься. Перезапустить сайт сейчас? Обычно это занимает около ~30 сек.

Нажимайте кнопку "Подтвердить"

Создание и подключение к мини-приложению короткой ссылки окончено.

🔴 ВНИМАНИЕ!!!

Во избежание возникновения ошибок, лучше подождать более длительное время. Например минут 5.

↪ Вернуться в 📖 Cодержание публикации [ навигация ]

Например, копируем ссылку и вставляем её в выбранное диалоговое окно чата и если не убирать предпросмотр ссылки, то отображение будет именно таким как этом изображении.

После отправки короткой ссылки контакту её вид будет таким как на этом изображении. Пользователю достаточно будет кликнуть на надпись "Запустить", чтобы он перешел в ваше мини-приложение и отобразился в системе.

При нажатии на "Запустить" появляется всплывающее окно (🔴1 - на изображении)

Это стандартное системное уведомление Телеграма, на которое мы не можем повлиять.

Если убрать белую галочку на синем фоне, то мини-приложение не сможет отправлять сообщения в чат пользователю (например, делать рассылки), при этом пользователь сможет пользоваться мини-приложением (🔴2 - на изображении).

Для того, чтобы начался запуск приложения нажмите OK (🔴3 - на изображении)