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

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

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

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

Виджет должен быть уже создан. Если вы ещё не создавали виджет — сделайте это сначала, а затем возвращайтесь к этой инструкции.

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

Шаг 1

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

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

Шаг 2

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

Шаг 3

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

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

Шаг 4

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

Шаг 5

Без основного кода в <head> сайта ссылка для вызова виджета работать не будет. Убедитесь, что основной код размещён корректно, прежде чем тестировать виджет.

Примеры

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

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

Перейдите в раздел Настройки сайта
Выберите в левом меню настроек Ещё
На открывшейся странице найдите блок HTML-КОД ДЛЯ ВСТАВКИ ВНУТРЬ HEAD
Вставьте в открывшемся окне код скопированный из виджета тут , например:

Копировать
```
<script src="https://vivacrm.ru/widgets/supersite/bookingOnSite.js"></script>
```
Нажмите Сохранить
Обязательно опубликуйте все страницы.

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

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

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

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

Откройте редактор темы: Консоль → Внешний вид → Редактор тем
Выберите файл header.php
Вставьте перед </head> код, скопированный из настроек виджета. Например:
```
<script src="https://vivacrm.ru/widgets/super/bookingInModal.js"></script>
```
Нажмите Обновить файл
Укажите на любой ссылке или кнопке URL-адрес #popup, где popup — значение из настройки виджета «Кнопка обратного вызова» или из URL в шапке настроек виджета

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

Перед </head> разместите код, который вам передал менеджер vivaCRM. Например:
```
<script src="https://vivacrm.ru/widgets/super/bookingInModal.js"></script>
```
Укажите на любой ссылке или кнопке URL-адрес #popup, где popup — значение из настройки «Кнопка обратного вызова» или из URL в шапке настроек виджета. Например:
```
<a href="#popup">Ваша ссылка</a>
```
или
```
<form action="#popup">
    <button type="submit">Кнопка-ссылка</button>
</form>
```