Как встроить 360 тур на сайт: код, размер и мобильная версия

Три способа разместить тур на сайте

1. Встроить кодом (iframe). Тур размещается на нашем хостинге, а на странице сайта — блок с кодом. Это основной способ: сайт остаётся лёгким, обновления тура не требуют правок в вёрстке.
2. Добавить ссылку-кнопку. Подходит, когда на странице уже есть галерея или блок преимуществ, а тур нужен как дополнительный шаг.
3. Сделать отдельную страницу. Раздел «Виртуальный тур» в меню удобен, когда тур крупный и имеет собственную навигацию.

Основной вариант — первый. Он одинаково хорошо работает на WordPress, Tilda и самописных сайтах. Количество сцен влияет на объём работ и оптимизации, а значит, и на стоимость — цены на виртуальные туры 360.

Пошаговая установка: код iframe

Шаг 1. Получите код встраивания. После сборки тура мы передаём готовый фрагмент и ссылку на опубликованную версию.

Шаг 2. Выберите место на странице. Чаще всего тур ставят на отдельную страницу «Виртуальный тур» и ведут на неё из меню, а на странице объекта оставляют превью с кнопкой.

Шаг 3. Вставьте код в нужный блок.

<iframe
  src="https://tour.example.com/embed/your-tour"
  width="100%"
  height="620"
  frameborder="0"
  allow="accelerometer; gyroscope; fullscreen; xr-spatial-tracking"
  allowfullscreen
></iframe>

Шаг 4. Проверьте отображение. Откройте страницу в режиме инкогнито и на телефоне: убедитесь, что тур загрузился, прокрутка страницы не «залипает» внутри блока, а переходы между панорамами работают.

Шаг 5. Проверьте полноэкранный режим. Встроенный браузер на площадке иногда ограничивает работу с гироскопом и полноэкранным режимом, поэтому тестируем на реальных устройствах.

Размер блока и расположение на странице

• Минимальная рабочая высота — 480–500 px на десктопе, иначе панорама обрезается по вертикали.
• Ширина — 100% от контейнера страницы, на смартфонах iframe подстраивается автоматически.
• На странице конкретного объекта лучше работает схема «превью + кнопка»: статичное приглашение и переход в полноэкранный тур, а не тяжёлый блок в первом экране.
• Если в туре больше 20 панорам, выносите его на отдельную страницу и ведите на неё из призывов в тексте.

Отдельный сценарий — карты. Если задача другая и нужно показать объект в Яндекс.Картах или Google Maps, те же исходники выгружаются как панорамы для карт. Это самостоятельный формат публикации, а не замена туру на сайте.

Скорость загрузки и мобильные устройства

• Первый кадр тура готовится отдельно от остальных сцен, поэтому страница не «проседает» при открытии.
• Остальные панорамы подгружаются по мере движения пользователя: он не ждёт весь тур, чтобы дойти до дальней комнаты.
• Основной трафик современных сайтов приходит со смартфонов, поэтому тур проверяется на устройствах от бюджетного Android до iPhone.
• Полноэкранный режим и поворот экрана работают на телефонах — это позволяет осматривать объект в привычном формате.
• Если на странице тяжёлые скрипты — аналитика, чаты, калькуляторы, — размещайте тур в отдельном контейнере, чтобы они не конкурировали за ресурсы.

Оптимизация веса и качества панорам описана в разделе о технологии сборки туров.

Ошибки при встраивании, из-за которых тур не работает

• Устаревший код. После обновления тура старый фрагмент может вести на архивную версию — передавайте актуальный.
• Слишком маленький контейнер. Тур открывается, но им неудобно управлять.
• Потерянный атрибут allow. Без него не работает полноэкранный режим и доступ к гироскопу на мобильных.
• Прокрутка внутри iframe. Если страница перехватывает жесты, выход из полноэкранного режима может не срабатывать.
• Проверка только на компьютере. Часть проблем видна исключительно на телефоне и в мобильном браузере площадки.

Вопросы и ответы

Нужен ли программист, чтобы встроить тур на сайт?

В большинстве случаев — нет. Код вставляется через визуальный редактор: в WordPress это блок «HTML» или «Встроенный код», в Tilda — блок T123. На самописном сайте фрагмент добавляется в шаблон страницы одной строкой. Мы передаём готовый код и при необходимости подсказываем, куда его поставить.

Сколько весит готовый тур и не замедлит ли он сайт?

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

Можно ли разместить несколько туров на одном сайте?

Да. Обычно это разные страницы или блоки под разные объекты: тур по автосалону на главной, туры по объектам — в соответствующих карточках. Каждый тур живёт по своей ссылке и встраивается своим кодом. Общая логика и состав работ описаны в разделе услуги по созданию 360-туров.

Что делать, если тур нужно обновить?

Обновление выполняется без правок в вёрстке: код остаётся прежним, меняется содержимое тура по ссылке. Если изменилась планировка или сделан ремонт, переснимаются нужные панорамы; если обновились только тексты и цены — правятся инфоточки. Это быстрее и дешевле, чем собирать тур с нуля.

Оставьте заявку — соберём тур и передадим готовый код для встраивания, а если нужно, подскажем, куда поставить его на вашем сайте.

Заказать тур с встраиванием →