# Виджет "Стадный инстинкт"

Виджет "Стадного инстинкта" имитирует заказы/покупки вашего товара на сайте, отображаясь всплывающими окнами: 

<figure><img src="/files/LqyEKUBMncZNKigyCt1G" alt="" width="563"><figcaption></figcaption></figure>

Виджет работает по принципу "клиент **заметил**, что другие пользователи покупают, тоже **захотел** и **купил**".&#x20;

Основные плюсы использования такого виджета на сайте:

1. Мгновенно привлекает новых клиентов за счет импульсивных решений – многим людям нравится и хочется подражать другим.
2. Увеличивает доверие и преданность клиентов за счет множества заказов на Вашем сайте -  клиенты охотнее доверяют магазинам/сервисам, у которых уже есть достаточная аудитория клиентов.
3. Информирует клиентов о значимых событиях и предложениях: вы можете настроить частоту и аудиторию показа виджета по разным параметрам.

## Создание и настройка виджета

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

<figure><img src="/files/vXuOWwMyBqNokIT98gDT" alt="" width="420"><figcaption></figcaption></figure>

Далее кликните по кнопке "Создать виджет":

<figure><img src="/files/vVdBKyzuHDkvy1D4tcQW" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/vJK1ph0z2aMPLLU4XZkz" alt="" width="384"><figcaption></figcaption></figure>

После чего вы перейдете в настройки виджета:

<figure><img src="/files/89VGlVQyUJbr6ByKqJ6R" alt="" width="563"><figcaption></figcaption></figure>

### Основная информация

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

В настройках поля "Название виджета" пропишите наименование для вашего виджета:

<figure><img src="/files/630ICtQ1A1YZp6tds1fD" alt="" width="563"><figcaption></figcaption></figure>

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

#### Домен

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

<figure><img src="/files/d60RNnTPVhMIuztOgSYm" alt="" width="563"><figcaption></figcaption></figure>

Это может быть как сайт, спроектированный на Salebot, так и на сервисе Тильда, а также на свой собственный.&#x20;

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

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

<figure><img src="/files/44wJpxPQcSgn2e0A1m2i" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Обратите внимание на конструкцию \[name], \[city] и пр.: они понадобятся для написания сообщения внутри виджета во вкладке "[Варианты виджета](#varianty-vidzheta)".&#x20;
{% endhint %}

#### Подстановка имени

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

<div><figure><img src="/files/whMa9Ot43Ju7uaV4OMZi" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="/files/A7lvJO4W1I9U3nkf7Lec" alt="" width="563"><figcaption></figcaption></figure></div>

Для изменения имен на мужские или женские воспользуйтесь соответствующим полем:

<figure><img src="/files/NHP3Tjn5jt4ONE1gK26T" alt="" width="563"><figcaption></figcaption></figure>

Также можно подобрать имена по территориальному расположению:

<figure><img src="/files/Y4aFploAGpCmfhF6yRUZ" alt="" width="563"><figcaption></figcaption></figure>

Тогда выборка имен будет изменена:

<figure><img src="/files/uNYT96iFdtvwNqozFg0L" alt="" width="375"><figcaption></figcaption></figure>

#### Подстановка города

Для своего сайта вы можете выбрать также и страну, города которой будут отображены в виджете:

<figure><img src="/files/RzFWMSo6obg2lvRQTr3T" alt="" width="563"><figcaption></figcaption></figure>

Примеры:

1. Выбор "Россия":

<figure><img src="/files/dHSrXQJiyZowFDjHXfEj" alt="" width="375"><figcaption></figcaption></figure>

2. Выбор "Беларусь":

<figure><img src="/files/eAcvTnpGwK9K6mZ8dwzU" alt="" width="375"><figcaption></figcaption></figure>

3. Выбор "Казахстан":

<figure><img src="/files/wDdFivMqmtzlSf52RM2A" alt="" width="375"><figcaption></figcaption></figure>

#### Подстановка суммы

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

<figure><img src="/files/xoiGCfk92EnULL5EJ0wm" alt="" width="563"><figcaption></figcaption></figure>

Для ввода точной суммы воспользуйтесь пустым полем справа:

<figure><img src="/files/hftS1odtOa7l1MKYQefE" alt="" width="563"><figcaption></figcaption></figure>

Если вы выберите тип "сумма из диапазона", то необходимо ввести в поля интервалы  для выборки рандомного числа строго от и до:

<figure><img src="/files/2JVsNs8chWru3Y63PYDf" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/R9qajaAGyu1Dp90fDa7F" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/6KsNoXVqKmf63Yda7Gx3" alt=""><figcaption></figcaption></figure>

Далее откроется модальное окно, в котором необходимо задать наименование переменной <mark style="color:green;">**через квадратные скобки**</mark>:

<figure><img src="/files/COaOYGdb4JYmd4ESi8D9" alt="" width="563"><figcaption></figcaption></figure>

Далее введите значение переменной, где каждое новое значение должно быть написано с НОВОЙ строки без запятых и иных разделительных знаков:

<figure><img src="/files/H3Q7U2p1D7PKZVB30is4" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/V7HIilltHzgGvI7KUcnp" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/gVDXKzOPFgkonjJIiFGp" alt="" width="563"><figcaption></figcaption></figure>

Чтобы в дальнейшем использовать переменную, необходимо будет подставить наименование переменной через квадратный скобки в поле "Основной текст" в разделе "Контент":

<figure><img src="/files/LF5HMUOjZxQpto7fyTb5" alt="" width="563"><figcaption></figcaption></figure>

### Условия срабатывания виджета

<figure><img src="/files/DYQCkFWx86ow2OMRPWqY" alt="" width="563"><figcaption></figcaption></figure>

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

Можно установить тайминг показа виджета на сайте. Для этого воспользуйтесь функцией "Когда показывать виджет":

1. **Сразу**\
   Данная настройка отобразит виджет в момент перехода пользователя на сайт.&#x20;
2. **Спустя время**

<figure><img src="/files/McJ4ljB4feLDIXMXWDue" alt="" width="398"><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/X3PCbYLQ30R5IdKIFncI" alt="" width="563"><figcaption></figcaption></figure>

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

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

Также в условиях срабатывания существует:

1. Продолжительность показа:\
   \- Устанавливается значение в секундах. \
   \- Обозначает, что виджет покажется ровно на установленное количество секунд, затем уведомление пропадет из виду.
2. Интервал между показами\
   \- Устаналивается значение в секундах.\
   \- Обозначает, что после показа уведомления (виджета) по прошествию заданного количества секунд покажется следующий виджет.&#x20;

<figure><img src="/files/qOUrgDGT93mD7lopeoTU" alt="" width="563"><figcaption></figcaption></figure>

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

&#x20;Разберем подробнее существующие условия.

1. UTM-метки

{% hint style="info" %}
Чтобы узнать, что такое UTM-метки и как ими пользоваться, рекомендуем прочитать статью "[Как передать параметры и UTM-метки](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/kak-peredat-parametry-i-utm-metki)".
{% endhint %}

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

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

<figure><img src="/files/y0n1VhODqVamp3pzUBlz" alt="" width="362"><figcaption></figcaption></figure>

Далее выберите оператор соответствия метки значению:

<figure><img src="/files/8D305DEfcqvVHOMARPOr" alt="" width="362"><figcaption></figcaption></figure>

{% hint style="info" %}
В чем разница содержит/не содержит и равно/не равно?

Основное различие в том, что "**содержит/не содержит**" проверяет значение на факт того, что UTM-метка включает (или не включает) то или иное значение. \
Тогда как оператор "**равно**" строго присваивает значение, в связи с чем система ищет совпадение в UTM-метке по строгому значению (соответственно "Не равно" противоположно).
{% endhint %}

После чего пропишите необходимое значение для UTM-метки:

<figure><img src="/files/1n9AzqLiiqudFja4JblU" alt=""><figcaption></figcaption></figure>

2. Страна

<figure><img src="/files/9lDzMxPTRFubqvGGtUy5" alt=""><figcaption></figcaption></figure>

Также можно выбрать условие "Страна", которое отобразит виджет в зависимости от IP страны подключения. \
Выберите необходимую страну из перечня, а также тип оператора (является или не является):

<figure><img src="/files/kyY2ToZVmR06BXC83Yg2" alt="" width="233"><figcaption></figcaption></figure>

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

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

При необходимости установите условие "Устройство", которое отобразит виджет в зависимости от типа устройства клиента, перешедшего на сайт:

<div><figure><img src="/files/4rS2zBzah861nlFK8JqX" alt="" width="240"><figcaption></figcaption></figure> <figure><img src="/files/sDyPsQTtZOyjyWtVccuU" alt=""><figcaption></figcaption></figure></div>

В настройках также существует функция для добавления нескольких значений для отображения виджета. Для этого достаточно кликнуть по "+ Добавить значение" и установить еще одно или несколько необходимых условий:

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

## Варианты виджета

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

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

В данной вкладке устанавливаются настройки внешнего вида и содержания виджета, которое отображается вашим пользователям.&#x20;

### Контент

<figure><img src="/files/09JfXOMIRvOusbIJlAKJ" alt="" width="563"><figcaption></figcaption></figure>

В полях "Заголовок" и "Основной текст" вы можете прописать значения, [установленные в настройках виджета](#obshie-nastroiki-kontenta):

<div><figure><img src="/files/xFNeOclOaHv02i6MjpEj" alt="" width="557"><figcaption></figcaption></figure> <figure><img src="/files/wDfdwi6Nl3o6v4LLvyL3" alt="" width="563"><figcaption></figcaption></figure></div>

Вместо переменных \[name], \[sum], \[city] подтянутся значения, которые вы установили в настройках виджета.&#x20;

#### Иконка

<figure><img src="/files/69q3iW8gy0PAbpZBJUal" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/JkemmzyqTGByGpF4uftr" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/vf1wDVNOcg09MKRUmQBo" alt="" width="563"><figcaption></figcaption></figure>

1. Цветовая палитра: можно выбрать цвет для любого элемента виджета, начиная от текста, заканчивая фоном иконки, а также выбрать градиент:

<figure><img src="/files/3hjGEU5w42dI9ZGes1zl" alt="" width="563"><figcaption></figcaption></figure>

2. Выравнивание текста происходит относительно середины, правого или левого края:

<figure><img src="/files/gfHiABnrq3bd610oxSAD" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/h15o4cvfp4JJw809Ms0g" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/azWMdBNoA0959oSRNdao" alt="" width="563"><figcaption></figcaption></figure>

Данный чекбокс скроет крестик в углу виджета:

<figure><img src="/files/WzvIoftVbRWTZ0U0aGst" alt="" width="563"><figcaption></figcaption></figure>

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

Положение уведомлений уже по умолчанию установлено внизу в правом углу экрана:

<figure><img src="/files/F6i035duDxs9gAXEmo9m" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/1TtkdjRmcivVF1TybhY3" alt="" width="375"><figcaption></figcaption></figure>

Регулирование положения виджета происходит относительно нижнего и правого края.&#x20;

Можно сместить виджет в левый край, установив значение, например, в поле "Отступ справа" - 60%:

Пример отображения виджета:

<figure><img src="/files/o3yoQtmWFVZsNlKC0t96" alt="" width="563"><figcaption></figcaption></figure>

Настройки:

<figure><img src="/files/WLUJBu3xYto5AXMevTH3" alt="" width="375"><figcaption></figcaption></figure>

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

После того, как вами были установлены все настройки и отредактирован внешний вид виджета по своему уникальному дизайну, нажмите на кнопку "Добавить виджет" внизу экрана:

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

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

<figure><img src="/files/rbiCVRSfC9p9y2Dk25vB" alt="" width="563"><figcaption></figcaption></figure>

После чего вам откроется модальное окно со скриптом:

<figure><img src="/files/bXl4tDT1gNvrvivwpR7L" alt="" width="563"><figcaption></figcaption></figure>

Скопируйте скрипт и перейдите в настройки сайта, домен которого указали в настройках виджета:

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

После чего вставьте скрипт в HTML-код head:

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

{% hint style="info" %}
Чтобы встроить виджет на сайт тильды, также скопируйте скрипт виджета с помощью кнопки "Встроить код на сайт", после чего устанавливаете его на сайт.&#x20;
{% endhint %}

Готово! На этом настройка виджета и его установка на сайт завершена!&#x20;


---

# 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.salebot.pro/websites/vidzhety-dlya-saita/vidzhet-stadnyi-instinkt.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.