Iframe (inline frame)

Опрос нужно показать прямо на вашей странице - не по ссылке, а внутри блока. Iframe (inline frame) - HTML-элемент, который встраивает одну веб-страницу в другую.

В поле iframe подставляете URL опроса - и форма отображается в вашем сайте, респондент не уходит на другой домен. Удобно для форм обратной связи, опросов после статьи, анкет в личном кабинете. В WebAsk код для встраивания опроса через iframe можно получить в настройках публикации. Связь с обратной связью - опрос в iframe сохраняет контекст страницы. Альтернативы - прямая ссылка и виджет (если сервис его даёт).

Iframe - "окно" с чужим контентом на вашей странице. Браузер загружает URL из iframe и рисует его в заданной области.

Определение

Iframe (inline frame) - элемент HTML, позволяющий встроить отдельный HTML-документ (страницу) внутрь текущей страницы. Задаётся тегом <iframe src="URL">. В атрибуте src указывают адрес встраиваемой страницы - например, ссылку на опрос. Размеры задают атрибутами width и height или через CSS. Используется для встраивания опросов, форм, карт, видео на свой сайт. Контент внутри iframe изолирован от родительской страницы (безопасность и стили). Связь с HTML, публикацией опросов.

Кратко: "страница внутри страницы" - вы показываете опрос в своём дизайне, не перенаправляя пользователя.

Зачем встраивать опрос через iframe

Респондент остаётся на вашем сайте - не уходит по ссылке, меньше отказов. Контекст страницы сохранён - опрос рядом с статьёй, продуктом, формой заявки. Единый визуальный контекст - страница ваша, блок опроса встроен. Удобно для лендингов, блогов, личных кабинетов. Минус - нужно задать высоту: если опрос длинный или многошаговый, iframe может быть высоким или потребуется прокрутка внутри фрейма.

Как встроить опрос в iframe

Возьмите ссылку на опрос (публичная ссылка из конструктора). Вставьте её в атрибут src тега iframe. Пример:

<iframe src="https://webask.io/s/xxxxx" width="100%" height="500" frameborder="0"></iframe>

Ширина и высота. width и height - в пикселях или процентах. 100% по ширине - опрос тянется на всю колонку. Высота 400-600 px типична для короткого опроса; для длинного ставьте больше (800-1000) или используйте адаптивную высоту через скрипт, если сервис поддерживает postMessage. frameborder="0" убирает рамку вокруг фрейма.

Код вставки обычно есть в разделе "Публикация" или "Встроить" в сервисе опросов. В WebAsk код iframe можно скопировать в настройках публикации опроса - подставьте его в шаблон сайта или в блок вашей CMS. Подробнее - в справке по публикации опроса.

Iframe и безопасность

Браузер изолирует контент в iframe: страница-родитель и страница во фрейме - разные источники (same-origin policy). Скрипты родителя не имеют доступа к содержимому iframe с другого домена, и наоборот. Это защищает данные. Для встраивания опроса с чужого домена (например, webask.io) сервер опроса должен разрешить отображение в iframe - заголовок X-Frame-Options или Content-Security-Policy. Если сервис запрещает встраивание - iframe будет пустым или покажет ошибку. Современные сервисы опросов обычно разрешают iframe для своих форм.

Адаптивность и мобильные

На мобильных фиксированная ширина в пикселях может вылезать за экран. Используйте width="100%" и ограничьте контейнер стилями страницы (max-width). Высота: на телефоне длинный опрос удобнее с большой высотой iframe или с прокруткой внутри. Часть сервисов отдаёт адаптивную страницу опроса - она сама подстраивается под ширину iframe. Проверяйте отображение на телефоне после вставки.

Iframe vs прямая ссылка vs виджет

Iframe. Опрос встроен в вашу страницу. Плюсы: пользователь не уходит. Минусы: нужно место на странице, настройка высоты.

Прямая ссылка. Респондент переходит по URL опроса. Плюсы: просто, без кода. Минусы: уход с сайта, иногда ниже completion rate из-за смены контекста.

Виджет (popup, плавающая кнопка). Опрос открывается во всплывающем окне или панели. Часто реализуется через iframe внутри виджета. Плюсы: не занимает место до клика. Минусы: часть пользователей не замечает или закрывает.

Выбор зависит от цели: опрос после статьи - логичен iframe в конце; сбор обратной связи с любой страницы - виджет или ссылка в шапке.

Дополнительные атрибуты iframe

title - описание фрейма для доступности (скринридеры). sandbox - ограничения для контента во фрейме (например, запрет скриптов). Для опросов обычно не нужен - сервис опросов управляет своей страницей. loading="lazy" - отложенная загрузка iframe при прокрутке; для опроса внизу страницы может ускорить загрузку. Если опрос выше сгиба - лучше без lazy, чтобы форма была готова сразу.

Когда iframe не лучший выбор

Очень длинный опрос на одной странице - высота iframe станет огромной, страница "прыгает". Рассмотрите прямую ссылку или пошаговый виджет. Строгие корпоративные файрволы иногда блокируют контент из iframe с внешних доменов - тогда опрос по ссылке надёжнее. Нужна полная кастомизация под ваш дизайн (шрифты, цвета внутри опроса) - iframe показывает страницу сервиса; глубокую кастомизацию смотрите в настройках самого сервиса опросов.

Типичные промахи

Слишком маленькая высота. Опрос обрезается, респондент не видит вопросы. Поставьте высоту с запасом или проверьте на реальном опросе.

Жёсткая ширина в px на мобильных. На узком экране iframe уходит за границу. Используйте проценты или адаптивные единицы (vw, max-width).

Неверный или устаревший URL. Опрос перенесли, ссылку изменили - iframe показывает 404. Проверяйте ссылку после публикации.

Блокировка iframe сайтом опросов. Если сервис не разрешает встраивание (X-Frame-Options: DENY), iframe не отобразит опрос. Тогда только прямая ссылка или виджет с переходом.

Интеграция с аналитикой

События внутри iframe (отправка формы, переход по шагам) могут не попадать в аналитику родительской страницы - домен другой. Передача событий в родительское окно возможна через postMessage, если сервис опросов это поддерживает. Либо смотрите статистику в личном кабинете сервиса опросов: сколько заходов, сколько завершили. Связь с response rate и долей отказов - если iframe на своей странице даёт больший completion rate, чем ссылка, это видно по отчётам.

В WebAsk: код для встраивания

Создайте опрос, откройте раздел публикации. Выберите вариант "Встроить на сайт" или "Iframe" - сервис сформирует готовый код с вашей ссылкой на опрос. Скопируйте код и вставьте в нужное место страницы (HTML-блок в CMS, шаблон). При необходимости измените ширину и высоту под ваш макет. Опрос будет открываться внутри вашего HTML-документа. Ответы сохраняются в WebAsk, выгрузка и отчёты - как при обычной ссылке. Если ваш сайт на своём домене - опрос в iframe по-прежнему загружается с домена сервиса опросов; данные передаются по защищённому соединению.

Iframe (inline frame) - HTML-элемент для встраивания одной страницы в другую. Используется для показа опроса на своём сайте без перехода по ссылке. Задаётся src, width, height. В WebAsk код iframe доступен в настройках публикации опроса.