> ## Documentation Index
> Fetch the complete documentation index at: https://revolai.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Тригери

> Створення автоматичних попапів, оверлеїв та панелей сповіщень на основі правил поведінки відвідувачів

## Огляд

Вкладка Triggers дозволяє створювати автоматичні дії, які спрацьовують на основі поведінки відвідувачів. Коли відвідувач відповідає конкретним умовам — час на сторінці, глибина прокрутки, UTM-джерело, тип пристрою тощо — тригер показує модальне вікно, тост-сповіщення або перенаправляє на URL. Тригери — потужний спосіб залучення відвідувачів у потрібний момент без програмування.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/revolai/f9LQJGx083qnby8Z/images/tracker-triggers-light.png?fit=max&auto=format&n=f9LQJGx083qnby8Z&q=85&s=fec85aca2ff7a7e885b2135a613e6bf2" alt="Вкладка тригерів" width="2873" height="1553" data-path="images/tracker-triggers-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/revolai/f9LQJGx083qnby8Z/images/tracker-triggers-dark.png?fit=max&auto=format&n=f9LQJGx083qnby8Z&q=85&s=f0477710da21258fa6da56cd2c8e6e61" alt="Вкладка тригерів" width="2860" height="1550" data-path="images/tracker-triggers-dark.png" />
</Frame>

## Список тригерів

Таблиця тригерів показує всі визначені тригери з ключовими метриками:

| Колонка        | Опис                                                                                                        |
| -------------- | ----------------------------------------------------------------------------------------------------------- |
| **Name**       | Назва тригера                                                                                               |
| **Type**       | Тип дії — Modal (модальне вікно по центру), Toast (кутове сповіщення) або Redirect (перенаправлення на URL) |
| **Conditions** | Підсумок умов спрацювання                                                                                   |
| **Fires**      | Загальна кількість активацій                                                                                |
| **Status**     | Активний або неактивний                                                                                     |
| **Actions**    | Редагувати або видалити тригер                                                                              |

***

## Створення тригера

Натисніть **Create Trigger**, щоб відкрити редактор тригерів. Редактор має дві вкладки: **Content** для візуального контенту та **Settings** для правил поведінки.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/revolai/f9LQJGx083qnby8Z/images/create-trigger-light.png?fit=max&auto=format&n=f9LQJGx083qnby8Z&q=85&s=6ba8d47a8d3e0fe412e40aedce804b8f" alt="Редактор тригерів" width="2869" height="1549" data-path="images/create-trigger-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/revolai/f9LQJGx083qnby8Z/images/create-trigger-dark.png?fit=max&auto=format&n=f9LQJGx083qnby8Z&q=85&s=6e16455d986a9e73e653df928889e3c9" alt="Редактор тригерів" width="2867" height="1556" data-path="images/create-trigger-dark.png" />
</Frame>

***

## Вкладка Content

Вкладка Content — це візуальний блоковий редактор, де ви створюєте контент тригера. Кожен тригер складається з **контентних блоків**, які ви додаєте, впорядковуєте та стилізуєте.

### Додавання блоків

Натисніть кнопку **+ Add Block**, щоб відкрити меню вибору блоків. Доступні типи блоків:

| Блок             | Опис                                                                                                                                                                                                                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image**        | Додайте зображення — завантажте файл або вставте URL. Чудово для фото продуктів, банерів або іконок.                                                                                                                      |
| **Heading**      | Великий текст для заголовків. Підтримує вирівнювання тексту (ліворуч або по центру).                                                                                                                                      |
| **Text**         | Основний текст з форматуванням. Використовуйте для описів, пропозицій або інструкцій.                                                                                                                                     |
| **Feature List** | Маркований список з іконками-галочками — ідеально для переліку переваг, функцій або включених елементів.                                                                                                                  |
| **Input Field**  | Однорядкове текстове поле для збору даних (ім'я, email, телефон).                                                                                                                                                         |
| **Textarea**     | Багаторядкове текстове поле для довших відповідей (повідомлення, відгуки).                                                                                                                                                |
| **Button**       | Кнопка з налаштовуваним текстом, кольором та дією (посилання, закриття або відправлення даних форми).                                                                                                                     |
| **Promo Code**   | Стилізований блок промокоду з кнопкою копіювання. Відвідувачі натискають, щоб скопіювати код у буфер обміну.                                                                                                              |
| **QR Code**      | Вставляє QR-код кампанії безпосередньо в тригер. Відвідувачі сканують його телефоном для продовження на мобільному — з повною атрибуцією кампанії. Детальніше у розділі [Кампанії — QR-код](/uk/widget/campaigns#qr-код). |
| **Divider**      | Горизонтальна лінія для візуального розділення секцій.                                                                                                                                                                    |

### Налаштування блоків

Кожен тип блоку має власні редаговані властивості. Натисніть на блок, щоб вибрати та налаштувати:

**Image:**

| Налаштування      | Опис                                                |
| ----------------- | --------------------------------------------------- |
| **URL**           | URL-адреса зображення                               |
| **Alt Text**      | Альтернативний текст для доступності                |
| **Border Radius** | Заокруглення кутів у пікселях (за замовчуванням: 0) |

**Heading:**

| Налаштування | Опис                               |
| ------------ | ---------------------------------- |
| **Text**     | Вміст заголовка                    |
| **Align**    | Left (за замовчуванням) або Center |

**Text:**

| Налаштування     | Опис                                                                        |
| ---------------- | --------------------------------------------------------------------------- |
| **HTML Content** | Форматований текст — підтримує `<b>`, `<i>`, `<u>`, `<a>`, списки та `<br>` |

**Feature List:**

| Налаштування | Опис                                                                                                                             |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| **Items**    | Динамічний список функцій. Кожен елемент має іконку (емодзі), заголовок та текст опису. Натисніть «Add Item», щоб додати більше. |

**Input Field:**

| Налаштування    | Опис                                               |
| --------------- | -------------------------------------------------- |
| **Key**         | Назва поля форми (наприклад, `email`, `phone`)     |
| **Type**        | Text, Email, Phone або Number                      |
| **Label**       | Мітка поля, що відображається над полем вводу      |
| **Placeholder** | Текст-підказка всередині поля                      |
| **Required**    | Чи повинно поле бути заповнене перед відправленням |

**Textarea:**

| Налаштування    | Опис                                                        |
| --------------- | ----------------------------------------------------------- |
| **Key**         | Назва поля форми                                            |
| **Rows**        | Кількість видимих рядків тексту (1–10, за замовчуванням: 3) |
| **Label**       | Мітка поля                                                  |
| **Placeholder** | Текст-підказка                                              |
| **Required**    | Чи повинно поле бути заповнене                              |

**Button:**

| Налаштування | Опис                                                                                                                                     |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Label**    | Текст кнопки                                                                                                                             |
| **Variant**  | Primary (суцільний акцентний колір), Secondary (легкий відтінок) або Outline (прозорий з обрамленням)                                    |
| **Action**   | Close (закрити тригер), Open Link (перейти за URL), Submit Form (відправити дані форми) або Copy Value (скопіювати текст у буфер обміну) |
| **Value**    | URL для посилань або текст для дії копіювання                                                                                            |

**Promo Code:**

| Налаштування | Опис                                    |
| ------------ | --------------------------------------- |
| **Code**     | Текст промокоду (наприклад, `SPRING20`) |
| **Label**    | Необов'язкова мітка над кодом           |

**QR Code:**

| Налаштування | Опис                                                              |
| ------------ | ----------------------------------------------------------------- |
| **QR Data**  | URL або текст для кодування. Натисніть «Create QR» для генерації. |
| **Size**     | Розмір QR-коду в пікселях (за замовчуванням: 160)                 |

**Divider:**
Без налаштувань — рендерить горизонтальну лінію-розділювач.

### Стиль тригера

Контейнер тригера має глобальні налаштування стилю, які застосовуються до всього попапу/тосту:

| Налаштування         | Опис                                                                                                                 |
| -------------------- | -------------------------------------------------------------------------------------------------------------------- |
| **Background Color** | Фон контейнера (за замовчуванням: `#ffffff`)                                                                         |
| **Text Color**       | Стандартний колір тексту для всіх блоків (за замовчуванням: `#1a1a1a`)                                               |
| **Accent Color**     | Колір для кнопок, іконок функцій та кнопки копіювання промокоду (за замовчуванням: `#4680ff`)                        |
| **Border Radius**    | Заокруглення кутів всього тригера в пікселях (за замовчуванням: 16)                                                  |
| **Position**         | Для тост-тригерів: top-right, top-left, bottom-right або bottom-left. Для модальних вікон: по центру з темним фоном. |

### Приклади контенту

<AccordionGroup>
  <Accordion title="Попап з привітальною знижкою">
    * **Heading**: «Отримайте 10% знижки на перше замовлення»
    * **Text**: «Підпишіться на розсилку та отримайте ексклюзивний промокод.»
    * **Input Field**: Email
    * **Button**: «Отримати знижку» (дія відправлення)
    * **Promo Code**: Відкривається після відправлення форми
  </Accordion>

  <Accordion title="Пропозиція при виході">
    * **Image**: Фото товару
    * **Heading**: «Зачекайте! Не пропустіть це.»
    * **Text**: «Безкоштовна доставка від замовлень понад 1500 грн — лише сьогодні.»
    * **Button**: «За покупками» (посилання на магазин)
    * **Button**: «Ні, дякую» (дія закриття)
  </Accordion>

  <Accordion title="QR-код для продовження на мобільному">
    * **Heading**: «Продовжіть на телефоні»
    * **Text**: «Відскануйте QR-код, щоб поспілкуватися з AI-агентом на мобільному.»
    * **QR Code**: QR-код кампанії з UTM-трекінгом
    * **Text**: «Або натисніть кнопку чату нижче.»
  </Accordion>

  <Accordion title="Анонс нової функції">
    * **Image**: Скріншот функції
    * **Heading**: «Нове: AI-рекомендації»
    * **Feature List**: 3-4 ключові переваги
    * **Button**: «Дізнатися більше» (посилання на сторінку функції)
    * **Divider**
    * **Text**: Дрібний шрифт з дисклеймером
  </Accordion>
</AccordionGroup>

***

## Вкладка Settings

Вкладка Settings контролює **коли**, **як часто** та **кому** показується тригер.

### Умови

Умови визначають правила, які повинні бути виконані для спрацювання тригера. Ви можете додати кілька умов та обрати режим логіки: **AND** (всі умови повинні бути true) або **OR** (достатньо будь-якої умови) для активації тригера.

| Умова                      | Оператор                                  | Опис                                                                                                                                       |
| -------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **Time on page (seconds)** | `>=`, `<=`, `=`                           | Спрацювати після X секунд на поточній сторінці. Приклад: показати попап після 30 секунд читання.                                           |
| **Pages visited**          | `>=`, `<=`, `=`                           | Спрацювати після перегляду X сторінок у сесії. Приклад: показати пропозицію після 3+ сторінок.                                             |
| **Scroll depth (%)**       | `>=`, `<=`, `=`                           | Спрацювати при прокрутці за відсоток сторінки. Приклад: показати CTA після 70% прокрутки.                                                  |
| **UTM Source**             | `=`, `contains`                           | Спрацювати лише для відвідувачів з конкретного джерела. Приклад: показати акцію лише для відвідувачів з `google`.                          |
| **UTM Medium**             | `=`, `contains`                           | Спрацювати лише для конкретного каналу. Приклад: тригер лише для `cpc` (платного) трафіку.                                                 |
| **UTM Campaign**           | `=`, `contains`                           | Спрацювати лише для відвідувачів з конкретної кампанії. Приклад: показати сезонний банер лише для кампанії `summer-sale`.                  |
| **Referral ID**            | `=`, `!=`                                 | Спрацювати на основі параметра `rvl_ref`. Приклад: показати привітання партнера для конкретного реферала.                                  |
| **Referrer contains**      | `contains`                                | Спрацювати на основі URL рефералу. Приклад: показати порівняння для відвідувачів із сайту конкурента.                                      |
| **Page URL**               | `=`, `contains`, `starts_with`, `matches` | Спрацювати лише на конкретних сторінках. Використовуйте `matches` для regex-патернів. Приклад: показати попап з цінами лише на `/pricing`. |
| **Device type**            | `=`                                       | Спрацювати лише на Desktop, Mobile або Tablet. Приклад: показати банер завантаження додатку лише на мобільному.                            |
| **Event fired**            | `=`                                       | Спрацювати після конкретної трекінгової події. Приклад: показати крос-сел попап після події `add_to_cart`.                                 |
| **Day of week (0=Sun)**    | `=`, `in`                                 | Спрацювати лише у конкретні дні. Приклад: показати вихідні знижки у суботу (6) та неділю (0).                                              |
| **Hour range \[from, to]** | `between`                                 | Спрацювати лише у конкретні години. Приклад: показати «Зателефонуйте нам» лише у робочий час 9-18.                                         |

### Приклади умов

<Tabs>
  <Tab title="Залучений читач">
    Показати попап розсилки для відвідувачів, які активно читають:

    | Умова        | Оператор | Значення  |
    | ------------ | -------- | --------- |
    | Time on page | `>=`     | `30`      |
    | Scroll depth | `>=`     | `50`      |
    | Device type  | `=`      | `desktop` |
  </Tab>

  <Tab title="Пропозиція для платного трафіку">
    Показати спеціальну знижку для відвідувачів Google Ads на сторінці цін:

    | Умова      | Оператор   | Значення   |
    | ---------- | ---------- | ---------- |
    | UTM Source | `=`        | `google`   |
    | UTM Medium | `=`        | `cpc`      |
    | Page URL   | `contains` | `/pricing` |
  </Tab>

  <Tab title="Покинутий кошик">
    Показати нагадування після події додавання в кошик з затримкою:

    | Умова         | Оператор | Значення      |
    | ------------- | -------- | ------------- |
    | Event fired   | `=`      | `add_to_cart` |
    | Time on page  | `>=`     | `60`          |
    | Pages visited | `>=`     | `2`           |
  </Tab>

  <Tab title="Лише робочі години">
    Показати «Зателефонуйте нам» лише у робочі години в будні:

    | Умова       | Оператор  | Значення          |
    | ----------- | --------- | ----------------- |
    | Hour range  | `between` | `[9, 18]`         |
    | Day of week | `in`      | `[1, 2, 3, 4, 5]` |
    | Device type | `=`       | `desktop`         |
  </Tab>
</Tabs>

### Частота (Frequency)

Контролює як часто тригер показується одному відвідувачу:

| Опція                       | Опис                                                                                                                                                                                 |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Once per session**        | Показати один раз протягом поточної сесії браузерної вкладки. Тригер не з'явиться навіть після перезавантаження чи переходу на іншу сторінку — тільки закриття вкладки скидає його.  |
| **Once per day**            | Показати раз на календарний день. Відвідувач не побачить його знову до завтра, незалежно від кількості сесій сьогодні.                                                               |
| **Once per visitor (ever)** | Показати лише один раз — назавжди. Після того як відвідувач побачив тригер, він більше ніколи не з'явиться (відстежується через токен браузера). Ідеально для одноразових оголошень. |
| **Every visit**             | Показувати при кожній сесії. Тригер спрацьовує кожного разу при виконанні умов. Використовуйте обережно.                                                                             |

<Tip>
  Для більшості випадків **Once per session** або **Once per visitor** — правильний вибір. «Every visit» може дратувати — використовуйте лише для критичної, термінової інформації, як-от повідомлення про технічні роботи або термінові акції.
</Tip>

### Розклад (Schedule)

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

| Поле         | Опис                                                                                           |
| ------------ | ---------------------------------------------------------------------------------------------- |
| **Start At** | Дата та час активації тригера. До цього моменту тригер не спрацює, навіть якщо умови виконані. |
| **End At**   | Дата та час зупинки тригера. Після цього моменту тригер автоматично деактивується.             |

Обидва поля необов'язкові:

* **Лише початок** — тригер активується на дату початку та працює необмежено
* **Лише кінець** — тригер працює одразу і зупиняється на дату кінця
* **Обидва** — тригер працює лише у вказаному вікні
* **Жоден** — тригер працює поки увімкнений

**Сценарії використання розкладу:**

| Сценарій                   | Початок        | Кінець        |
| -------------------------- | -------------- | ------------- |
| Попап Чорної п'ятниці      | 29 лист, 00:00 | 2 груд, 23:59 |
| Новорічний промо-банер     | 25 груд, 00:00 | 5 січ, 23:59  |
| Анонс запуску продукту     | 15 бер, 10:00  | 22 бер, 23:59 |
| Повідомлення про техроботи | —              | 1 квіт, 06:00 |

***

## Як працюють тригери

Коли скрипт трекера завантажується на вашому сайті, він отримує активні визначення тригерів та оцінює їх у фоновому режимі:

<Steps>
  <Step title="Завантаження активних тригерів">
    Трекер отримує активні визначення тригерів з сервера. Сервер фільтрує за розкладом (дати початку/кінця) та статусом активності перед відправленням на клієнт.
  </Step>

  <Step title="Перевірка частоти">
    Кожні 2 секунди трекер перевіряє налаштування частоти кожного тригера. Якщо відвідувач вже бачив тригер (на основі localStorage або sessionStorage), тригер пропускається.
  </Step>

  <Step title="Оцінка умов">
    Для тригерів, що пройшли перевірку частоти, трекер оцінює всі умови — час на сторінці, глибину прокрутки, UTM-параметри, тип пристрою, відстежені події тощо. Умови використовують логіку AND або OR залежно від налаштувань.
  </Step>

  <Step title="Відображення тригера">
    Контент тригера (модальне вікно або тост) рендериться на сторінці всередині Shadow DOM з налаштованим стилем та анімацією. Активація записується як подія `trigger_shown`. Для тригерів перенаправлення відвідувач переходить на цільову URL-адресу.
  </Step>

  <Step title="Взаємодія відвідувача">
    Відвідувач може взаємодіяти з тригером — натискати кнопки, заповнювати поля, копіювати промокоди, сканувати QR-коди або закривати його. Кожна взаємодія відстежується як окрема подія (`trigger_clicked`, `trigger_dismissed`, `trigger_promo_copied`).
  </Step>
</Steps>

<Note>
  Тригери рендеряться всередині власного контейнера **Shadow DOM**, тому їхні стилі повністю ізольовані від вашого сайту. Жодних CSS-конфліктів.
</Note>

***

## Інтеграція тригерів та подій

Тригери автоматично створюють трекінгові події. Кожна активація тригера записується як подія `trigger_shown` з ID тригера та типом дії. Ви можете:

* Бачити активність тригерів у діаграмі **Trigger Activity** на Dashboard
* Переглядати активації тригерів у таблиці **Campaign Performance**
* Використовувати умову `event_fired` для ланцюжків тригерів — наприклад, показати Тригер Б лише після того як Тригер А був побачений
* Поєднувати з [Кастомними подіями](/uk/widget/events#custom-events-api) для складних потоків

<Tip>
  Використовуйте умову **Event fired** для створення багатокрокових послідовностей. Наприклад: Тригер 1 показує тізер через 10 секунд. Тригер 2 показує повну пропозицію лише якщо відвідувач натиснув кнопку Тригера 1 (відстежується як кастомна подія).
</Tip>