# Віджет social proof

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

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

#### **Як працює віджет**

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

#### **Ключові переваги**

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

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

## Як створити та налаштувати віджет

Щоб створити віджет, перейдіть на відповідну вкладку "Widgets".

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

Потім натисніть кнопку **"Create a widget".**

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

З’явиться випадне меню з віджетами, доступними для інтеграції на сайт; будь ласка, виберіть потрібний із списку:

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

Після цього ви будете перенаправлені на сторінку налаштувань віджета:

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

### Загальна інформація

#### Назва віджета

Вкажіть назву вашого віджета у полі налаштувань "Widget name":

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

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

#### домен

Це друге обов’язкове поле, у якому потрібно вказати домен вашого сайту:

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

Це може бути сайт, створений на MaviBot, на платформі Tilda або ваш власний сайт.

### Загальні налаштування контенту

Загальні налаштування контенту визначають, що буде показано у спливаючих сповіщеннях віджета на сайті.

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

{% hint style="info" %}
Будь ласка, зверніть увагу на заповнювачі, такі як \[name], \[city] та інші — ви будете використовувати їх під час створення повідомлень у віджеті на вкладці "Widget Options".
{% endhint %}

#### Заповнювач імені

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

Щоб переключити імена на чоловічі або жіночі, використовуйте відповідне поле:

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

Також ви можете вибирати імена залежно від географічного розташування:

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

Після цього добір імен буде налаштовано.

#### Заповнювач міста

Ви також можете вибирати імена залежно від географічного розташування:

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

#### **Заповнювач суми**

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

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

Щоб ввести точну суму, використовуйте порожнє поле праворуч:

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

Якщо ви оберете тип "sum from range", потрібно ввести мінімальне та максимальне значення в поля, щоб згенерувати випадкове число в цьому діапазоні:

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

За потреби ви також можете встановити кількість знаків після коми для округлення:

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

### Заповнювач власної змінної

Щоб вставити власні змінні у віджет, натисніть **"Add variable"** кнопку.

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

У модальному вікні, що відкриється, потрібно задати назву змінної, використовуючи квадратні дужки.

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

Далі введіть значення змінної, переконавшись, що кожне нове значення написане на **новому рядку** без ком і інших роздільників:

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

Після цього натисніть "Save", щоб зберегти значення в системі:

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

Далі ви побачите, що власну змінну збережено в загальних налаштуваннях контенту:

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

Щоб використати змінну пізніше, вставте її назву, взяту в квадратні дужки, у поле "Main Text" у розділі "Content":

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

### Умови активації віджета

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

#### Часовий інтервал

Ви можете налаштувати час показу віджета на сайті за допомогою функції "When to show the widget":

1. **Миттєво**\
   Це налаштування показуватиме віджет одразу, коли користувач відкриє сайт.
2. **Після затримки**

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

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

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

3. **Після прокручування**

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

Умова "Після прокрутки" означає, що віджети почнуть працювати на сайті після того, як ваш користувач прокрутить сторінку на встановлену кількість пікселів.

#### Часовий інтервал

Також є така умова активації:

1. Тривалість показу:
   * Встановіть значення в секундах.
   * Вона визначає, як довго віджет залишатиметься видимим перед тим, як сповіщення зникне.
2. Інтервал між затримками
   * Встановіть значення в секундах.
   * Він визначає затримку між показами віджета — після появи одного сповіщення наступне буде показано лише після того, як мине вказана кількість секунд.

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

#### Встановіть умову

&#x20;Давайте детальніше розглянемо доступні умови.

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

{% hint style="info" %}
Щоб дізнатися, що таке UTM-мітки і як їх використовувати, рекомендуємо прочитати статтю "[Як передати UTM-мітки](/doc/uk/faq/questions/...peredati-utm-mitki.md)."
{% endhint %}

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

Введіть назву потрібної мітки у відповідному полі:

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

Далі виберіть оператор, який відповідає тегу та значенню:

<div data-with-frame="true"><figure><img src="/files/873e325f6e9d5225e5e5b5df5baa7369b4de4215" 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/76a5706624dc89ee508385dfe98303e21a7adcf4" 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/fad54533067957108f743c61c5983fbafb6b7fee" alt=""><figcaption></figcaption></figure></div>

На цій вкладці ви можете налаштувати зовнішній вигляд і вміст віджета, який буде показано вашим користувачам.

### Вміст

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

Ви можете вводити статичний текст або динамічні змінні (наприклад, `[name]`, `[sum]`, `[city]`) у **Заголовок** та **Основний текст** у полях. Коли віджет активний, система автоматично замінить ці змінні на фактичні значення, налаштовані у параметрах вашого віджета.

#### Іконка

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

Іконка відображатиметься всередині спливаючого сповіщення:

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

### Зовнішній вигляд

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

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

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

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

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

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

#### Приховати кнопку закриття віджета

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

Цей прапорець приховає кнопку закриття (×) у куті віджета.

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

### Розташування віджета на сайті

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

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

Положення віджета розраховується від нижнього та правого країв екрана. Щоб перемістити його ближче до лівого краю, встановіть у **"Right margin"** полі **60%**.

## Як вставити віджет на сайт

Після того як ви налаштували всі параметри та адаптували вигляд віджета під свій унікальний дизайн, натисніть **"Додати віджет"** кнопку внизу екрана.

Вас буде перенаправлено до списку наявних віджетів, де потрібно натиснути **"Embed code on website"** кнопку:

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

Відкриється модальне вікно з кодом скрипта:

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

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

Потім вставте скрипт у HTML-код у розділі:

<div data-with-frame="true"><figure><img src="/files/facf20ddd0c1f36d4e2f2e244259940859d08a08" 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/uk/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.