> For the complete documentation index, see [llms.txt](https://vitrina-blogerov.gitbook.io/bloggers-showcase/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vitrina-blogerov.gitbook.io/bloggers-showcase/product-docs/product-docs-en/applications/example-telegram-bot-design.md).

# Example Telegram bot design

You can view the demo version’s design:

<p align="center"><a href="https://t.me/showcase_demo_ru_bot" class="button primary">Go to DEMO</a></p>

{% hint style="info" %}
Detailed recommendations are described in the section "Design recommendations. Telegram bot".
{% endhint %}

Most of the design is implemented using Telegram’s native features and is configured through BotFather. Separate elements related to the storefront itself are created automatically when the bot is connected or managed through the admin panel.

All photos, videos, covers, and utility images in the demo version are prepared in the same dark blue color scheme as the storefront interface. Because of this, the bot is perceived not as a separate technical intermediary, but as a full-fledged part of the product.

{% hint style="info" %}
The welcome block What can this bot do?, configured through BotFather, and the message the bot sends after launch are different elements. Both are designed in the demo version.
{% endhint %}

### Bot profile

An отдельный avatar has been prepared for the demo version in the storefront’s color scheme. It is used in the profile, chat list, and notifications, so the bot remains recognizable even outside the mini app.

The main bot details are also filled in through BotFather:

* name;
* short profile info — About;
* description of capabilities — Description;
* media for the welcome block;
* localized texts for the selected language version.

The About field is displayed in the profile and briefly explains the bot’s purpose. Description is shown to new users in the What can this bot do? block before the conversation begins.

The texts in the demo version are not overloaded with technical details. They briefly explain the product’s purpose and direct the user to explore the storefront’s features.

### Telegram welcome block

Before launching the bot, the user sees the designed Telegram block What can this bot do?. In the BotFather interface, its settings are combined in the Welcome message section.

<div data-with-frame="true"><figure><img src="https://162603775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuwCSpQuu1p5soxSClCET%2Fuploads%2FwXVhROHJl2iI2dDSivX8%2F%D0%B0%D0%B2%D0%B0%D1%82%D0%B0%D1%80%D0%BA%D0%B0%20%D0%B8%20%D1%87%D1%82%D0%BE%20%D1%83%D0%BC%D0%B5%D0%B5%D1%82%20%D1%8D%D1%82%D0%BE%D1%82%20%D0%B1%D0%BE%D1%82.png?alt=media&amp;token=b92aca06-2d53-4486-88b1-be5737475b5e" alt=""><figcaption></figcaption></figure></div>

In the demo version, this block contains:

* brand image;
* short title;
* description of the bot’s purpose;
* a call to explore the user-facing part of the storefront.

The image is designed in the same color scheme as the blogger cards, the mini app background, and the other materials. Thanks to this, the brand style appears even before the user sends the first message.

This block is a native part of the Telegram profile. It is configured through BotFather and does not depend on the welcome message sent by the bot itself.

### Bot welcome message

After launch, the bot sends its own welcome message. Its text and media file are configured through the storefront’s admin panel.

{% file src="/files/e475f7912402d6e3312431a4905870cd83e2d072" %}

You can attach a photo or video to the message. In the demo version, a small animated poster with a card and text is used. It continues the visual style of the profile and mini app, but is already part of the regular conversation with the bot.

The administrator can replace the welcome text or media without changing the source code or reconfiguring the bot through BotFather. This makes it possible to use the welcome message to present the agency, explain the purpose of the storefront, or display a current offer.

### Mini app button in chat

When a new bot is installed or replaced through the admin panel, the system automatically creates a button to launch the mini app next to the message input field.

<div data-with-frame="true"><figure><img src="https://162603775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuwCSpQuu1p5soxSClCET%2Fuploads%2FONBXlsCSuXMUSzuiBu2Y%2F%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0%20%D0%BC%D0%B8%D0%BD%D0%B8-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BD%D0%B0%20%D1%87%D0%B0%D1%82%D0%B5%20%D0%B1%D0%BE%D1%82%D0%B0%20%D0%B8%20%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8.png?alt=media&amp;token=aca1ca96-281f-4a68-9ed0-74afee121408" alt=""><figcaption></figcaption></figure></div>

The text and address of the corresponding storefront version are set automatically for it. After tapping, the mini app opens directly inside Telegram.

{% hint style="success" %}
The menu button is created automatically by the system when the bot is connected. It does not need to be configured manually through BotFather.
{% endhint %}

Such a button remains available in the chat at all times. The user does not have to look for an old message with a link or resend the launch command.

### Main mini app

This is a separate native Telegram integration. It adds the ability to open the storefront directly from the bot profile and use direct links to the mini app.

In the demo version, the following are specified:

* storefront address;
* full-screen launch mode;
* direct link parameters;
* brand preview;
* custom loading screen.

Full-screen mode lets you use the entire available Telegram area. After opening, the user is immediately taken to the blogger catalog without intermediate pages or switching to an external browser.

The button in the profile and the menu button near the input field should not be confused. The first is part of the main mini app settings in BotFather. The second is created by the system through the Telegram Bot API and provides constant access to the storefront directly from the chat.

### Direct link preview

Separate metadata has been configured through BotFather for the direct link to the mini app:

* cover;
* name;
* short description;
* mini app address.

<div data-with-frame="true"><figure><img src="https://162603775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuwCSpQuu1p5soxSClCET%2Fuploads%2FKGlrQuEQA1IwDSwzTQo4%2F%D0%BF%D1%80%D0%B5%D0%B2%D1%8C%D1%8E%20%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8%20%D0%BC%D0%B8%D0%BD%D0%B8-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F.png?alt=media&amp;token=1acc10f6-4194-4d42-90fd-637844fa7256" alt=""><figcaption></figcaption></figure></div>

When the link is sent in Telegram, the user sees not a plain URL, but a designed preview. In the demo version, it uses an image from the same series as the avatar, welcome block, and other materials.

The title says that the link opens the demo storefront, and the description briefly explains its purpose. Such a preview makes the link recognizable and immediately shows the user where it leads.

### Mini app loading screen

While the storefront interface is loading, Telegram shows the native launch screen — Launch Screen, also called Splash Screen.

<div data-with-frame="true"><figure><img src="https://162603775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuwCSpQuu1p5soxSClCET%2Fuploads%2FvbCjYPqTtD7q1hh85wYK%2F%D1%86%D0%B2%D0%B5%D1%82%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8%20%D0%B8%20%D0%BB%D0%BE%D0%B3%D0%BE%D1%82%D0%B8%D0%BF%20%D0%BD%D0%B0%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B5%20%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B8.png?alt=media&amp;token=7b500eb7-f29a-4f98-a23e-1eca57624f79" alt=""><figcaption></figcaption></figure></div>

In the demo version, the following are configured for it:

* brand icon;
* background color;
* top area color;
* display settings for the Telegram theme.

The loading screen colors match the storefront’s main palette. Because of this, there is no abrupt change in design between tapping the button and the interface appearing. The user sees one continuous transition: the bot profile, launch, loading screen, and catalog are perceived as parts of one application.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://vitrina-blogerov.gitbook.io/bloggers-showcase/product-docs/product-docs-en/applications/example-telegram-bot-design.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.