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

![](https://helpdesk.vivacrm.ru/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeUdZQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--9074395aaa8c4a0c156829cc314f56b0a17ecc95/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%C2%A0%E2%80%94%202026-07-24%20%D0%B2%C2%A009.12.43.png)

# Как активировать режим и разместить на сайте?

# Размещение виджета в поп-ап окне

По умолчанию виджеты vivaVision встраиваются прямо на страницу сайта. Если вы хотите открывать виджет по нажатию на кнопку или ссылку — выберите тип размещения **Поп-ап окно**. В этой статье описано, как переключить тип размещения и получить нужные коды.

:::callout{type="info"}
Виджет должен быть уже создан. Если вы ещё не создавали виджет — сделайте это сначала, а затем возвращайтесь к этой инструкции.

:::

---

:::step
Перейдите на страницу виджетов и нажмите на нужный виджет, чтобы открыть его настройки.

![Шаг 1](https://2a54f57b-f328-4b00-8f83-049bef127c91.selstorage.ru/cb7cb544-f0d2-4bcb-bd4d-0bdd15ad1d21)

:::

:::step
В блоке [[Основные настройки]] найдите свойство [[Тип размещения]]. По умолчанию выбрано значение **На сайте**.

Нажмите на выпадающий список и выберите **Поп-ап окно**.

![Шаг 2](https://2a54f57b-f328-4b00-8f83-049bef127c91.selstorage.ru/0b8248b4-8c45-41a8-88d2-39b83042dcde)

После выбора в блоке [[Код для вставки виджета на ваш сайт]] появится дополнительный параметр — ссылка для размещения в кнопке или href-ссылке.

![Шаг 3](https://2a54f57b-f328-4b00-8f83-049bef127c91.selstorage.ru/ee8b5a9c-bfcb-4325-a0d9-88a022438c41)

:::

:::step
Теперь вам нужно скопировать два фрагмента кода.

1. **Основной код** — скопируйте его и вставьте в секцию `<head>` вашего сайта.

![Шаг 4](https://2a54f57b-f328-4b00-8f83-049bef127c91.selstorage.ru/2aeefc30-d253-4807-9bf8-bfd43d30d864)

1. **Адрес обращения для вызова виджета** — скопируйте его и укажите в атрибуте `href` ссылки или в обработчике кнопки на вашем сайте.

![Шаг 5](https://2a54f57b-f328-4b00-8f83-049bef127c91.selstorage.ru/ee91131d-19ac-45b3-b64d-8f6758129fe9)

:::

:::callout{type="warning"}
Без основного кода в `<head>` сайта ссылка для вызова виджета работать не будет. Убедитесь, что основной код размещён корректно, прежде чем тестировать виджет.

:::

# Примеры

## Размещение в Tilda

#### **Добавление кода виджета в head вашего сайта**

1. Перейдите в раздел Настройки сайта

2. Выберите в левом меню настроек Ещё

3. На открывшейся странице найдите блок HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD

4. Вставьте в открывшемся окне код скопированный из виджета[ тут](https://vision.vivacrm.ru/widgets) , например:

   Копировать

   ```
   <script src="https://vivacrm.ru/widgets/supersite/bookingOnSite.js"></script>
   ```

5. Нажмите Сохранить

6. Обязательно опубликуйте все страницы.

#### **Добавление URL-адреса на любую кнопку или ссылку сайта для вызова виджета**

1. Откройте любую страницу вашего сайта

2. Создайте блок с кнопкой или используйте уже существующий

3. В поле "Ссылка для кнопки" добавьте URL виджета. Например: #popup — где popup, значение, которое вы можете взять из настроек виджета "Кнопка обратного вызова" или URL отображаемый в шапке настроек виджета.

![](https://helpdesk.vivacrm.ru/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeWlZQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--79a3b471a71ccaa75aedd49b3e1720e118c8603e/image)

Опубликуйте ваши изменения

## Размещение кнопки в WordPress

1. Откройте редактор темы: **Консоль → Внешний вид → Редактор тем**

2. Выберите файл `header.php`

3. Вставьте перед `</head>` код, скопированный из [настроек виджета](https://vision.vivacrm.ru/widgets). Например:

   ```
   <script src="https://vivacrm.ru/widgets/super/bookingInModal.js"></script>
   ```

4. Нажмите **Обновить файл**

5. Укажите на любой ссылке или кнопке URL-адрес `#popup`, где `popup` — значение из настройки виджета «Кнопка обратного вызова» или из URL в шапке настроек виджета

## Как разместить на самописном сайте

1. Перед `</head>` разместите код, который вам передал менеджер vivaCRM. Например:

   ```
   <script src="https://vivacrm.ru/widgets/super/bookingInModal.js"></script>
   ```

2. Укажите на любой ссылке или кнопке URL-адрес `#popup`, где `popup` — значение из настройки «Кнопка обратного вызова» или из URL в шапке настроек виджета. Например:

   ```
   <a href="#popup">Ваша ссылка</a>
   ```

   или

   ```
   <form action="#popup">
       <button type="submit">Кнопка-ссылка</button>
   </form>
   ```