# Callback widget

In this section, you will learn how to configure and install the callback widget on your website. This feedback widget allows visitors to easily get in touch with your company and ask questions, helping you:

* Improve customer interaction,
* Provide prompt support,
* Collect valuable feedback and suggestions to enhance user satisfaction.

## Settings

{% hint style="warning" %}

## Please note

Ensure a [telephony integration](/integrations/other.md) is enabled before setting up the feedback widget. This is required for installation. 
{% endhint %}

### Main information

#### **Main information settings**

This section contains two required fields to set up your widget.

1. **Name**\
   Enter a name for the widget, which will be displayed on your website. This field is required.
2. **Domain Where the Widget Will Be Used**\
   Enter the domain of the website where the widget will be embedded. This field is also required. You can specify a website built on:
   * **MaviBot**
   * **Tilda**
   * Your own **custom website**

**Advanced settings**\
Within the main information section, you can also enable **callback notifications** in the advanced settings.

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

{% hint style="info" %}
The feedback widget callbacks do not match the callbacks from the connected telephony.
{% endhint %}

You can configure the chatbot’s response to the received callbacks later.

You can also choose to show or hide the "We use MaviBot" logo using this checkbox.

### Trigger conditions

<div data-with-frame="true"><figure><img src="/files/1NIkM8gSANzx4MuprORm" alt="" width="521"><figcaption></figcaption></figure></div>

#### Time interval

You can set the timing for the widget to appear on the website. To do this, use the “When to show the widget” feature.

1. **Instantly**\
   This setting will display the widget as soon as the user opens the website.
2. **After a delay**

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

The widget will appear a specified number of seconds after the user opens the website.

A time interval is set in seconds, with a minimum value of 1 second and a maximum of 15 seconds.

3. **After scrolling**

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

The **"After scrolling" condition** means that as soon as the user scrolls the website — whether they scroll to the very end or just a small part — the widget will appear on the website after the specified number of seconds.&#x20;

The minimum time interval value is 1 second; the maximum is 15 seconds.

### Display conditions on the website

You can set the widget to display with or without specific conditions. Let’s exlore the available conditions.

1. UTM parameters

{% hint style="info" %}
To learn about UTM parameters and how to use them, we recommend reading the article, **"**[**How to transfer UTM Parameters**](/faq/questions/...transfer-utm-labels.md)**."**
{% endhint %}

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

Enter the name of the required parameter in the corresponding field.

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

Next, select the operator that matches the tag to the value:

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

{% hint style="info" %}
What’s the difference between "contains/does not contain" and "equals/does not equal"?

The main difference is that **"contains/does not contain"** checks whether the UTM parameter includes (or does not include) a specific value anywhere within it.

\
In contrast, the **"equals"** operator requires an exact match, meaning the system looks for a strict equality of the UTM parameter value (and accordingly, "does not equal" is the opposite).
{% endhint %}

Then enter the required value for the UTM parameter:

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

2. Country

You can also select the "Country" condition, which displays the widget based on the user's IP country.
\
Choose the required country from the list, as well as the operator type ("is" or "is not").

3. **User's device**

If needed, set the "Device" condition to display the widget based on the user's device type.

The settings also include a feature for adding multiple values to control the widget’s display. To do this, simply click **"+ Add value"** and set one or more additional conditions.

### Telephony

<figure><img src="/files/KHMGG6AaMf9uNQforltb" alt=""><figcaption></figcaption></figure>

## Work schedule

<figure><img src="/files/KyQAT66VDq9IqDCJflng" alt=""><figcaption></figcaption></figure>

The work schedule plays a key role for the checkboxes **"Disable widget outside business hours"** and **"Disable auto-callbacks outside business hours**"

<figure><img src="/files/Wjtazw6VdgOZl47xK7aS" alt=""><figcaption></figcaption></figure>

When these checkboxes are enabled, the widget will be inactive and/or the auto callback feature will not work outside your staff's working hours.

\
This is very convenient because your clients won’t be left wondering why they requested a callback but didn’t receive one.

The **"Enable scheduled callbacks at a convenient time"** checkbox also uses the work schedule: it allows the system to offer the client the nearest available time for a call according to the established working hours.

<figure><img src="/files/q5zT5bEwUoPM2GWKyZNz" alt=""><figcaption></figcaption></figure>

To configure the business hours, simply use the following settings:

<figure><img src="/files/HnSEJusS2WkZSvCoKDvs" alt=""><figcaption></figcaption></figure>

You can configure each weekday individually by toggling the switch to the off position.

<figure><img src="/files/vsoYSOLbv42ttjqQcmEJ" alt=""><figcaption></figcaption></figure>

## Appearance

<figure><img src="/files/u9sIqEZegslzI12uhC39" alt=""><figcaption></figcaption></figure>

Appearance settings can be divided into button and widget settings.

### Button settings

1. Button size: you can choose from large, medium, and small widget button sizes.

<figure><img src="/files/UrwDm5HE265nTfG2Aci3" alt=""><figcaption></figcaption></figure>

2. Button text

<figure><img src="/files/wGbJKaKLNGe1XEpZlyYs" alt=""><figcaption></figcaption></figure>

You can replace the phone icon with any desired text.

<div><figure><img src="/files/RMGjYN7n8X5hWbHv5nhT" alt="" width="135"><figcaption></figcaption></figure> <figure><img src="/files/h4E29WOrrpKSktj8U4F0" alt=""><figcaption></figcaption></figure></div>

3. Button color: use the extensive color palette to choose the color that best suits your needs.

<div><figure><img src="/files/sW8zfvKp6XCtZcrPsRYR" alt=""><figcaption></figcaption></figure> <figure><img src="/files/zM2r86yhXG8jrwjrcnyy" alt=""><figcaption></figcaption></figure></div>

4. Button text color: if you fill in the empty field for the text displayed on the widget icon, you will be able to change the text color scheme.

<figure><img src="/files/J7dqoKfWVrhaiTjvHOZF" alt=""><figcaption></figcaption></figure>

5. Button animation helps enhance your website’s appearance and make it more lively.

<figure><img src="/files/rxP8lfpuOyjYq264wkyW" alt=""><figcaption></figcaption></figure>

How each button animation looks:

<div><figure><img src="/files/6iq7hyuRiN8R3dxdsthE" alt="" width="188"><figcaption><p>Pulse</p></figcaption></figure> <figure><img src="/files/fh286wzV4dEoTylQuVww" alt="" width="188"><figcaption><p>Shake</p></figcaption></figure> <figure><img src="/files/7aazFsKyByEvTTZBN3sU" alt="" width="188"><figcaption><p>Ripple</p></figcaption></figure></div>

### Widget settings

Once you’ve configured the button’s appearance settings, let’s move on to the content and the appearance of the widget itself.

<figure><img src="/files/TFMIBV6IlEDCkgVDLQee" alt=""><figcaption></figcaption></figure>

You can fill in the text fields inside the widget:

1. Title

<figure><img src="/files/TqbW33CkDYr900BLTPlK" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dR9Dletu65SMCRJ93xgY" alt=""><figcaption></figcaption></figure>

2. Subtitle

<figure><img src="/files/ZPBAOmFIEvHGcJ0Ttr4h" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/15gzVnZhu7MSbVLtjv79" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This field is required.
{% endhint %}

3. Widget text displayed after the timer starts

<figure><img src="/files/7T4aukBCLQeZEYhiegP8" alt=""><figcaption></figcaption></figure>

The text will appear in the widget only after the client clicks the "Call me back" button (or any other button text) during the timer countdown.

You set the widget timer using this setting:

<figure><img src="/files/QvxViZgQolRwEWSzLLNj" alt=""><figcaption></figcaption></figure>

4. Button text

<figure><img src="/files/h0oMhBufMMc5Gz5iMOXF" alt=""><figcaption></figcaption></figure>

You can align the text inside the widget to the center, left, or right using these buttons, just like in any text editor.

<figure><img src="/files/dKIORmrxHQJC22p0Xj0H" alt=""><figcaption></figcaption></figure>

Using the extensive color palette, you can adjust the tone or gradient for the background, button colors, and even set a pattern.

<figure><img src="/files/WkxeCu3nsytsuWQym65P" alt=""><figcaption></figcaption></figure>

## How to embbed a widget on your site

After configuring all the settings and customizing the widget’s appearance to your unique design, click the **"Add widget"** button at the bottom of the screen.

You will be taken to the list of ready widgets, where you need to click the **"Embed code on site"** button.

<figure><img src="/files/w0uP3cNjxgF6LUYxpfd5" alt=""><figcaption></figcaption></figure>

After that, a modal window with the script will open.

<figure><img src="/files/0G2zq6GO6sMPCNbbU1s0" alt=""><figcaption></figcaption></figure>

Copy the script and go to the settings of the website where you entered the domain in the widget settings.

Then, insert the code into the **HTML head** section.

{% hint style="info" %}
To embed the widget on a Tilda website, also copy the widget script using the “Embed code on website” button, then install it on the site.
{% endhint %}

Done! The widget setup and installation on the website are now complete!

## Callbacks

**Available callbacks:**

1. widget\_callback\_later widget\_id: 1 at 23.04.2024 18:00 - a delayed callback, where <mark style="color:green;">**widget\_callback\_later**</mark>  is the callback type; <mark style="color:yellow;">**widget\_id: 1 at 23.04.2024 18:00**</mark> - indicates the widget ID along with the date and time when the call should be made to the client.
2. widget\_callback\_need\_call widget\_id: 1 at 23.04.2024 18:00 - indicates that the client needs a call, where\ <mark style="color:green;">**widget\_callback\_need\_call**</mark>  is the callback type; <mark style="color:yellow;">**widget\_id: 1 at 23.04.2024 18:00**</mark> - shows the widget ID and the scheduled date and time for the call.
3. widget\_callback\_now widget\_id: 1 - callback signaling an immediate need to call the client, where<mark style="color:green;">**widget\_callback\_now**</mark>  is the callback type;  <mark style="color:yellow;">**widget\_id: 1**</mark>   is the widget ID;
4. widget\_callback\_need\_call - callback indicating a call is needed. This callback is sent if the corresponding setting is enabled.
5. widget\_callback\_now - callback indicating current call.


---

# 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/websites/widgets/callback-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.