# 📦 Готовые шаблоны (Gravity Templates)

Gravity Field предлагает набор готовых шаблонов для быстрого запуска кампаний. Каждый шаблон содержит визуальный код и настраиваемые переменные, чтобы адаптировать виджет под ваш бренд и задачу — без необходимости писать всё с нуля.

---

## 🎯 API Recommendations

**Описание:**  
API Recommendations Campaign

**Тип кампании:** `API: recommendations`

**Переменные:**
- `Strategy` *(Recommendation startegy)* — Рекомендательная стратегия для виджета
- `Widget Title` *(Text)* — Заголовок рекомендательного виджета
- `Button Text` *(Text)* — Текст кнопки
- `Show Badges` *(Dropdown)* — Управление лейблами
- `Button Colour` *(Color)* — Цвет кнопки

---

## 🧪 Basic template

**Описание:**  
Пустой шаблон с минимальной структурой. Используется для полной кастомизации через JSON.

**Тип кампании:** `API: custom_json`

**Переменные:** —

---

## ⏳ Countdown

**Описание:**  
Баннер с таймером обратного отсчета для срочных предложений и ограниченных акций.

**Тип кампании:** `overlay`

**Переменные:**
- `Title` *(Text)* — Заголовок виджета или элемента.
- `Secondary` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Year` *(Text)* — Дата и время, используемые для отсчёта или показа.
- `Month` *(Dropdown)* — Дата и время, используемые для отсчёта или показа.
- `Day` *(Dropdown)* — Дата и время, используемые для отсчёта или показа.
- `Time` *(Text)* — Format: HH:MM
- `Button Link` *(Text)* — Ссылка для перехода или действия.
- `Button Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Background Image` *(Image)* — Изображение, используемое в шаблоне.
- `Title Font` *(Dropdown)* — Заголовок виджета или элемента.
- `Theme Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Time Zone` *(Dropdown)* — Дата и время, используемые для отсчёта или показа.

---

## 🛎️ Floating Cart

**Описание:**  
Плавающая иконка корзины, отображающая количество товаров. Работает как нативный элемент UI.

**Тип кампании:** `notification`

**Переменные:**
- `Cart Number Selector` *(CssSelector)* — CSS-селектор DOM-элемента на странице.
- `Cart Page URL` *(Text)* — Ссылка для перехода или действия.
- `Number Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Number Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Cart Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).

---

## 📲 Download App Top Bar

**Описание:**  
Баннер для установки приложения. Включает иконку, призыв и кнопку перехода в стор.

**Тип кампании:** `dynamic_content`

**Переменные:**
- `Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Download Link` *(Text)* — Ссылка для перехода или действия.
- `Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `App Icon Image` *(Image)* — Изображение, используемое в шаблоне.
- `Download Badge` *(Dropdown)* — Графический бейдж или маркер для виджета.
- `Rounded Corners to App Icon` *(Dropdown)* — Скругление углов элемента.
- `Font Family` *(Text)* — Шрифт, используемый в тексте.

---

## ⏳ Subscription

**Описание:**  
Форма подписки на рассылку, обычно используется для сбора email адресов.

**Тип кампании:** `overlay`

**Переменные:**
- `Desktop Image Placement` *(Dropdown)* — The image will be left or right to the form on desktop.
- `Mobile Image Placement` *(Dropdown)* — The image will be placed above or below the form on mobile.
- `Desktop Image` *(Image)* — Изображение, используемое в шаблоне.
- `Mobile Image` *(Image)* — Изображение, используемое в шаблоне.
- `Main Title` *(Text)* — Заголовок виджета или элемента.
- `Secondary Title` *(Text)* — Заголовок виджета или элемента.
- `Integration URL` *(Text)* — On form submission the input values will be sent to this URL.
- `Integration Type` *(Dropdown)* — On form submission the input values will be sent through this HTTP method. Always GET if email input is hidden.
- `Input Placeholder` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Subscribe Button Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Thank You Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Close Overlay Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Font Name` *(Text)* — Шрифт, используемый в тексте.
- `Animate Mobile Image Hiding on Focus` *(Dropdown)* — When the email input is focused on mobile, the image is hidden. By default this transition will be animated. Only applies when the mobile image is placed above the form.
- `Subscribe Button Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Background Opacity` *(Number)* — A value of 0 means no background, while a value of 100 means completely opaque background.
- `Close Overlay Event Name` *(Text)* — This event will be fired when someone presses the "Close Overlay" link at the bottom of the form.
- `Form Submission Action` *(Dropdown)* — What should happen after the Subscribe button is pressed. Always Redirect if email input is hidden.
- `Close Overlay Immediately on Submit` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Newsletter Subscription Event Name` *(Text)* — Событие, отправляемое системой при определённом действии.
- `ESP Call Failed Event Name` *(Text)* — Событие, отправляемое системой при определённом действии.

---

## 📲 Split Category Banner

**Описание:**  
Баннер с разбиением по категориям. Подходит для визуальной навигации.

**Тип кампании:** `dynamic_content`

**Переменные:**
- `Number of sections` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Text #1` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Link #1` *(Text)* — Ссылка для перехода или действия.
- `Button Link #3` *(Text)* — Ссылка для перехода или действия.
- `Button Link #4` *(Text)* — Ссылка для перехода или действия.
- `Button Link #2` *(Text)* — Ссылка для перехода или действия.
- `Text #2` *(Text)* — Текст, отображаемый в шаблоне.
- `Text #3` *(Text)* — Текст, отображаемый в шаблоне.
- `Text #4` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Text #4` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Text #3` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Text #2` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Text #1` *(Text)* — Текст, отображаемый в шаблоне.
- `FIlter Opacity #1` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Filter Opacity #2` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Filter Opacity #3` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Filter Opacity #4` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Text Color` *(Color)* — Текст, отображаемый в шаблоне.
- `Color Filter #1` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Color Filter #2` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Color Filter #3` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Color Filter #4` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Font Name` *(Text)* — Шрифт, используемый в тексте.
- `Background Image #1` *(Image)* — Изображение, используемое в шаблоне.
- `Background Image #2` *(Image)* — Изображение, используемое в шаблоне.
- `Background Image #3` *(Image)* — Изображение, используемое в шаблоне.
- `Background Image #4` *(Text)* — Изображение, используемое в шаблоне.

---

## 📲 Hero banner

**Описание:**  
Главный баннер на странице. Часто используется для анонсов или крупных акций.

**Тип кампании:** `dynamic_content`

**Переменные:**
- `Banner Click Through URL` *(Text)* — Ссылка для перехода или действия.
- `Main text` *(Text)* — Текст, отображаемый в шаблоне.
- `Secondary Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Font Family` *(Text)* — Шрифт, используемый в тексте.
- `Text Color` *(Color)* — Текст, отображаемый в шаблоне.
- `Background Image` *(Image)* — Изображение, используемое в шаблоне.
- `Text Align` *(Dropdown)* — Текст, отображаемый в шаблоне.
- `Button Text Color` *(Color)* — Текст, отображаемый в шаблоне.

---

## 🛎️ Image Simple

**Описание:**  
Простой баннер с изображением. Без интерактивных элементов.

**Тип кампании:** `notification`

**Переменные:**
- `Open link in` *(Dropdown)* — Ссылка для перехода или действия.
- `Image Link` *(Text)* — Изображение, используемое в шаблоне.
- `Image URL` *(Image)* — Изображение, используемое в шаблоне.

---

## 🛎️ Basic Notification

**Описание:**  
Минималистичное всплывающее уведомление.

**Тип кампании:** `notification`

**Переменные:**
- `Button URL` *(Text)* — Ссылка для перехода или действия.
- `Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Font Name` *(Text)* — Шрифт, используемый в тексте.
- `Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Font Size` *(Number)* — Шрифт, используемый в тексте.
- `Text Color` *(Color)* — Текст, отображаемый в шаблоне.

---

## 🛎️ Collect Feedback

**Описание:**  
Форма сбора отзывов от пользователей на сайте.

**Тип кампании:** `notification`

**Переменные:**
- `Teaser Icon` *(Image)* — Параметр для настройки отображения или поведения элемента.
- `Teaser Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Feedback Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Hate Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Dislike Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Neutral Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Like Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Love Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Thank You Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Close Icon` *(Image)* — Параметр для настройки отображения или поведения элемента.
- `Hate Icon` *(Image)* — Параметр для настройки отображения или поведения элемента.
- `Neutral Icon` *(Image)* — Параметр для настройки отображения или поведения элемента.
- `Dislike Icon` *(Image)* — Параметр для настройки отображения или поведения элемента.
- `Like Icon` *(Image)* — Параметр для настройки отображения или поведения элемента.
- `Love Icon` *(Image)* — Параметр для настройки отображения или поведения элемента.
- `Font Name` *(Text)* — Шрифт, используемый в тексте.
- `Feedback Event Name` *(Text)* — Событие, отправляемое системой при определённом действии.
- `Thank You Message` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Close Overlay Event Name` *(Text)* — Событие, отправляемое системой при определённом действии.

---

## 📌 Vertical

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

**Тип кампании:** `recs_widget`

**Переменные:**
- `Recommendation` *(Strategy)* — Параметр для настройки отображения или поведения элемента.
- `url` *(ProductFeedProperty)* — Ссылка для перехода или действия.
- `Image_url` *(ProductFeedProperty)* — Изображение, используемое в шаблоне.
- `price` *(ProductFeedProperty)* — Параметр для настройки отображения или поведения элемента.
- `Name` *(ProductFeedProperty)* — Параметр для настройки отображения или поведения элемента.
- `Currency Symbol` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Maximum Width` *(Number)* — Параметр для настройки отображения или поведения элемента.
- `Title Size` *(Number)* — Заголовок виджета или элемента.
- `Title Font Weight` *(Dropdown)* — Заголовок виджета или элемента.
- `Title Color` *(Color)* — Заголовок виджета или элемента.
- `Font` *(Dropdown)* — Шрифт, используемый в тексте.
- `Thausands Separator` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Decimal Separator` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Currency Position` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Title` *(Text)* — Заголовок виджета или элемента.

---

## ⏳ Recommendation Message

**Описание:**  
Текстовый блок с рекомендациями. Используется для мягкого вовлечения.

**Тип кампании:** `overlay`

**Переменные:**
- `Recommendation` *(Strategy)* — Параметр для настройки отображения или поведения элемента.
- `Thausands Separator` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Decimal Separator` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `url` *(ProductFeedProperty)* — Ссылка для перехода или действия.
- `Currency Symbol` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `price` *(ProductFeedProperty)* — Параметр для настройки отображения или поведения элемента.
- `image_url` *(ProductFeedProperty)* — Изображение, используемое в шаблоне.
- `name` *(ProductFeedProperty)* — Параметр для настройки отображения или поведения элемента.
- `Text Color` *(Color)* — Текст, отображаемый в шаблоне.
- `Background Image` *(Image)* — Изображение, используемое в шаблоне.
- `Product Details Alignment` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Product price display` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Product name display` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Main Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Secondary Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Currency Position` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.

---

## 📌 Product Grid

**Описание:**  
Сетка товаров, например, для раздела 'Популярное' или 'Новинки'.

**Тип кампании:** `recs_widget`

**Переменные:**
- `Thausands Separator` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Decimal Separator` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Recommendation` *(Strategy)* — Параметр для настройки отображения или поведения элемента.
- `Widget Title` *(Text)* — Заголовок виджета или элемента.
- `url` *(ProductFeedProperty)* — Ссылка для перехода или действия.
- `Product title` *(ProductFeedProperty)* — Заголовок виджета или элемента.
- `Currency Symbol` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `price` *(ProductFeedProperty)* — Параметр для настройки отображения или поведения элемента.
- `Image URL` *(ProductFeedProperty)* — Изображение, используемое в шаблоне.
- `Product Text Alignment` *(Dropdown)* — Текст, отображаемый в шаблоне.
- `Image Border` *(Dropdown)* — Изображение, используемое в шаблоне.
- `Image Corner Radius` *(Number)* — Изображение, используемое в шаблоне.
- `Title Color` *(Color)* — Заголовок виджета или элемента.
- `Currency Position` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.

---

## 📌 Row

**Описание:**  
Горизонтальная строка с контентом — изображения, тексты или товары.

**Тип кампании:** `recs_widget`

**Переменные:**
- `Recommendation` *(Strategy)* — Параметр для настройки отображения или поведения элемента.
- `Currency Position` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Title` *(Text)* — Заголовок виджета или элемента.
- `url` *(ProductFeedProperty)* — Ссылка для перехода или действия.
- `Image_url` *(ProductFeedProperty)* — Изображение, используемое в шаблоне.
- `price` *(ProductFeedProperty)* — Параметр для настройки отображения или поведения элемента.
- `Name` *(ProductFeedProperty)* — Параметр для настройки отображения или поведения элемента.
- `Font Name` *(Text)* — Шрифт, используемый в тексте.
- `Title Color` *(Color)* — Заголовок виджета или элемента.
- `Text Align` *(Dropdown)* — Текст, отображаемый в шаблоне.
- `Product Image Border` *(Dropdown)* — Изображение, используемое в шаблоне.
- `Product Price` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Thausands Separator` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Decimal Separator` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Currency Symbol` *(Text)* — Параметр для настройки отображения или поведения элемента.

---

## 📌 Fire Event on Text Highlight (Desktop Only)

**Описание:**  
Трекинг выделения текста пользователем на десктопе. Используется для поведенческого анализа.

**Тип кампании:** `custom_code`

**Переменные:**
- `Event Name` *(Text)* — Событие, отправляемое системой при определённом действии.
- `Element to Watch` *(CssSelector)* — Параметр для настройки отображения или поведения элемента.

---

## 📌 Create a Cookie

**Описание:**  
Шаблон для установки cookie-файла по заданному правилу.

**Тип кампании:** `custom_code`

**Переменные:**
- `Cookie Name` *(Text)* — Параметр, связанный с cookie-файлом.
- `Cookie value` *(Text)* — Параметр, связанный с cookie-файлом.

---

## 📲 Countdown Bar

**Описание:**  
Тонкая горизонтальная панель с таймером.

**Тип кампании:** `dynamic_content`

**Переменные:**
- `Title` *(Text)* — Заголовок виджета или элемента.
- `Time Zone` *(Dropdown)* — Timezone doesn't consider daylight saving
- `Text Color` *(Color)* — Текст, отображаемый в шаблоне.
- `Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Year` *(Text)* — Дата и время, используемые для отсчёта или показа.
- `Month` *(Dropdown)* — Дата и время, используемые для отсчёта или показа.
- `Day` *(Dropdown)* — Дата и время, используемые для отсчёта или показа.
- `Time` *(Text)* — Дата и время, используемые для отсчёта или показа.

---

## 📲 Simple Image

**Описание:**  
Один статичный баннер без интерактива.

**Тип кампании:** `dynamic_content`

**Переменные:**
- `Image URL` *(Image)* — Изображение, используемое в шаблоне.
- `Open link in` *(Dropdown)* — Ссылка для перехода или действия.
- `Image Link` *(Text)* — Изображение, используемое в шаблоне.

---

## ⏳ Basic Popup

**Описание:**  
Базовый попап с изображением или текстом.

**Тип кампании:** `overlay`

**Переменные:**
- `Title` *(Text)* — Заголовок виджета или элемента.
- `Secondary Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Button URL` *(Text)* — Ссылка для перехода или действия.
- `Secondary Text and Button Fonts` *(Dropdown)* — Текст, отображаемый в шаблоне.
- `Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Text Color` *(Color)* — Текст, отображаемый в шаблоне.
- `Image` *(Image)* — Изображение, используемое в шаблоне.
- `Title Size` *(Dropdown)* — Заголовок виджета или элемента.
- `Title Font Weight` *(Dropdown)* — Заголовок виджета или элемента.
- `Title Font` *(Dropdown)* — Заголовок виджета или элемента.
- `Secondary Text Size` *(Dropdown)* — Текст, отображаемый в шаблоне.
- `Button Style` *(Dropdown)* — Настройка кнопки (текст, цвет, действие).

---

## ⏳ Image

**Описание:**  
Графический баннер с возможностью настройки внешнего вида.

**Тип кампании:** `overlay`

**Переменные:**
- `Image URL` *(Image)* — Изображение, используемое в шаблоне.
- `Open link in` *(Dropdown)* — Ссылка для перехода или действия.
- `Image Link` *(Text)* — Изображение, используемое в шаблоне.

---

## ⏳ Get Coupon

**Описание:**  
Блок с предложением и кнопкой получения купона.

**Тип кампании:** `overlay`

**Переменные:**
- `Main Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Secondary Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Offer` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Code Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Highlight Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Coupon Code` *(Text)* — Параметр для настройки отображения или поведения элемента.
- `Confirmation Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Error Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Button Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Text Color` *(Color)* — Текст, отображаемый в шаблоне.
- `Copy to Clipboard Button` *(Dropdown)* — Настройка кнопки (текст, цвет, действие).

---

## 🛎️ Social Proof

**Описание:**  
Виджет, отображающий действия других пользователей ('Товар купили 12 раз за час').

**Тип кампании:** `notification`

**Переменные:**
- `Highlighted Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Text` *(Text)* — Текст, отображаемый в шаблоне.
- `Product Performance` *(ProductPerformance)* — Параметр для настройки отображения или поведения элемента.
- `Fire Icon` *(Dropdown)* — Параметр для настройки отображения или поведения элемента.
- `Background Color` *(Color)* — Цветовая настройка элемента (фон, текст, кнопка).
- `Text Color` *(Color)* — Текст, отображаемый в шаблоне.

---

## 📌 Replace Inactive Tab Title

**Описание:**  
Меняет заголовок вкладки браузера, когда пользователь уходит с активного окна.

**Тип кампании:** `custom_code`

**Переменные:**
- `New title` *(Text)* — Заголовок виджета или элемента.
- `Animation Speed` *(Number)* — Animation duration in milliseconds
- `Inactivity Timeout` *(Number)* — Inactivity duration in milliseconds

---

## 📌 Fire Event

**Описание:**  
Шаблон для отправки кастомного события (например, при достижении условия на странице).

**Тип кампании:** `custom_code`

**Переменные:**
- `Event Name` *(Text)* — Событие, отправляемое системой при определённом действии.

---