Social proof widget
The Social proof widget simulates orders or purchases of your product on the website, displaying them as pop-up notifications.
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.
Then click the button "Create a widget".
A dropdown menu will appear displaying the widgets available for website integration; please select the one you need from the list:
You will then be directed to the widget settings page:
General information
Widget name
Specify the name for your widget in the "Widget name" settings field:
The widget name is a required field and will be displayed only in the "Widgets" section; it will not be visible to your clients.
Domain
This is the second required field, where you need to specify your website’s domain:
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.
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.
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:
You can also select names based on geographic location:
Then the selection of names will be adjusted.
City placeholder
You can also choose names based on geographic location:
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:
To enter an exact sun, use the empty field on the right:
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:
If needed, you can also set the number of decimal places for rounding:
Custom variable placeholder
To insert your own custom variables into the widget, click the "Add variable" button.
You’ll need to define the variable name using square brackets in the modal window that opens.
Next, enter the variable values, making sure each new value is written on a new line without commas or other separators:
Next, click "Save" to store the values in the system:
Next, you will see that the custom variable has been saved in the general content settings:
To use the variable later, insert its name enclosed in square brackets into the "Main Text" field under the "Content" section:
Widget trigger conditions
Time interval
You can set the widget’s display timing on the website by using the "When to show the widget" feature:
Instantly This setting will display the widget immediately when the user opens the website.
After a delay
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.
After scrolling
Условие "После прокрутки" обозначает, что виджеты начнут работать на сайте после того, как ваш пользователь пролистнет расстояние в установленное количество пикселей.
Time interval
There is also the following triggering condition:
Display duration:
Set the value in seconds.
It determines how long the widget will remain visible before the notification disappears.
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.
Set a condition
Let’s take a closer look at the available conditions.
UTM parameters
To learn what UTM tags are and how to use them, we recommend reading the article "How to transfer UTM Tags."
Enter the name of the required tag in the designated field:
Next, select the operator that matches the tag to the value:
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.
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).
Then enter the required value for the UTM tag:
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"):
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:
In this tab, you can set the appearance and content settings of the widget that will be displayed to your users.
Content
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
The icon will be displayed inside the pop-up notification:
Appearance
Appearance settings typically include options to select colors from a wide palette, adjust corner rounding, and configure shadow and transparency levels:
Color palette: choose colors for any widget element—from text to icon background. And you can also select gradients.
Text alignment can be set relative to the center, right, or left edge:
Notification corner settings: you can choose rounded, square, or fully circular corners for the message on the website:
Hide the widget close button
This checkbox will hide the close (×) button in the corner of the widget.
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.
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:
A modal window will open displaying the script code:
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:
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.
Done! The widget setup and installation on your website are now complete!
Last updated