Встраивание на сайты
Разместите интерактивный 3D-проект на любом сайте, который поддерживает iframe.
Что такое встраивание?
Встраивание помещает ваш проект i3Dify внутрь другого сайта. Посетители пользуются проектом, не уходя со страницы.
- Проект появляется прямо в макете страницы
- Его можно вращать, приближать и нажимать, как на его собственной странице
- Без новых вкладок и всплывающих окон
- Работает на любом сайте, который поддерживает iframe
Как получить код для встраивания
- Откройте проект в редакторе
- Перейдите на вкладку «Поделиться»
- Выберите видимость «По ссылке» или «Публичный» и сохраните проект
- Откройте раздел «Код для встраивания»
- Нажмите «Скопировать код для встраивания»
- Вставьте код на свой сайт
Что означает код
Скопированный код выглядит так:
<iframe src="https://i3dify.com/view/your-project-id" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
src: Адрес вашего проекта
width: Ширина встраивания, в пикселях или процентах
height: Высота, в пикселях
frameborder: Убирает стандартную рамку iframe
allowfullscreen: Позволяет посетителям открыть проект на весь экран
Настройка размера
Подгоните размер под свой сайт:
Во всю ширину
С width="100%" встраивание заполняет свой контейнер:
<iframe src="..." width="100%" height="600" frameborder="0" allowfullscreen></iframe>
Фиксированный размер
Для точного размера укажите значения в пикселях:
<iframe src="..." width="800" height="600" frameborder="0" allowfullscreen></iframe>
Сохранить пропорции
Чтобы сохранить пропорции, например 16:9, при любой ширине, поместите iframe в контейнер:
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe
src="..."
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
allowfullscreen
></iframe>
</div>Инструкции для платформ
WordPress
- Откройте страницу или запись для редактирования
- Добавьте блок «Произвольный HTML»
- Вставьте код для встраивания
- Проверьте предпросмотр и опубликуйте
Wix
- Откройте редактор
- Нажмите «Добавить» (+), затем «Встроить», затем «Пользовательские вставки», затем «Встроить виджет»
- Вставьте код для встраивания
- Измените размер, если нужно
Squarespace
- Откройте страницу для редактирования
- Добавьте блок Code
- Вставьте код для встраивания
- Сохраните и проверьте предпросмотр
Shopify
- Перейдите в «Интернет-магазин», затем «Страницы»
- Откройте страницу и переключитесь в режим HTML
- Вставьте код для встраивания
- Сохраните
Webflow
- Добавьте элемент Embed
- Вставьте код для встраивания
- Настройте размер в параметрах элемента
- Опубликуйте
Notion
- Введите /embed на странице
- Вставьте ссылку на проект, а не весь код iframe
- Измените размер блока, если нужно
Встраивание композиции Studio
Композиция Studio с видимостью «По ссылке» или «Публичный» встраивается так же: скопируйте его ссылку, которая начинается с /studio/, и укажите её в src у iframe.
Решение проблем
Встраивание не загружается
- Проверьте, что видимость «По ссылке» или «Публичный» и что проект сохранён
- Проверьте, что адрес проекта указан верно
- Убедитесь, что ваш сайт разрешает iframe с других сайтов
Неправильный размер
- Измените значения ширины и высоты в коде
- Задайте размер контейнера через CSS
- Попробуйте контейнер, сохраняющий пропорции
Платформа блокирует iframe
- Некоторые платформы ограничивают внешние встраивания
- Посмотрите документацию своей платформы
- Поделитесь ссылкой вместо встраивания
Знак i3Dify на тарифе «Бесплатный»
На тарифе «Бесплатный» встроенный проект показывает знак «Создано в i3Dify» и тонкую полосу внизу. Pro и Business убирают и то, и другое.
На телефоне
На маленьком экране встраивание может выглядеть иначе. Проверьте его на нескольких размерах перед публикацией.