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 MaviBot and into a landing page created with other builders.

First, you need to create a branch and set up services by assigning them to employees. We explained how to do this in the article "Booking Service Settings."

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.

Main 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, open the “Sites” tab and copy your MaviBot site link.

Next, select the branch whose services and staff will be shown in the widget.

You can also add a privacy policy link and a data‑consent link.

Now you can move on to customizing the widget.

Analytics

You can also set up analytics events.

To do this, enter the Facebook Pixel, Google Analytics, or Metrica ID in the corresponding field and specify the event value.

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:

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 "Advanced setting" tab.