Встройте виртуальный тур на любой сайт

Встроенный тур — самый дешёвый канал распространения, который есть у виртуального тура: он живёт внутри страницы, у которой уже есть трафик, бренд и призыв к действию. Реализация — один тег iframe, и почти все последующие проблемы сводятся к четырём-пяти настройкам. Это руководство охватывает само встраивание, параметры, которые определяют, как запускается тур, API сообщений для управления вьюером из вашего кода, и список разрешённых доменов, который решает, где встраивание вообще может работать.

Однострочное встраивание

<iframe
  src="https://studio.mango360.app/view/9f2c4a7b"
  width="100%"
  height="620"
  frameborder="0"
  allow="fullscreen; xr-spatial-tracking"
  allowfullscreen
  style="border:0"
  title="Virtual tour"></iframe>

Высоту чаще всего задают неверно. Вьюеру 360° нужна высота: 560–720 px на десктопе, а на мобильном — примерно 70 % высоты экрана при ширине 100 %. Не задавайте фиксированную высоту ниже 480 px: сцена обрежется, а элементы управления зумом уедут за экран. Если тур вставлен в колонку сайта, считайте ширину контейнера: в узкой колонке вьюер переходит в мобильную раскладку, и кнопки навигации заметно мельчают.

Параметры, о которых стоит знать

• autoplay=1 запускает тур в режиме гида сразу после загрузки, без ожидания клика
• scene= задаёт id сцены, на которой открывается тур, — например, конкретной комнаты или этажа
• ui=minimal прячет панель инструментов и оставляет только навигацию и зум
• lang=ru или lang=en задаёт язык интерфейса и текст тура по умолчанию
• brand=0 убирает значок платформы, если ваш тариф допускает white-label брендирование

Управляйте вьюером через postMessage

Вьюер принимает команды postMessage, поэтому ваша страница может открыть тур на нужной сцене, изменить интерфейс или отреагировать на действия посетителя, не залезая внутрь iframe. Принимающая сторона всегда проверяет origin события, прежде чем доверять данным, а id тура обязателен в каждой команде. Команда отправляется в iframe через contentWindow, а вторым аргументом указывается точный домен получателя: подстановка targetOrigin должна быть явной.

const frame = document.querySelector("iframe");
frame.contentWindow.postMessage(
  { type: "mango360:goto", tourId: "9f2c4a7b", scene: "lobby" },
  "https://studio.mango360.app"
);

Сообщения — механизм для случаев, когда тур должен реагировать на остальную страницу: открыть комнату, когда гость выбрал её в виджете бронирования, или закрыть вьюер после завершения оплаты.

Не дайте встраиванию заблокироваться

1. Добавьте все домены, которые встраивают тур, в список разрешённых в настройках проекта: встраивание с неуказанного домена отклоняется
2. Оставьте iframe достаточно высоким, чтобы вьюер не переключался в мобильную раскладку внутри десктопной колонки
3. Используйте loading="lazy" только для тура далеко ниже первого экрана: ленивый iframe в hero-секции откладывает первое открытие
4. Проверьте Content Security Policy страницы-хоста: в frame-src должен быть домен вьюера

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