Web App button

There are 3 types of buttons to access your web application:

• button in the text;

• button in the keyboard;

• bot menu button.

Web App button in button tab

For the first two options, create a button and set its function to "Telegram Web App".

Step 1. In the Text field, enter the label for the button.

Step 2. Select the mini-app to open. This can be a bsite or a mini-app created in MaviBot.

Then, simply select a site from the list or specify an external site.

Step 3. Enter the URL for your website.

Step 4. Click "Add", and then save the block settings.

Step 5. Select the button type, then configure its specific settings.

The default button type is the keyboard button. While keyboard and inline buttons appear differently, their core function is identical.

Here are examples configured in the advanced settings:

Button in text: [{"line":0,"index_in_line":0,"text":"Web App","type":"inline","web_app":"here will be the link to your app"}]

Button in keyboard: [{"line":0,"index_in_line":0,"text":"Web-App","type":"web_app","web_app":"here will be the link to your app"}]

Example

As a result, you will get a button next to the message input field that will always be visible.

All three button types open the linked web application in a separate window.

Don’t forget that your web application needs to be configured in a specific way.

Please be aware that your web application requires specific configuration. You can find the official setup guidelines from Telegram developers here: Web Apps for bots.

The Web App can be linked to a site built in MaviBot, such as an online booking service or an e-commerce store.

1. How to set up online booking

2. How to create an online Store

Web App button in the Calculator

The third button type is created using a calculator function.

tg_set_chat_menu_button(type, text, web_app_url, platform_id), where:

• type — an optional parameter specifying one of the three button types ("default", "commands", "web_app"),

• text — an optional parameter; if type is not selected, this sets the text on the button,

• web_app_url — an optional parameter; the link to your web application (used only when type is "web_app"),

• platform_id — an optional parameter; specifies a particular user chat if, for some reason, you want to display the button only to a specific user.

Here is an example of creating a button to access a web application: tg_set_chat_menu_button('web_app', 'Web app', 'here will be the link to your app')

Result: