Виджет не грузится или стили ломаются

Быстрая диагностика

Перед разбором конкретных проблем выполните базовую проверку:

1. Откройте страницу с виджетом.
2. Нажмите F12 (или Cmd+Option+I на Mac) → вкладка Console.
3. Найдите ошибки, связанные с evntflo, widget.js, CSP или CORS.
4. Проверьте вкладку Network — найдите запрос к evntflo.com/widget.js и убедитесь, что статус 200.

Проблема: виджет не загружается вообще

Причина 1: Content Security Policy (CSP) блокирует скрипт

Симптомы:

• Форма не появляется.
• В консоли: Refused to load the script 'https://evntflo.com/widget.js' because it violates the following Content Security Policy directive: "script-src ...".

Решение:

Добавьте evntflo.com в директиву script-src вашей CSP-политики:

script-src 'self' https://evntflo.com;

Если вы используете мета-тег:

<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' https://evntflo.com;">

Также может потребоваться добавить connect-src https://evntflo.com для API-запросов виджета и style-src 'unsafe-inline' https://evntflo.com для стилей.

Причина 2: Неверный eventId

Симптомы:

• Скрипт загружается (200 в Network), но форма не рендерится.
• В консоли: [evntflo] Event not found или [evntflo] Invalid eventId format.

Решение:

1. Откройте событие в кабинете evntflo.
2. Перейдите во вкладку Регистрация → Виджет для сайта.
3. Скопируйте правильный UUID из поля или из готового кода виджета.
4. Убедитесь, что атрибут data-evntflo-widget содержит именно UUID без пробелов и лишних символов.

<!-- Правильно -->
<div data-evntflo-widget="550e8400-e29b-41d4-a716-446655440000"></div>

<!-- Неправильно -->
<div data-evntflo-widget="ВАШ_EVENT_ID"></div>

Причина 3: Скрипт не подключён или подключён дважды

Симптомы:

• Контейнер div на странице есть, но форма не появляется.
• Нет ошибок в консоли, нет запроса к widget.js в Network.

Решение:

Убедитесь, что тег <script> присутствует на странице и загружается ровно один раз:

<script src="https://evntflo.com/widget.js" async defer></script>

Некоторые конструкторы сайтов (Tilda, Wix) требуют добавлять скрипты в специальные блоки. См. Установка на Tilda, Webflow, Wix.

Проблема: CORS-ошибки

Симптомы:

• Форма начинает загружаться, но данные (поля, билеты) не подтягиваются.
• В консоли: Access to fetch at 'https://evntflo.com/api/...' from origin 'https://your-site.com' has been blocked by CORS policy.

Решение:

На тарифах Pro и выше необходимо добавить домен вашего сайта в список разрешённых источников:

1. В кабинете: событие → Регистрация → Виджет → Разрешённые домены.
2. Добавьте домен вашего сайта (например, example.com или *.example.com).
3. Нажмите Сохранить.

Изменения вступают в силу в течение минуты (после инвалидации кэша widget:origins:{eventId}).

На тарифе Free CORS-ограничения не применяются — виджет работает на любом домене.

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

Проблема: стили виджета ломаются

Наследуемые CSS-свойства

Shadow DOM изолирует большинство стилей, но некоторые CSS-свойства наследуются через границу Shadow DOM:

• font-family, font-size, line-height
• color
• direction, text-align
• visibility

Если ваш CSS-reset задаёт агрессивные значения на body или *, это может повлиять на виджет.

Решение:

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

:root {
  --evntflo-font: 'Inter', sans-serif;
  --evntflo-text: #18181B;
}

Контейнер виджета сжат или невидим

Симптомы:

• Виджет отображается высотой 0 или шириной 0.
• Форма обрезана.

Решение:

Проверьте, что родительский элемент контейнера data-evntflo-widget не имеет:

• overflow: hidden с фиксированной высотой
• display: none или visibility: hidden
• max-height: 0 или height: 0
• position: fixed / absolute без заданных размеров

Контейнеру виджета нужна свободная ширина минимум 320px.

Проблема: отображается старая версия формы

Симптомы:

• Вы обновили поля или билеты в конструкторе, но в виджете на сайте видна старая версия.

Решение:

1. Кэш браузера. Нажмите Ctrl+Shift+R (или Cmd+Shift+R на Mac) для жёсткой перезагрузки.
2. Кэш CDN / хостинга. Если ваш сайт за Cloudflare или аналогичным CDN, очистите кэш для страницы с виджетом.
3. Redis-кэш evntflo. Конфигурация виджета кэшируется с TTL 60 секунд. Если прошло более минуты, а изменения не появились — обратитесь в поддержку.

Скрипт widget.js загружается с заголовком Cache-Control: no-cache — он всегда свежий. Но конфигурация формы (поля, билеты, опции) кэшируется на стороне evntflo.

Проблема: виджет не работает в popup-режиме

Симптомы:

• Кнопка с data-evntflo-popup не открывает форму при нажатии.

Решение:

1. Убедитесь, что скрипт widget.js загружен на странице.
2. Проверьте, что атрибут data-evntflo-popup содержит корректный UUID события.
3. Если кнопка добавлена динамически (через JS-фреймворк), убедитесь, что она присутствует в DOM к моменту инициализации виджета, или вызовите window.evntflo?.refresh() после добавления.

Ошибки в консоли: справочник

Всё ещё не работает

Если после всех проверок проблема сохраняется:

1. Сделайте скриншот ошибок в консоли (вкладка Console).
2. Скопируйте URL страницы, на которой установлен виджет.
3. Укажите браузер и его версию.
4. Отправьте всё в поддержку через кабинет (Помощь → Написать в поддержку) или на support@evntflo.com.