аскио
Войти Создать опрос
Все статьи

Виджет опросов в Shadow DOM: почему iframe устарел

iframe весит 200+ КБ, ломает поисковую индексацию и плохо адаптируется. Shadow DOM-виджет – современный путь встраивания. Разбираем технически.

Команда аскио · · #разработчикам#embed#технологии

Когда нужно встроить «опрос на сайт», конструкторы 2010-х предлагают <iframe src="...">. Это работает, но мы прошли мимо 2010-х. Разбираемся, почему виджет в Shadow DOM объективно лучше – и почему мы выбрали именно этот путь.

Что не так с iframe-виджетом

Размер. iframe – это отдельная страница со своим HTML, CSS, JS. У Typeform-виджета грузится ~200 КБ только для отрисовки одного вопроса. У WebAsk – около 180 КБ. Это плюс к вашему сайту.

Индексация. Поисковики и AI-краулеры не видят содержимое iframe в контексте вашей страницы. Опрос индексируется отдельно или вообще не индексируется. Для NPS не критично, для лидген-квиза – потеря трафика.

Стили и адаптив. iframe – это прямоугольник фиксированной высоты. Адаптация под мобильные – танец с postMessage и resizeObserver. На малых экранах вылезает скролл внутри iframe.

Доступность. Скринридерам и keyboard-юзерам приходится «прыгать» внутрь iframe – это разрыв контекста.

Что даёт Shadow DOM

Shadow DOM – стандарт W3C, по которому ваш виджет рендерится внутри DOM страницы, но с изолированной CSS-областью. Получаете лучшее из двух миров:

  • Виджет – часть страницы. Индексируется Google и AI-краулерами.
  • CSS изолирован. Не ломает ваш дизайн, ваш CSS не ломает виджет.
  • Размер – только нужный JS, никакого дублирующего HTML/CSS. 35 КБ gzip у аскио.
  • Адаптив – нативный CSS внутри. Размер контейнера = размер виджета.
  • A11y – внутренние элементы видны скринридеру как часть страницы.

Как это выглядит в коде

<script src="https://cdn.askyo.ru/widget.js" async></script>
<div data-askyo="nps-feedback-v3"></div>

После загрузки скрипт находит <div data-askyo> и attachShadow к нему с режимом closed. Внутри Shadow Root рендерится изолированный React-инстанс. Ваш сайт даже не знает, что внутри React (это деталь реализации).

Что нужно знать перед внедрением

  • Браузеры: Shadow DOM поддерживается во всех современных, включая Safari 14+. Для IE 11 – нужен полифилл, но IE 11 уже отстрелили.
  • CSS-токены: если хотите, чтобы виджет наследовал CSS-переменные вашего сайта (—accent, —radius) – он это делает автоматически.
  • Тестирование: Playwright и Cypress видят Shadow DOM «из коробки» через shadow_root.locator().

Когда iframe всё-таки нужен

Только в одном кейсе: жёсткие политики безопасности, требующие полной изоляции виджета от страницы (банкинг, медицинские формы с PII в полях). В таком случае аскио тоже умеет – у нас есть параметр isolation: 'iframe'. Но по умолчанию – Shadow DOM, и это правильно.

Дальше – практика

Документация виджета – установка, API, события, примеры под React, Vue, Тильду, Битрикс24.

Тарифы Создать опрос