Как вставить панораму 360° или виртуальный тур на свой сайт

Любую панораму или виртуальный тур, размещённые на TrueVirtualTours, можно вставить на любой сайт одним iframe. В этой инструкции: точный код, как задать размер, как добавить его в популярные конструкторы сайтов и что меняется на платных тарифах. Если удобнее видео, трёхминутный ролик ниже показывает весь процесс на примере WordPress.

Таймкоды: 0:16 вставка сферической панорамы; 0:24 окно "Поделиться" для панорамы; 0:55 добавление HTML-кода на сайт WordPress; 1:40 вставка виртуального тура; 1:47 окно "Поделиться" для тура; 2:13 добавление кода тура в WordPress. Видео: Влад Гринев.

1. Скопируйте код для вставки

Откройте страницу панорамы или тура и нажмите Поделиться. В окне есть ссылка для мессенджеров и соцсетей и поле Вставить с кодом iframe. Скопируйте его. Сгенерированный код выглядит так:

<iframe width="640" height="360" frameborder="0" allowfullscreen="true"
  src="https://truevirtualtours.com/tour/1234/show"></iframe>

Для отдельной панорамы адрес заканчивается на /panorama/1234/360view вместо /tour/1234/show. Число - это id вашей панорамы или тура; окно "Поделиться" подставляет его само.

2. Задайте размер под страницу

Атрибуты width и height принимают пиксели или проценты. Самые полезные варианты:

• На всю ширину колонки: width="100%" height="480". Плеер заполняет колонку с фиксированной высотой.
• Фиксированный блок: width="640" height="360", стандартный блок 16:9.
• Адаптивный 16:9 без фиксированной высоты: оберните iframe в контейнер с отступом.

<div style="position:relative;padding-top:56.25%">
  <iframe src="https://truevirtualtours.com/tour/1234/show"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0"
    allowfullscreen="true"></iframe>
</div>

Оставляйте allowfullscreen: он включает кнопку полного экрана в плеере, которой на телефоне пользуется большинство посетителей.

3. Добавьте код в конструктор сайта

WordPress

В блочном редакторе добавьте блок Произвольный HTML и вставьте код. В классическом редакторе перед вставкой переключитесь на вкладку Текст (не "Визуально"), иначе iframe будет вырезан. У конструкторов Elementor и WPBakery есть виджет HTML для той же цели.

Tilda

Используйте блок T123 (HTML-код) из категории "Другое" и вставьте iframe. Задайте ширину 100%.

Wix

Добавить, Встраивание кода, Встроить HTML. Вставьте iframe в поле кода и растяните элемент на холсте; задайте iframe ширину 100%, чтобы он следовал за элементом.

Squarespace

Добавьте блок Code (доступен на тарифах Business и выше), вставьте iframe и задайте блоку ширину всей колонки.

Webflow, Shopify, Joomla, обычный HTML

Подходит любое место, куда можно вставить HTML: элемент Embed в Webflow, произвольная секция в Shopify, модуль Custom HTML в Joomla или сам исходный код страницы.

Порталы недвижимости и объявления

Большинство порталов не принимают iframe, но принимают "ссылку на виртуальный тур". Используйте ссылку на страницу из окна "Поделиться"; портал покажет её кнопкой, которая открывает тур в новой вкладке.

4. Что увидят посетители

Встроенный плеер - тот же плеер на движке krpano, что и на TrueVirtualTours: перетаскивание для осмотра, колесо для масштаба, переходы между сценами, лента миниатюр для тура, управление гироскопом на телефонах, кнопка VR и полный экран. Панорамы отдаются многоуровневыми тайлами, поэтому изображение в 65 500 пикселей загружается так же быстро, как маленькое. Просмотры во вставках учитываются в статистике панорамы и тура в вашем аккаунте.

5. Брендирование и заставка

• Бесплатный тариф: вставка открывается с короткой заставкой TrueVirtualTours и показывает логотип в плеере.
• Тариф Start: заставка убрана.
• Тариф Pro: white label. Логотип и панель управления можно скрыть, и плеер выглядит частью вашего сайта.

Тарифы и цены на странице тарифов; что каждый тариф добавляет к хостингу, описано на странице хостинга виртуальных туров.

6. Частые проблемы

• iframe пропадает после сохранения. Его вырезал редактор. Используйте блок HTML или Code вместо визуального редактора.
• Плеер крошечный на телефоне. Задайте width="100%" или используйте адаптивную обёртку выше.
• Тур не открывается на весь экран. Оставьте allowfullscreen="true" и убедитесь, что родительский iframe его не блокирует.
• Страница сообщает, что контент недоступен. Панорама или тур удалены либо сняты с публикации. Опубликуйте заново или замените id во вставке.
• Предупреждение о смешанном контенте. Адрес вставки всегда https; проверьте, что ваша страница тоже отдаётся по https.

Частые вопросы

Вставка бесплатна?

Да, на любом тарифе, без ограничений по числу сайтов и просмотров.

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

Любую публичную панораму или тур из галереи можно вставить; автор указывается под плеером. Чтобы вставлять свой контент, сначала загрузите его в бесплатном аккаунте.

Обновится ли вставка, если я отредактирую тур?

Да. iframe всегда показывает текущую версию; замена панорамы или перенос перехода не требуют изменений на вашем сайте.

Можно ли вставить видео 360°?

Да. Сцена с видео 360° использует тот же код iframe, что и панорама.

Не знаете, как сделать сам тур? Начните с инструкции как создать виртуальный 3D-тур или прочитайте о хостинге панорам 360°.