# Online booking widget for website

The widget will help clients book your services through Telegram and on your website.

<div data-with-frame="true"><figure><img src="/files/oNjcHbUDdcCyGDCvHKrM" alt="" width="563"><figcaption></figcaption></figure></div>

The widget can be integrated both into a website built with MaviBot and into a landing page created with other builders.

## How to create a widget

{% hint style="info" %}
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."
{% endhint %}

To get started, go to the "Widgets" section, which you can find in the top menu.

<div data-with-frame="true"><figure><img src="/files/28MXIP0SXeefMd4WgGK3" alt="" width="563"><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/u1DvwisTGuf5dPDfXv8H" alt=""><figcaption></figcaption></figure></div>

Click the "Online Booking Widget" button, and you’ll be taken to the widget settings.

<div data-with-frame="true"><figure><img src="/files/NvFXJHDHJI8TSWpMhlum" alt=""><figcaption></figcaption></figure></div>

### 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).&#x20;

<figure><img src="/files/IGN39O4q3JEgSQRsyopX" alt="" width="563"><figcaption></figcaption></figure>

If the site is built using the MaviBot builder, open the “Sites” tab and copy your MaviBot site link.

<div data-with-frame="true"><figure><img src="/files/HZcYoUnfTT3IladJQaqR" alt="" width="563"><figcaption></figcaption></figure></div>

&#x20;Next, select the branch whose services and staff will be shown in the widget.

<div data-with-frame="true"><figure><img src="/files/HFn1HWsqtyxmgUZy7r0S" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/Ep0ELxgYqK89SPeEAdNv" alt="" width="563"><figcaption></figcaption></figure></div>

Now you can move on to customizing the widget.

### Analytics

You can also set up analytics events.

<div data-with-frame="true"><figure><img src="/files/CkOFq0MieuzU8Qwwvdqx" alt=""><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/VnZ5AytBIH8KT4hDjpZp" alt="" width="325"><figcaption><p>For example, how to enter the data</p></figcaption></figure></div>

### Appearance Settings

<div data-with-frame="true"><figure><img src="/files/wtRLUlfUDd25XMCGpGwR" alt=""><figcaption></figcaption></figure></div>

The logo and widget name will be displayed in its header.

<div data-with-frame="true"><figure><img src="/files/FfNoeQGnKAUD7DAHFLxN" alt="" width="375"><figcaption></figcaption></figure></div>

Next, you can enter a title and subtitle in the widget, which will appear above the service or specialist selection buttons.

<div data-with-frame="true"><figure><img src="/files/sHlzOv0gFJahTwMKOVMC" alt="" width="375"><figcaption></figcaption></figure></div>

**Widget Color Scheme**

You can choose the widget’s color scheme according to your preference:

1. Widget background:.
2. The widget’s main brand theme will display buttons, prices, and icons in the selected color scheme.
3. Text color: changes the color of the button text or main text depending on the selected option.
4. Button text.

<div data-with-frame="true"><figure><img src="/files/nLRUGZdI5tlYapXJmEYg" alt=""><figcaption></figcaption></figure></div>

By default, the buttons display the text **"Select Services"** and **"Select Specialist**," but you can customize the text as you like:

### How to embed the widget on your website

Go to the website editing mode.

<div data-with-frame="true"><figure><img src="/files/Lc0IFKMNjWIbdrBb6mSo" alt=""><figcaption></figcaption></figure></div>

Next, find the **"Online Booking"** section in the list and add it.

<div data-with-frame="true"><figure><img src="/files/sDeV8fGBu3saJkBvdllm" alt=""><figcaption></figcaption></figure></div>

In the content settings, choose which widget to display on the site (if you have multiple online booking widgets).

<div data-with-frame="true"><figure><img src="/files/aSqfF5Kxs7og76Imvq53" alt=""><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/BlAz2dynDoRv7oFgV7iZ" alt="" width="375"><figcaption></figcaption></figure></div>

Set the desired background and display settings.

<div data-with-frame="true"><figure><img src="/files/0AiTB0AKIh1PaP87X764" alt="" width="375"><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/GXE84weizDAlMFFH7UBp" alt="" width="563"><figcaption></figcaption></figure></div>

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.

<div data-with-frame="true"><figure><img src="/files/uwC4f2luHcOUQuTiuNrC" alt="" width="563"><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/booking/widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.