Инструкция по установке фрейма конфигуратора на сайт партнера

Установка фрейма 3D-конфигуратора на сайт партнёра

1. Базовый код для вставки

Что изменилось по сравнению со старым кодом и зачем:

• width="100%" вместо фиксированных 600px — фрейм подстраивается под ширину блока/колонки на любом устройстве, а не обрезается на мобильных.
• Обёртка <div> с max-width — ограничивает ширину на больших экранах, чтобы конфигуратор не растягивался на всю страницу.
• height="900" — увеличенная высота, так как конфигуратор содержит несколько шагов и может не помещаться в 800px без внутренней прокрутки.
• title="…" — обязателен для доступности (screen readers) и часто требуется CMS-конструкторами при валидации кода.
• style="border:0" — убирает рамку фрейма (замена устаревшего атрибута frameborder).

Важно про высоту: iframe не умеет автоматически подстраивать высоту под содержимое. Если на каком-то шаге конфигуратора часть интерфейса обрезается — увеличьте height (например, до 1000–1100px) под конкретный сайт.

2. Куда вставлять код

• В большинстве конструкторов сайтов (Tilda, WordPress, Bitrix, uCoz и т.д.) нужен блок/виджет с названием «HTML-код», «Произвольный код» или «Embed / iframe».
• Не вставляйте код в текстовый/визуальный редактор (WYSIWYG) — теги <iframe> и <div> в нём обычно экранируются и отображаются как текст, а не как рабочий блок.
• После вставки код нужно сохранить и опубликовать страницу — предпросмотр в редакторе не всегда показывает iframe корректно.

3. Проверка после установки

1. Откройте страницу в режиме инкогнито (чтобы исключить кеш браузера).
2. Проверьте отображение на десктопе и на мобильном (или через режим эмуляции устройства в браузере).
3. Пройдите весь сценарий конфигуратора до конца — убедитесь, что ни один шаг не обрезается по высоте.
4. Убедитесь, что сайт партнёра открывается по https — при http браузер может блокировать загрузку фрейма как «небезопасный контент».

⚠️ Особенности установки на Tilda

Проблема	Решение
Не могут найти, куда вставить код	Нужен блок T123 «HTML-код». Он находится не в основных категориях блоков, а в разделе «Прочее» (Other) при добавлении нового блока на странице.
Блок «HTML-код» недоступен / серый	Вставка произвольного HTML/JS-кода в Tilda доступна начиная с платного тарифа (Personal и выше). На бесплатном тарифе Free этот блок партнёру не покажется или будет заблокирован — нужно уточнить тариф сайта у партнёра.
Конфигуратор «прижат» к левому краю или обрезан по ширине	В настройках блока T123 нужно выставить ширину блока «На всю ширину экрана» / выключить ограничение по контейнеру (вкладка «Контент» → ширина блока) — иначе Tilda ограничивает ширину контентным контейнером (обычно ~1200px с отступами).
На мобильной версии фрейм выглядит криво или обрезан	Tilda хранит отдельные настройки для мобильной версии страницы. Нужно переключиться в редакторе в режим «Моб.» (иконка телефона вверху) и отдельно проверить/поправить высоту блока.
После вставки кода ничего не изменилось на сайте	Изменения нужно не просто сохранить, а нажать «Опубликовать страницу» (Publish). Плюс у Tilda есть CDN-кеширование — изменения могут проявиться с задержкой в несколько минут; можно ускорить жёстким обновлением страницы (Ctrl+F5 / Cmd+Shift+R).
Часть кода «исчезает» после вставки	Убедитесь, что код вставлен именно в блок T123, а не в обычный текстовый блок — визуальный редактор Tilda интерпретирует < и > как текст и портит код.

Куда именно нажимать в Tilda:

1. На нужной странице нажать «+ Добавить блок».
2. В библиотеке блоков выбрать категорию «Прочее».
3. Выбрать блок T123 «HTML-код» и добавить его на страницу.
4. Открыть настройки блока, вставить код из шага 1 в поле кода.
5. Проверить ширину блока на вкладке «Контент» (сделать «на всю ширину» при необходимости).
6. Переключиться в мобильный режим и проверить/поправить высоту.
7. Сохранить и нажать «Опубликовать».

Если после всех шагов фрейм всё равно не отображается корректно — направьте скриншот/видео и ссылку на страницу, это ускорит диагностику.

Открыть конфигуратор

Не нашли ответ?