Как работает виджет

Виджет evntflo — это отдельная JavaScript-сборка, которая загружается с evntflo.com/widget.js и рендерится в Shadow DOM. Благодаря Shadow DOM стили виджета изолированы от стилей вашего сайта — никаких конфликтов CSS.

Форма автоматически синхронизируется с платформой: изменения в конструкторе (новые поля, изменение билетов) появляются в виджете без необходимости обновлять код на сайте.

Базовый код виджета

<!-- Контейнер для формы -->
<div data-evntflo-widget="ВАШ_EVENT_ID"></div>

<!-- Скрипт виджета (один раз на страницу) -->
<script
  src="https://evntflo.com/widget.js"
  async
  defer
></script>

Замените ВАШ_EVENT_ID на UUID вашего события — он виден в URL события в кабинете или в разделе «Виджет».

Два режима отображения

Встроенная форма (Inline)

Форма отображается прямо на странице в месте размещения контейнера data-evntflo-widget. Участник заполняет её без всплывающих окон.

Форма открывается в overlay при нажатии на кнопку. Добавьте атрибут data-evntflo-popup к любой кнопке на вашем сайте:

<button data-evntflo-popup="ВАШ_EVENT_ID">
  Зарегистрироваться
</button>

Скрипт виджета при этом тот же.

Кастомизация внешнего вида

На тарифах Pro и выше доступна кастомизация через CSS-переменные. Добавьте в HTML или CSS вашего сайта:

:root {
  --evntflo-primary: #4F46E5;
  --evntflo-radius: 8px;
  --evntflo-font: 'Inter', sans-serif;
}

Доступные CSS-переменные виджета перечислены в разделе Виджет → Кастомизация в кабинете события.

На тарифе Free ватермарк «Powered by evntflo» присутствует всегда и не может быть убран технически.

Ограничения источников (CORS)

На тарифах Pro и выше для безопасности настройте список разрешённых доменов. Это защищает вашу форму от использования на посторонних сайтах.

Подробнее — Настройка CORS.

Совместимые платформы

Виджет работает на любой платформе с поддержкой HTML:

Tilda, Webflow, Wix, Framer
WordPress, Squarespace
Обычные HTML-страницы
React, Vue, Angular приложения

Специфические инструкции для популярных конструкторов — Установка на Tilda, Webflow, Wix.

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