---
title: "Виджет опросов в Shadow DOM: почему iframe устарел"
description: "iframe весит 200+ КБ, ломает поисковую индексацию и плохо адаптируется. Shadow DOM-виджет это современный путь встраивания. Разбираем технически."
url: https://askyo.ru/blog/widget-na-saite
lang: ru
last_modified: 2026-05-12
---

[Все статьи](https://askyo.ru/blog)

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

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

Команда аскио · 12 мая 2026 г. · #разработчикам#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>` и **attach`Shadow`** к нему с режимом `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, и это правильно.

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

[Документация виджета](https://askyo.ru/embed): установка, API, события, примеры под React, Vue, Тильду, Битрикс24.

## Это уже есть в продукте

- [Виджет для разработчиков](https://askyo.ru/embed)
- [Опрос на сайт](https://askyo.ru/opros-na-sayt)

## Читайте также

- [Webhook + AmoCRM + Telegram: обработка опросов Ответ из опроса должен мгновенно превращаться в задачу, лида или уведомление. Показываем три рабочих сценария на Webhook без кода.](https://askyo.ru/blog/webhook-amocrm-telegram)
- [NPS без вранья: как мерить лояльность честно Net Promoter Score можно посчитать за 30 секунд, но 80% компаний делают это с подвохами. Разбираем формулу, корректные выборки и подводные камни.](https://askyo.ru/blog/nps-bez-vrania)
- [Google Forms и 152-ФЗ: почему это плохая комбинация Google Forms бесплатен и удобен, но серверы Google в США. Что говорит 152-ФЗ и какие риски берёт бизнес, использующий Forms для опросов.](https://askyo.ru/blog/152-fz-i-google-forms)

Поделиться: [Telegram](https://t.me/share/url?url=https%3A%2F%2Faskyo.ru%2Fblog%2Fwidget-na-saite\&text=%D0%92%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%20%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D0%BE%D0%B2%20%D0%B2%20Shadow%20DOM%3A%20%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20iframe%20%D1%83%D1%81%D1%82%D0%B0%D1%80%D0%B5%D0%BB) [X](https://twitter.com/intent/tweet?url=https%3A%2F%2Faskyo.ru%2Fblog%2Fwidget-na-saite\&text=%D0%92%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%20%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D0%BE%D0%B2%20%D0%B2%20Shadow%20DOM%3A%20%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20iframe%20%D1%83%D1%81%D1%82%D0%B0%D1%80%D0%B5%D0%BB) [Email](mailto:?subject=%D0%92%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%20%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D0%BE%D0%B2%20%D0%B2%20Shadow%20DOM%3A%20%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20iframe%20%D1%83%D1%81%D1%82%D0%B0%D1%80%D0%B5%D0%BB\&body=https%3A%2F%2Faskyo.ru%2Fblog%2Fwidget-na-saite)