# Виджет социального доказательства

Виджет Social proof имитирует заказы или покупки вашего продукта на сайте, отображая их в виде всплывающих уведомлений.

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

#### **Как работает виджет**

Виджет работает на простом психологическом принципе: когда посетители видят, что другие совершают покупки, они и сами становятся более склонны купить.

#### **Ключевые преимущества**

Интеграция этого виджета на ваш сайт дает несколько стратегических преимуществ:

* **Стимулируйте импульсные покупки:** мгновенно привлекайте новых клиентов, используя социальное доказательство и импульсивное принятие решений. Людей естественным образом привлекают популярные товары, и они хотят повторять выбор других.
* **Формируйте доверие и лояльность:** демонстрируйте большой объем заказов в реальном времени, чтобы повысить доверие. Клиенты с большей вероятностью будут доверять и оставаться лояльными к компаниям, которые показывают активную и довольную аудиторию.
* **Взаимодействуйте через целевые обновления:** держите клиентов в курсе важных событий и специальных акций. Вы можете полностью настроить, как часто появляется виджет и кто его видит, на основе конкретных критериев аудитории.

## Как создать и настроить виджет

Чтобы создать виджет, перейдите на соответствующую вкладку "Widgets".

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

Затем нажмите кнопку **"Create a widget".**

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

Появится выпадающее меню с виджетами, доступными для интеграции на сайт; выберите из списка нужный вам вариант:

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

После этого вы будете перенаправлены на страницу настроек виджета:

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

### Общая информация

#### Название виджета

Укажите название вашего виджета в поле настроек "Widget name":

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

{% hint style="info" %}
Название виджета является обязательным полем и будет отображаться только в разделе "Widgets"; клиентам оно видно не будет.
{% endhint %}

#### домен

Это второе обязательное поле, где нужно указать домен вашего сайта:

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

Это может быть сайт, созданный на MaviBot, на платформе Tilda или ваш собственный сайт с индивидуальной разработкой.

### Общие настройки контента

Общие настройки контента определяют, что будет отображаться во всплывающих уведомлениях виджета на сайте.

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

{% hint style="info" %}
Обратите внимание на плейсхолдеры, такие как \[name], \[city] и другие — вы будете использовать их при создании сообщений в виджете во вкладке "Widget Options".
{% endhint %}

#### Плейсхолдер имени

Поля плейсхолдера имени позволяют отображать на сайте имена только мужчин или только женщин:

Чтобы переключать имена на мужские или женские, используйте соответствующее поле:

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

Вы также можете выбрать имена в зависимости от географического расположения:

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

Тогда подбор имен будет скорректирован.

#### Плейсхолдер города

Вы также можете выбрать имена в зависимости от географического расположения:

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

#### **Плейсхолдер суммы**

Вы можете вставить сумму в текстовый блок виджета — это может быть как фиксированное значение, так и случайно сгенерированное число в заданном диапазоне:

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

Чтобы ввести точную сумму, используйте пустое поле справа:

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

Если вы выберете тип "sum from range", вам нужно указать минимальное и максимальное значения в полях, чтобы сгенерировать случайное число в этом диапазоне:

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

При необходимости вы также можете задать количество знаков после запятой для округления:

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

### Плейсхолдер пользовательской переменной

Чтобы вставить в виджет свои собственные пользовательские переменные, нажмите **"Add variable"** .

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

В открывшемся модальном окне вам нужно задать имя переменной, используя квадратные скобки.

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

Далее введите значения переменной, убедившись, что каждое новое значение записано в **новую строку** без запятых и других разделителей:

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

Затем нажмите "Save", чтобы сохранить значения в системе:

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

После этого вы увидите, что пользовательская переменная сохранена в общих настройках контента:

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

Чтобы использовать переменную позже, вставьте ее имя в квадратных скобках в поле "Main Text" в разделе "Content":

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

### Условия запуска виджета

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

#### Временной интервал

Вы можете задать время показа виджета на сайте, используя функцию "When to show the widget":

1. **Сразу**\
   Эта настройка покажет виджет сразу, как только пользователь откроет сайт.
2. **После задержки**

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

Виджет появится на сайте спустя указанное количество секунд после того, как пользователь откроет его.

Временной интервал задается в секундах, минимальное значение — 1 секунда, максимальное — 15 секунд.

3. **После прокрутки**

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

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

#### Временной интервал

Также есть следующее условие запуска:

1. Длительность показа:
   * Укажите значение в секундах.
   * Оно определяет, как долго виджет будет оставаться видимым до исчезновения уведомления.
2. Интервал между задержками
   * Укажите значение в секундах.
   * Он определяет задержку между показами виджета — после появления одного уведомления следующее будет показано только после того, как пройдет указанное количество секунд.

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

#### Задать условие

&#x20;Давайте подробнее рассмотрим доступные условия.

1. UTM-параметры

{% hint style="info" %}
Чтобы узнать, что такое UTM-метки и как их использовать, рекомендуем прочитать статью "[Как передать UTM-метки](/doc/ru/faq/questions/...peredat-utm-metki.md)."
{% endhint %}

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

Введите название нужной метки в соответствующее поле:

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

Затем выберите оператор, который соответствует тегу и значению:

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

{% hint style="info" %}
В чем разница между contains/does not contain и equals/does not equal?

Основное отличие в том, что оператор "contains/does not contain" проверяет, содержит ли UTM-метка определенное значение (или не содержит его).<br>

В отличие от него, оператор "equals" требует точного совпадения, то есть система ищет UTM-метку, которая полностью совпадает с заданным значением (и соответственно, "does not equal" работает наоборот).
{% endhint %}

Затем введите нужное значение для UTM-метки:

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

2. Страна

Вы также можете выбрать условие "Country", которое будет показывать виджет в зависимости от страны посетителя по IP.

Выберите нужную страну из списка, а также тип оператора ("is" или "is not"):

3. Устройство

При необходимости примените **"Device"** условие, чтобы показывать виджет в зависимости от типа устройства посетителя, с которого он заходит на сайт:

В настройках также есть возможность добавить несколько значений для отображения виджета. Просто нажмите "+ Add Value" и при необходимости задайте одно или несколько дополнительных условий:

## Параметры виджета

После того как вы завершите настройку виджета, перейдите во вкладку **"Widget options"** :

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

В этой вкладке вы можете настроить внешний вид и параметры контента виджета, который будет отображаться пользователям.

### Контент

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

Вы можете ввести статический текст или динамические переменные (например, `[name]`, `[sum]`, `[city]`) в **Заголовок** и **Main text** поля. Когда виджет активен, система автоматически заменит эти переменные на фактические значения, заданные в настройках виджета.

#### Иконка

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

Иконка будет отображаться внутри всплывающего уведомления:

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

### Внешний вид

Настройки внешнего вида обычно включают возможность выбирать цвета из широкой палитры, настраивать скругление углов и задавать уровень тени и прозрачности:

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

1. Палитра цветов: выберите цвета для любого элемента виджета — от текста до фона иконки. Также можно выбрать градиенты.
2. Выравнивание текста можно настроить по центру, по правому или левому краю:

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

2. Настройки углов уведомления: вы можете выбрать скругленные, квадратные или полностью круглые углы для сообщения на сайте:

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

#### Скрыть кнопку закрытия виджета

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

Этот флажок скроет кнопку закрытия (×) в углу виджета.

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

### Положение виджета на сайте

По умолчанию уведомления отображаются в правом нижнем углу экрана. При необходимости вы можете изменить положение виджета на вашем сайте с помощью настроек ниже.

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

Положение виджета рассчитывается от нижнего и правого краев экрана. Чтобы сместить его в сторону левого края, установите в поле **"Right margin"** значение **60%**.

## Как встроить виджет на сайт

После того как вы настроите все параметры и адаптируете внешний вид виджета под ваш уникальный дизайн, нажмите **«Добавить виджет»** в нижней части экрана.

Вы будете перенаправлены к списку существующих виджетов, где вам нужно нажать **"Embed code on website"** :

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

Откроется модальное окно с кодом скрипта:

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

Скопируйте сгенерированный скрипт, затем перейдите в настройки сайта для домена, который вы указали ранее в конфигурации виджета.

Затем вставьте скрипт в HTML-код в разделе:

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

{% hint style="info" %}
Чтобы встроить виджет на сайт Tilda, скопируйте скрипт виджета с помощью кнопки "Embedcode on website", затем добавьте его на страницу вашего сайта.
{% endhint %}

Готово! Настройка и установка виджета на вашем сайте завершены!


---

# 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/doc/ru/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.