Iframe — это способ встроить квиз прямо в страницу сайта, как отдельный блок. В отличие от PopUp, квиз не всплывает поверх страницы, а живёт внутри неё: пользователь видит его сразу, без клика. Такой формат подходит, когда квиз должен быть частью контента — например, на лендинге или в статье.
Два куска кода: SCRIPT и DIV
Для установки квиза на сайт через iframe необходимо добавить две строчки кода. SCRIPT вставляется в любую часть сайта один раз. При внесении изменений менять код не нужно.
Блок DIV вставляется в тех местах, где необходимо вывести квиз. Размеры квиза управляются внешним блоком и могут регулироваться в ваших файлах стиля. Вы также можете задать высоту и ширину iframe через редактор.
Куда вставлять SCRIPT
SCRIPT вставляется в любую часть сайта один раз — например, в шаблон, в подвал или в отдельный блок HTML. Главное, чтобы он был на всех страницах, где должен работать iframe. При внесении изменений в редакторе код менять не нужно — изменения применяются сразу.
Куда вставлять DIV
DIV вставляется именно в том месте, где должен появиться квиз. Это может быть блок в лендинге, страница с описанием услуги или статья в блоге. Если вы хотите показать квиз на нескольких страницах — добавьте DIV в каждое место, где он нужен. SCRIPT при этом остаётся один.
Размеры и стили iframe
Размеры квиза управляются внешним блоком и могут регулироваться в ваших файлах стиля. Вы также можете задать высоту и ширину iframe через редактор Matomba. Это удобно, когда квиз должен занимать определённую часть страницы или подстраиваться под сетку сайта.
Мобильная версия: кнопка вместо iframe
На мобильных устройствах мы рекомендуем показывать кнопку вместо iframe, чтобы избежать конфликта с прокрутками экрана на вашем сайте и в квизе. При клике по кнопке будет активировано PopUp-окно. Чтобы отключить этот режим, отключите опцию «Кнопка на телефонах».
Как проверить, что iframe работает
- Откройте сайт в режиме инкогнито — так вы увидите страницу без кэша.
- Проверьте, что SCRIPT размещён на нужной странице, а DIV — в нужном месте.
- Убедитесь, что квиз отображается и корректно работает на десктопе.
- Проверьте мобильную версию: отображается ли кнопка вместо iframe.
- Убедитесь, что высота и ширина iframe соответствуют задуманному.
Частые ошибки при встраивании через iframe
- Забывают разместить SCRIPT — iframe не отображается.
- Вставляют SCRIPT только на одну страницу — на остальных iframe не работает.
- Не настраивают высоту и ширину iframe — блок выглядит обрезанным или слишком маленьким.
- Оставляют iframe на мобильных без кнопки — возникает конфликт с прокруткой.
- Отключают опцию «Кнопка на телефонах», не проверив, как iframe ведёт себя на мобильных.
- Меняют код при изменениях в редакторе — этого делать не нужно.
Коротко: что делать при встраивании через iframe
- Разместите SCRIPT на всех страницах, где должен работать iframe.
- Вставьте DIV в том месте, где должен появиться квиз.
- Настройте высоту и ширину iframe через редактор или файлы стиля.
- Оставьте опцию «Кнопка на телефонах» включённой, чтобы избежать конфликта с прокруткой.
- Проверьте работу на десктопе и мобильных.
