# Виджет "Видео"

Виджет с видео для сайта - это удобный и практичный элемент интерфейса, который позволяет встраивать видео на веб-страницы, обеспечивая удобное воспроизведение и управление. Он может быть использован для различных целей, таких как демонстрация видео-отзывов, приветственных видео или анонсов.

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

## Настройка виджета

Перейдите в раздел "Виджеты" и нажмите кнопку "Создать виджет":

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

Выберите виджет "Видео":

<figure><img src="/files/fgPSO892ip8bXp5vPGz5" alt="" width="287"><figcaption></figcaption></figure>

Вам откроются настройки с основной информаций:

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

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

1. Укажите название виджета (это может быть любое удобное название, которое будет отображаться в общем списке в разделе "Виджеты"):

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

Название отображается только для вас.

2. Укажите адрес сайта, на котором хотите показывать видео:

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

Далее вставьте скопированный адрес в поле:

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

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

1. Когда показывать виджет

Можно выставить значение, когда отображать виджет на сайте:

а) сразу — при переходе на сайт, виджет сразу будет отображаться на сайте;

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

б) спустя время — виджет отображается на сайте спустя установленное время после перехода на сайт:

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

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

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

**Чекбокс "Закрывать виджет по нажатию на фон"**\
Если активировать данный переключатель, то при клике на фон виджета, видео будет закрываться.

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

**Чекбокс "Задать условия отображения на сайте"**\
Если активировать переключатель, то виджет будет отображаться при удовлетворении каких-либо условий:

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/oGHzdyjkS6bShhq3qu8v" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/VAfkuaqy89HdNybBqDTh" alt="" width="327"><figcaption></figcaption></figure>

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

<figure><img src="/files/jthC3DjU2VSbGuvATQsO" alt="" width="200"><figcaption></figcaption></figure>

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

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

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

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

{% hint style="success" %}
Тогда клиентам с указанными utm-метками будет отображаться видео на сайте.
{% endhint %}

2. Страна

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

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

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

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

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

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

После настроек основной информации и условий срабатывания перейдите во вкладку "Внешний вид":

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

Обязательные поля:

1. Ссылка на основное видео;
2. Ссылка для превью.

Для обязательных полей указываются ссылки на видео в формате mp4.

Достаточно загрузить видео в файлах и скопировать на него ссылку:

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

Далее вставьте ссылку в полях "Основное видео" и "Видео для превью": после чего превью видео будет отображено в правом углу экрана:

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

Далее напишите текст для кнопки (будет отображаться на видео), если вам нужно перенаправлять клиентов на другую страницу или, например, в мессенджер:

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

Далее выберите размер видео:

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

И положение на сайте:

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

Затем можно кастомизировать кнопку, выбрав цвет фона и текста:

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

Теперь нажмите "Добавить виджет", чтобы сохранить настройки:

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

После чего вы перейдете в соответствующий раздел и увидите новый созданный виджет "Видео":

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

{% hint style="success" %}
Теперь осталось встроить виджет на сайт!&#x20;
{% endhint %}

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

Нажмите на "Встроить код на сайт":

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

В открывшемся окне скопируйте код виджета:

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

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

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

В настройках перейдите во вкладку "Цвета, шрифты и HTML":

<figure><img src="/files/5TlUK7FBL4dOSeynhAEy" alt=""><figcaption></figcaption></figure>

Теперь вставьте скопированный код в поле \<head>:

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

И нажмите "Сохранить".&#x20;

Теперь в новой вкладке откройте раздел "Виджеты" и наведите на карточку созданного виджета:

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

Нажмите "Изменить видимость", чтобы запустить виджет.

Если виджет успешно запущен, то после обновления страницы вы увидите статус "Активен":

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

И ваш виджет будет отображаться на сайте:

<figure><img src="/files/5kXRlycpOOeHsIxneqGh" alt=""><figcaption></figcaption></figure>


---

# 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-video.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.