Можно ли кастомизировать виджет на бесплатном тарифе?

Нет. На тарифе Free виджет отображается в стандартном стиле evntflo с водяным знаком. Кастомизация CSS-переменных доступна начиная с тарифа Pro.

Почему мои CSS-стили с сайта не влияют на виджет?

Виджет рендерится внутри Shadow DOM — это изолированная среда, которая не наследует стили хост-страницы. Для стилизации используйте CSS-переменные evntflo.

Где посмотреть результат кастомизации до публикации?

В кабинете события откройте Регистрация → Виджет → Кастомизация. Справа отображается предпросмотр формы с вашими настройками в реальном времени.

Кастомизация виджета

Принцип работы

Виджет evntflo рендерится в Shadow DOM — изолированной области, в которую не проникают стили вашего сайта. Это гарантирует, что форма всегда выглядит корректно. Обратная сторона: обычные CSS-правила вашего сайта не могут повлиять на виджет напрямую.

Для брендирования используются CSS custom properties (CSS-переменные). Они передаются через границу Shadow DOM и позволяют управлять цветами, шрифтами и скруглениями.

Доступные CSS-переменные

Задайте переменные в CSS вашего сайта или прямо в атрибуте style контейнера:

:root {
  /* Основной цвет (кнопки, ссылки, акценты) */
  --evntflo-primary: #4F46E5;

  /* Цвет текста на кнопках */
  --evntflo-primary-foreground: #FFFFFF;

  /* Фон формы */
  --evntflo-bg: #FFFFFF;

  /* Основной цвет текста */
  --evntflo-text: #18181B;

  /* Цвет второстепенного текста */
  --evntflo-text-muted: #71717A;

  /* Цвет границ полей ввода */
  --evntflo-border: #E4E4E7;

  /* Радиус скругления (кнопки, поля, карточки) */
  --evntflo-radius: 8px;

  /* Шрифт */
  --evntflo-font: 'Inter', sans-serif;

  /* Цвет ошибок валидации */
  --evntflo-error: #EF4444;

  /* Цвет успешных состояний */
  --evntflo-success: #22C55E;
}

Все переменные опциональны. Если вы не задаёте какую-то из них, виджет использует значение по умолчанию.

Настройка через кабинет

Способ без кода — настройте всё в интерфейсе evntflo:

Откройте событие в кабинете.
Перейдите на вкладку Регистрация → раздел Виджет для сайта.
Нажмите Кастомизация.
Выберите цвета, шрифт и скругления через визуальные контролы.
Справа отображается предпросмотр — форма обновляется в реальном времени.
Нажмите Сохранить — изменения применятся ко всем встроенным виджетам этого события.

Кабинет генерирует готовый CSS-код, который вы также можете скопировать и вставить на сайт вручную.

Настройка через код

Если вам нужен более тонкий контроль, задайте CSS-переменные прямо на странице:

Вариант 1: Глобально через :root

:root {
  --evntflo-primary: #0D9488;
  --evntflo-radius: 12px;
  --evntflo-font: 'Montserrat', sans-serif;
}

Вариант 2: На контейнере виджета

<div
  data-evntflo-widget="ВАШ_EVENT_ID"
  style="--evntflo-primary: #0D9488; --evntflo-radius: 12px;"
></div>

Второй вариант удобен, если на странице несколько виджетов или вы не хотите затрагивать глобальные стили.

Вариант 3: Подключение шрифта

Если вы используете нестандартный шрифт, подключите его на хост-странице через <link> или @font-face, затем укажите в переменной:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">

:root {
  --evntflo-font: 'Montserrat', sans-serif;
}

Shadow DOM наследует CSS-переменные от хост-страницы, но шрифт должен быть загружен на уровне документа.

Shadow DOM: что изолировано, а что нет

Проходит через Shadow DOM	Не проходит
CSS custom properties (`--evntflo-*`)	Обычные CSS-правила (`.class`, `#id`)
Загруженные шрифты (`@font-face`)	Селекторы по тегам (`input`, `button`)
`color-scheme`, `direction`	Tailwind-классы, Bootstrap-стили

Это означает, что стили вашего сайта никогда не сломают виджет, а виджет не повлияет на стили вашего сайта.

Тарифные ограничения

Тариф	Кастомизация	Ватермарк
Free	Недоступна. Стандартный стиль evntflo	Всегда показывается
Pro	Полная кастомизация CSS-переменных	Убран
Business	Полная кастомизация + приоритетная поддержка	Убран
Enterprise	Полная кастомизация + white-label	Убран

Подробнее о ватермарке — Водяной знак «Powered by evntflo».

Советы

Проверяйте контрастность: цвет кнопки (--evntflo-primary) должен давать контраст не менее 4.5:1 с цветом текста на ней (--evntflo-primary-foreground).
Тестируйте форму в тёмной теме браузера, если ваш сайт поддерживает тёмный режим.
Указывайте fallback-шрифт в --evntflo-font на случай, если веб-шрифт не загрузится.
После сохранения кастомизации в кабинете Redis-кэш виджета (widget:config:{eventId}) инвалидируется автоматически — изменения вступают в силу в течение нескольких секунд.

Частые вопросы

Похожие статьи