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

Виджет опросов в 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.

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