Online booking widget for website
The widget will help clients book your services through Telegram and on your website.
The widget can be integrated both into a website built with Seilbot and into a landing page created with other builders.
How to create a widget
To get started, go to the "Widgets" section, which you can find in the top menu:
If no widgets have been created in the project yet, you’ll see four buttons in the middle of the screen in the "Widgets" section:
Click the "Online Booking Widget" button, and you’ll be taken to the widget settings:
Basic information
In this tab, you need to enter the widget name (which will be displayed on the website) and the domain of the site where you want the online booking widget to appear (if the site is not built with MaviBot). If the site is built using the MaviBot builder, you don’t need to specify the domain. Next, select the branch whose services and staff will be shown in the widget:
Now you can move on to customizing the widget.
Appearance Settings
The logo and widget name will be displayed in its header:
Next, you can enter a title and subtitle in the widget, which will appear above the service or specialist selection buttons:
Widget Color Scheme
You can choose the widget’s color scheme according to your preference:
Widget background:
The widget’s main brand theme will display buttons, prices, and icons in the selected color scheme:
Text color: changes the color of the button text or main text depending on the selected option.
Button text:
By default, the buttons display the text "Select Services" and "Select Specialist," but you can customize the text as you like:
Now save your settings:
How to embed the widget on your website
Go to the website editing mode:
Next, find the "Online Booking" section in the list and add it:
In the content settings, choose which widget to display on the site (if you have multiple online booking widgets):
If needed, you can edit the background and display settings of the widget section. To do this, hover over the section and click the "Settings" button:
Set the desired background and display settings:
Save the site settings. Now your clients can book services around the clock simply by visiting your website:
How to embed the widget on another website
After saving the widget, refresh the page to see the following block with the widget script and a field to enter the section name:
If you need to embed the code on your website, copy the script and paste it into your landing page.
If you're using the widget on your own sites NOT built with MaviBot, be sure to enter the element class in the provided field:
Telegram Widget
Now that you know how to create a widget and embed it on your website, you can create a Web App button in Telegram that opens your site as an app within the messenger.
You need to use the function quiz_link(mini_landing_page_id, display_my_domain), but only the mini_landing_page_id parameter is required.
Next, create a block where, in the calculator, you assign a variable (in this example, the variable is called booker_link) that uses the function quiz_link(mini_landing_page_id), with the site page ID passed as the parameter:
Step 1. Creating the block with the function
Create a block in the builder and, in the calculator, define a variable with the function like this: booker_link = quiz_link('YOUR_SITE_ID')
Note!
Don’t forget to save the block settings.
Step 2. Find the required site page ID.
To find the site page ID, go to the corresponding section:
Click on the tile for the desired site to go to that site’s page settings:
Then, hover over the row with the page where you’ve created the "Online Booking" section:
Copy the ID and paste it into the block in the funnel builder:
Step 3. Add a button to the block in the builder.
Next, expand the "Buttons" settings tab (click on "Buttons") and click on "+ Add Button":
After clicking, the button settings for adding a new button will open:
Here you need to:
Set the button name: it can be any name you want.
Set the button function: it should be a Telegram Web App button.
Specify the link to open the site when the button is clicked:
The link is already stored in a variable using the calculator and the quiz_link function, so in the URL field, enter the assigned variable booker_link using interpolation — that is, include the variable within #{}, which contains the link to your site and widget.
Next, click the “Add” button to save the button settings and add it to the block. Be sure to click “Save” afterward to ensure the block settings are not lost.
The fully configured block looks like this:
Helpful tip!
It’s not necessary to create a conditional block (like a primary condition check or conversation start) specifically for the Web App button. You can create the button and add the quiz_link function in any block of your funnel—whether it’s a state block, non-state block, etc. (see the example "Dialogue State Block with Telegram Web App Button").
The Web App button with the online booking widget will then be available in the bot:
Booking Callback
After a client books an appointment, a callback notification about the booking will be sent in the dialogue, looking like this:
new_order_in_calendar - the unchangeable part of the callback
[489046159] - order_id booking ID
Appointment_date_and_time added
на 30 минут - service duration
Объекту: Тест 30 - which specific object the booking was added to
The appearance of the callback message:
new_order_in_calendar: [489046159] An appointment has been added from 2025-06-01 14:00 to 2025-06-01 14:30 for 30 minutes. Object: Test 30
You can set up a reaction to the callback by specifying its value in the block’s condition:
In the block, you can specify the desired response message to send to the client.
Last updated