Встраивание виджета

Добавьте виджет на любой сайт за 30 секунд. Shadow DOM изоляция — стили не конфликтуют.

1. Быстрый старт

Одна строка — офферы, тема и триггеры загружаются с сервера автоматически.

<div id="gift-widget"></div>
<script src="https://giftfloo.ru/widget/gift-carousel.iife.js"
        data-api-key="ВАШ_API_KEY"></script>

Расширенная настройка

Перезапишите серверные параметры локально — тему, формат, триггер показа.

<div id="gift-widget"></div>
<script src="https://giftfloo.ru/widget/gift-carousel.iife.js"></script>
<script>
  GiftCarousel.init({
    container: '#gift-widget',
    apiKey: 'ВАШ_API_KEY',
    theme: 'violet',       // 'violet' | 'clean'
    mode: 'inline',        // 'inline' | 'fab' | 'bar' | 'slidein'
    brandColor: '#8b5cf6', // цвет бренда — палитра генерится автоматически
    trigger: 'scroll',     // 'immediate' | 'exit-intent' | 'scroll' | 'time' | 'visit'
    triggerConfig: {
      scrollPercent: 50,   // показать после 50% скролла
    },
  });
</script>

2. Форматы виджета

inlineКарусель

Встраивается прямо в страницу. Для раздела «Подарки».

fabFAB + Sidebar

Плавающая кнопка → боковая панель с офферами.

barFloating Bar

Промо-полоса сверху или снизу → боковая панель.

slideinSlide-In

Всплывающее окно в углу через N секунд.

3. Темы

violet

Фиолетовый градиент, glassmorphic карточки

clean

Белый фон, фиолетовые акценты — нейтральный

Передайте brandColor для автоматической замены фиолетового на ваш цвет бренда.

4. Триггеры показа

Контролируйте когда виджет появляется на странице.

immediateСразу

Виджет видно при загрузке страницы.

exit-intentExit Intent

Когда курсор уходит к закрытию вкладки.

scrollПо скроллу

После прокрутки N% страницы (по умолчанию 50%).

timeПо времени

Через N секунд на странице (по умолчанию 15 сек).

visitПо визитам

Начиная с N-го визита пользователя (по умолчанию 2-й).

5. Параметры конфигурации

Параметр	Тип	По умолчанию	Описание
`apiKey`	string	—	API-ключ — офферы, тема и триггеры загружаются автоматически
`container`	string \| HTMLElement	'#gift-widget'	CSS-селектор или DOM-элемент
`apiBaseUrl`	string	'https://giftfloo.ru'	Базовый URL API (если self-hosted)
`theme`	'violet' \| 'clean'	С сервера	Визуальная тема (перезаписывает серверную)
`mode`	'inline' \| 'fab' \| 'bar' \| 'slidein'	С сервера	Формат виджета (перезаписывает серверный)
`brandColor`	string	#8b5cf6	HEX цвет бренда — палитра генерится автоматически
`trigger`	'immediate' \| 'exit-intent' \| 'scroll' \| 'time' \| 'visit'	'immediate'	Когда показать виджет
`triggerConfig`	object	—	scrollPercent, timeDelay, visitCount
`autoplay`	boolean	false	Автопрокрутка карусели
`autoplayInterval`	number	4000	Интервал автопрокрутки (мс)
`showDots`	boolean	true	Показывать точки навигации
`showArrows`	boolean	true	Показывать стрелки навигации
`fabPosition`	'bottom-right' \| 'bottom-left'	'bottom-right'	Позиция FAB кнопки
`barPosition`	'top' \| 'bottom'	'top'	Позиция Floating Bar
`barText`	string	Автогенерация	Текст Floating Bar
`barCtaLabel`	string	'Посмотреть'	Текст кнопки Floating Bar
`slideInDelay`	number	15000	Задержка появления Slide-In (мс)
`yandexMetrikaCounterId`	string \| number	—	ID счётчика Яндекс Метрики — цели giftfloo_* отправляются автоматически
`items`	GiftItem[]	—	Ручной массив офферов (если без apiKey)
`onCtaClick`	(item) => void	—	Обработчик клика по CTA (вместо открытия ctaUrl)

6. Структура оффера (GiftItem)

Только если используете ручной массив items вместо apiKey.

Поле	Тип	Обязательно	Описание
`id`	string	Да	Уникальный ID оффера
`logo`	string	Да	URL логотипа (SVG/PNG)
`title`	string	Да	Название бренда/оффера
`headline`	string	Да	Заголовок предложения
`description`	string	Да	Описание предложения
`ctaLabel`	string	Да	Текст кнопки
`ctaUrl`	string	Нет	URL при клике на кнопку
`badge`	string	Нет	Текст бейджа (Хит, Новинка, Акция)
`badgeColor`	string	Нет	HEX цвет бейджа
`promoCode`	string	Нет	Промокод — копируемый блок в модалке, автокопирование при клике CTA
`videoUrl`	string	Нет	URL видео для карточки оффера

7. Мультивиджет (bundle)

Несколько виджетов на одной странице — каждый со своим apiKey и настройками.

GiftCarousel.bundle({
  widgets: [
    { apiKey: 'KEY_1', mode: 'inline', container: '#widget-1' },
    { apiKey: 'KEY_2', mode: 'fab' },
    { apiKey: 'KEY_3', mode: 'bar', barPosition: 'top' },
  ]
});

Файлы

/widget/gift-carousel.iife.js — IIFE бандл (~61KB)/widget/gift-carousel.mjs — ES Module (~75KB)

Посмотрите виджет в действии

Все форматы, темы и white-label цвета на демо-странице

Открыть демо