> For the complete documentation index, see [llms.txt](https://docs.wfolio.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wfolio.pro/site/blocks/integration/photo-360.md).

# Как разместить панораму 360°

Панорама 360° — это интерактивное фотоизображение, позволяющее показать окружающее пространство вокруг точки съемки со всех сторон.

Чтобы разместить панораму на сайте, нужно загрузить ее на специальный хостинг и получить HTML-код. Примеры сервисов с бесплатными тарифами:

* **Truevirtualtours** ([truevirtualtours.com](https://truevirtualtours.com/ru/))\
  Бесплатно: до 500 МБ на панораму. До 5 панорам в месяц. [Тарифы](https://truevirtualtours.com/ru/site/plans)\
  [Как получить код для вставки](https://truevirtualtours.com/ru/article/how-to-embed-a-panorama-virtual-tour-on-your-website)<br>
* **Kuula** ([kuula.co](https://kuula.co/page/pricing))\
  Язык интерфейса: английский.\
  Бесплатно: до 100 загрузок в месяц. [Тарифы](https://kuula.co/page/pricing)\
  [Как получить код для вставки](https://kuula.co/help/share-embed)<br>
* **360cities** ([www.360cities.net](https://www.360cities.net/))\
  Язык интерфейса: английский.\
  Бесплатно: нет лимита на загрузку или количество панорам. [Тарифы](https://www.360cities.net/help/account-types)\
  [Как получить код для вставки](https://www.360cities.net/help/panorama-embedding)<br>

### Как добавить панораму

* Зарегистрируйтесь в одном из сервисов выше или в любом другом.
* Опубликуйте панораму и получите **HTML-код** для добавления на сайт.

{% hint style="info" %}
Чтобы панорама была в центре страницы, поменяйте в коде значение `width="..."` на `width=100%`.
{% endhint %}

* На составной странице нажмите <mark style="background-color:blue;">**(+)**</mark> для добавления нового блока.

<figure><img src="/files/iRw6qH4TRsDzAmaJkesX" alt=""><figcaption></figcaption></figure>

* Перейдите во вкладку **«Виджеты»** и выберите нужный HTML-блок.

<figure><img src="/files/dOCyhQ3zOdzmUVGuDu3v" alt=""><figcaption></figcaption></figure>

* **Вставьте** полученный **код в HTML блок**. Сохраните изменения.

<figure><img src="/files/yktPGvPjaei0RIepnGlW" alt=""><figcaption></figcaption></figure>