# Social proof widget

The Social proof widget simulates orders or purchases of your product on the website, displaying them as pop-up notifications.

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

#### **How the widget works**

The widget operates on a simple psychological principle: when visitors see others making purchases, they become more inclined to buy as well.

#### **Key benefits**

Integrating this widget on your website provides several strategic advantages:

* **Drive impulse purchases:** instantly attract new customers by tapping into social proof and impulsive decision-making. People are naturally drawn to popular items and want to emulate others’ choices.
* **Build trust & loyalty:** showcase a high volume of real-time orders to build credibility. Customers are more likely to trust and remain loyal to businesses that demonstrate an active and satisfied user base.
* **Engage with targeted updates:** keep customers informed about important events and special promotions. You can fully customize how often the widget appears and who sees it based on specific audience criteria.

## How to create and set up the widget

To create a widget, go to the corresponding "Widgets" tab.

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

Then click the button **"Create a widget".**

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

A dropdown menu will appear displaying the widgets available for website integration; please select the one you need from the list:

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

You will then be directed to the widget settings page:

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

### General information

#### Widget name

Specify the name for your widget in the "Widget name" settings field:

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

{% hint style="info" %}
The widget name is a required field and will be displayed only in the "Widgets" section; it will not be visible to your clients.
{% endhint %}

#### Domain

This is the second required field, where you need to specify your website’s domain:

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

It can be a website built on MaviBot, created using the Tilda platform, or your own custom site.

### General content settings

General content settings determine what will be displayed in the widget’s pop-up notifications on the website.

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

{% hint style="info" %}
Please pay attention to placeholders such as \[name], \[city], and others — you will use them when creating messages within the widget under the "Widget Options" tab.
{% endhint %}

#### Name placeholder

Name placeholder fields allow you to display specifically male or female names on the website:

To switch names to male or female, use the corresponding field:

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

You can also select names based on geographic location:

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

Then the selection of names will be adjusted.

#### City placeholder

You can also choose names based on geographic location:

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

#### **Sum placeholder**

You can insert a sum into the widget’s text block, which can be either a fixed value or a randomly generated number within a specified range:

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

To enter an exact sun, use the empty field on the right:

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

If you select the "sum from range" type, you need to enter the minimum and maximum values in the fields to generate a random number within that range:

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

If needed, you can also set the number of decimal places for rounding:

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

### Custom variable placeholder

To insert your own custom variables into the widget, click the **"Add variable"** button.

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

You’ll need to define the variable name using square brackets in the modal window that opens.

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

Next, enter the variable values, making sure each new value is written on a **new line** without commas or other separators:

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

Next, click "Save" to store the values in the system:

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

Next, you will see that the custom variable has been saved in the general content settings:

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

To use the variable later, insert its name enclosed in square brackets into the "Main Text" field under the "Content" section:

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

### Widget trigger conditions

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

#### Time interval

You can set the widget’s display timing on the website by using the "When to show the widget" feature:

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

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

The widget will appear on the website after the specified number of seconds once the user has opened it.

The 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/SqXJeimeFpdxSRwVVFxQ" alt=""><figcaption></figcaption></figure></div>

Условие "После прокрутки" обозначает, что виджеты начнут работать на сайте после того, как ваш пользователь пролистнет расстояние в установленное количество пикселей.

#### Time interval

There is also the following triggering condition:

1. Display duration:
   * Set the value in seconds.
   * It determines how long the widget will remain visible before the notification disappears.
2. Interval between delays
   * Set the value in seconds.
   * It determines the delay between widget displays — after one notification appears, the next one will be shown only after the specified number of seconds has passed.

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

#### Set a condition

&#x20;Let’s take a closer look at the available conditions.

1. UTM parameters

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

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

Enter the name of the required tag in the designated field:

<div data-with-frame="true"><figure><img src="/files/JXkJAGc1JeXLxkQe18Pt" 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/qkDDmUGGc5ywYCpvWZ7A" alt=""><figcaption></figcaption></figure></div>

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

The main difference is that the "contains/does not contain" operator checks whether the UTM tag includes (or does not include) a certain value.<br>

In contrast, the "equals" operator requires an exact match, meaning the system looks for a UTM tag that exactly matches the specified value (and accordingly, "does not equal" works as the opposite).
{% endhint %}

Then enter the required value for the UTM tag:

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

2. Country

You can also choose the "Country" condition, which will display the widget based on the visitor’s IP country.

Select the desired country from the list, as well as the operator type ("is" or "is not"):

3. Device

If needed, apply the **"Device"** condition to show the widget depending on the visitor’s device type used to access the site:

The settings also include a feature to add multiple values for displaying the widget. Simply click "+ Add Value" and set one or more additional conditions as needed:

## Widget options

Once you’ve finished configuring the widget, go to the **"Widget options"** tab:

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

In this tab, you can set the appearance and content settings of the widget that will be displayed to your users.

### Content

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

You can enter the static text or dynamic variables (e.g., `[name]`, `[sum]`, `[city]`) in the **Title** and **Main text** fields. When the widget is active, the system will automatically replace these variables with the actual values configured in your widget settings.

#### Icon

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

The icon will be displayed inside the pop-up notification:

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

### Appearance

Appearance settings typically include options to select colors from a wide palette, adjust corner rounding, and configure shadow and transparency levels:

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

1. Color palette: choose colors for any widget element—from text to icon background. And you can also select gradients.
2. Text alignment can be set relative to the center, right, or left edge:

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

2. Notification corner settings: you can choose rounded, square, or fully circular corners for the message on the website:

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

#### Hide the widget close button

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

This checkbox will hide the close (×) button in the corner of the widget.

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

### Widget position on website

By default, notifications are set to appear in the bottom-right corner of the screen. If needed, you can change the widget's position on your website using the settings below.

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

The widget's position is calculated from the bottom and right edges of the screen. To move it toward the left edge, set the **"Right margin"** field to **60%**.

## How to embed the widget on website

Once you have configured all the settings and customized 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 existing widgets, where you need to click the **"Embed code on website"** button:

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

A modal window will open displaying the script code:

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

Copy the generated script, then go to the settings of the website for the domain you specified earlier in the widget configuration.

Then paste the script into the HTML code within the section:

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

{% hint style="info" %}
To embed the widget on a Tilda site, copy the widget script using the "Embedcode on website" button, then add it to your website’s page.
{% endhint %}

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


---

# 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/proof.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.