На этом этапе разберём три самых частых и важных вопроса, которые возникают после публикации тура.

1. Как быстро встроить виртуальный тур на любой сайт

Самый простой и универсальный способ — iframe-встраивание.

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

Мы рассмотрим примеры на популярных CMS: WordPress, Tilda, Bitrix.

Пример: WordPress (Gutenberg / Elementor)

Скопируйте iframe-код вашего тура на странице публикации в Space Pano.
На сайте добавьте блок HTML:
- в Gutenberg — блок «Произвольный HTML»;
- в Elementor — виджет «HTML».
Вставьте скопированный код целиком в HTML-блок.
Сохраните страницу.

Готово — тур встроен и работает.

Аналогичным образом тур встраивается в Tilda, Bitrix и другие CMS, где есть возможность вставки HTML-кода.

2. Как разместить тур на своём сайте и не платить за подписку

Этот способ подходит, если вы хотите полностью автономный тур, который будет работать без активной подписки.

⚠️ Важно:

Этот вариант не подходит для Tilda и подобных конструкторов без файловой системы.

Порядок действий:

Скачайте ZIP-архив тура на своё устройство. Обратите внимание: локально на компьютере тур не откроется. Для локального просмотра требуется серверная среда (localhost). Если у вас нет опыта работы с локальными серверами — не рекомендуем разбираться в этом отдельно, так как это выходит за рамки конструктора туров.
Загрузите архив на хостинг/сервер:
- через файловый менеджер ISPmanager или cPanel;
- либо подключившись по FTP.
Не загружайте тур в корневую директорию сайта, если на хостинге уже есть активный сайт. В противном случае тур заменит системные файлы, и сайт перестанет работать. Рекомендуемый вариант:
- создать папку, например:mysite.com/tour
- загрузить архив в эту папку;
- распаковать архив.

После этого тур будет доступен по соответствующему адресу, например: https://mysite.com/tour

3. Как встроить тур на сайт через iframe (расширенный вариант)

Если вы размещаете тур на своём сервере или хотите кастомное встраивание, можно использовать стандартный iframe-код, заменив ссылку на нужную.

Пример базового iframe:

<iframe src="ВАША_ССЫЛКА" width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Параметры:

width=»100%» — ширина блока;
height=»600″ — высота блока (можно изменить под дизайн сайта).

Удобное встраивание с постером и кнопкой Play

Для более комфортного пользовательского опыта мы рекомендуем использовать расширенный код от наших разработчиков:

страница удобно скроллится, пока тур не запущен;
iframe не перехватывает свайпы и колесо мыши;
тур активируется только после нажатия кнопки Play.

Такой код можно использовать:

как с туром, размещённым на Space Pano;
так и с туром, размещённым на вашем собственном сервере.

<!--
Space Pano: удобное встраивание тура с постером и кнопкой Play.

Зачем это нужно:
1) Пока тур не запущен, iframe НЕ перехватывает колесо мыши/скролл и свайпы (pointer-events: none),
   поэтому страницу удобно прокручивать.
2) Пользователь нажимает Play — постер исчезает, и тур становится интерактивным (pointer-events: auto).
-->

<div class="space-pano">
  <!--
  1) ЗДЕСЬ МЕНЯЕМ ССЫЛКУ НА ТУР
     Замените значение src на ссылку вашего тура (можно тур на Space Pano или ваш тур на собственном хостинге)
  -->
  <iframe
    src="https://app.space-pano.ru/pano-demo/dizajn-proekt-150"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen>
  </iframe>

  <div class="space-pano__overlay">
    <!--
    2) ЗДЕСЬ МЕНЯЕМ КАРТИНКУ-ПОСТЕР
       Это превью-картинка, которая показывается до запуска тура.
       Можно поставить любой URL на изображение (jpg/png/webp).
       Если оставить src пустым — постер не будет показан.
    -->
    <img
      class="space-pano__overlay-img"
      src="https://space-pano.ru/wp-content/uploads/2025/11/0891-scaled.jpg"
      alt="Virtual Tour Preview"
    >

    <!-- Кнопка запуска тура -->
    <button class="space-pano__play" type="button" aria-label="Start virtual tour">
      <!-- Иконка Play (можно не менять) -->
      <svg class="icon-play" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g opacity="0.75">
          <path d="M105 60C105 65.9095 103.836 71.7611 101.575 77.2208C99.3131 82.6804 95.9984 87.6412 91.8198 91.8198C87.6412 95.9984 82.6804 99.3131 77.2208 101.575C71.7611 103.836 65.9095 105 60 105C54.0905 105 48.2389 103.836 42.7792 101.575C37.3196 99.3131 32.3588 95.9984 28.1802 91.8198C24.0016 87.6412 20.6869 82.6804 18.4254 77.2208C16.164 71.7611 15 65.9095 15 60C15 48.0653 19.7411 36.6193 28.1802 28.1802C36.6193 19.7411 48.0653 15 60 15C71.9347 15 83.3807 19.7411 91.8198 28.1802C100.259 36.6193 105 48.0653 105 60Z" stroke="#FAFAFA" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M79.55 58.36C79.8428 58.5223 80.0868 58.7599 80.2566 59.0483C80.4265 59.3367 80.5161 59.6653 80.5161 60C80.5161 60.3347 80.4265 60.6633 80.2566 60.9517C80.0868 61.2401 79.8428 61.4778 79.55 61.64L51.535 77.205C51.2495 77.3635 50.9276 77.4446 50.6011 77.4405C50.2747 77.4363 49.9549 77.347 49.6736 77.1813C49.3922 77.0156 49.159 76.7794 48.997 76.4959C48.835 76.2124 48.7499 75.8915 48.75 75.565V44.435C48.75 43.005 50.285 42.105 51.535 42.8L79.55 58.36Z" stroke="#FAFAFA" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
      </svg>
    </button>
  </div>
</div>

<style>
  /* Блок-обёртка: задаёт размер области, где будет показан тур */
  .space-pano {
    position: relative;
    width: 100%;
    height: 600px; /* Можно изменить высоту, например 500px или 80vh */
    overflow: hidden;
  }

  /* Сам iframe растягиваем на всю область */
  .space-pano iframe {
    width: 100%;
    height: 100%;
    border: 0;

    /* Ключевой момент:
       Пока тур не запущен, iframe НЕ принимает клики/скролл (страница скроллится нормально) */
    pointer-events: none;
  }

  /* Оверлей (постер + кнопка Play) */
  .space-pano__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  /* Постер-картинка */
  .space-pano__overlay-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Кнопка Play поверх постера */
  .space-pano__play {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Скрытие оверлея после запуска */
  .space-pano__overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
</style>

<script>
  // Запуск тура по клику на кнопку Play:
  // 1) делаем iframe кликабельным (включаем pointer-events)
  // 2) убираем постер
  document.addEventListener('click', function (event) {
    const btn = event.target.closest('.space-pano__play');
    if (!btn) return;

    const wrapper = btn.closest('.space-pano');
    if (!wrapper) return;

    const iframe = wrapper.querySelector('iframe');
    const overlay = wrapper.querySelector('.space-pano__overlay');

    if (iframe) iframe.style.pointerEvents = 'auto';

    if (overlay) {
      overlay.classList.add('is-hidden');
      setTimeout(function () {
        overlay.remove();
      }, 300);
    }
  });

  // Если постер не указан или не загрузился — удаляем картинку, чтобы не мешала
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.space-pano__overlay-img').forEach(function (img) {
      const src = img.getAttribute('src');

      if (!src) {
        img.remove();
        return;
      }

      img.addEventListener('error', function () {
        img.remove();
      });
    });
  });
</script>