At this stage, we’ll cover the three most common and important questions that arise after publishing a tour.
1. How to Quickly Embed a Virtual Tour on Any Website
The simplest and most universal method is iframe embedding.
It works with almost any website and does not require programming skills.
We’ll look at examples using popular CMS platforms: WordPress, Tilda, and Bitrix.
Example: WordPress (Gutenberg / Elementor)
- Copy the iframe code of your tour from the Space Pano publishing page.
- On your website, add an HTML block:
- in Gutenberg — use the Custom HTML block;
- in Elementor — use the HTML widget.
- Paste the copied code entirely into the HTML block.
- Save the page.
Done — the tour is embedded and working.
The same approach applies to Tilda, Bitrix, and any other CMS that supports HTML code insertion.
2. How to Host a Tour on Your Own Website Without a Subscription
This option is suitable if you want a fully autonomous tour that works without an active subscription.
⚠️ Important
This method is not suitable for Tilda and similar website builders that do not provide access to a file system.
Steps:
- Download the ZIP archive of the tour to your device.⚠️ Note: The tour will not open locally on your computer.A server environment (localhost) is required for local viewing.If you have no experience working with local servers, we do not recommend setting this up separately, as it is beyond the scope of the tour builder.
- Upload the archive to your hosting/server:
- via a file manager such as ISPmanager or cPanel;
- or by connecting via FTP.
- Do not upload the tour to the root directory if your hosting already has an active website.Otherwise, the tour will overwrite system files and break the site.Recommended approach:
- create a folder, for example:mysite.com/tour
- upload the archive to this folder;
- extract the archive.
After that, the tour will be available at the corresponding address, for example: https://mysite.com/tour
3. Embedding a Tour via iframe (Advanced Option)
If you host the tour on your own server or need custom embedding, you can use a standard iframe code by replacing the link with your own.
Basic iframe example:
<iframe src="YOUR_LINK" width="100%" height="600" frameborder="0" allowfullscreen></iframe>Parameters:
- width=”100%” — block width;
- height=”600″ — block height (can be adjusted to match your site design).
User-Friendly Embedding with Poster and Play Button
For a better user experience, we recommend using the extended embed code provided by our developers:
- the page scrolls normally until the tour is launched;
- the iframe does not capture scroll, swipe, or mouse wheel events;
- the tour activates only after clicking the Play button.
This code can be used:
- with tours hosted on Space Tour;
- or with tours hosted on your own server.
<!--
Space Tour: user-friendly tour embedding with a poster and Play button.
Why this is useful:
1) While the tour is not launched, the iframe does NOT capture scroll/swipe events
(pointer-events: none), so the page scrolls smoothly.
2) When the user clicks Play, the poster disappears and the tour becomes interactive
(pointer-events: auto).
-->
<div class="space-pano">
<!--
1) UPDATE THE TOUR LINK HERE
Replace the src value with your tour link (Space Tour hosting or your own hosting).
-->
<iframe
src="https://app.space-tour.pro/pano-demo/hong-kong-aero-5"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
<div class="space-pano__overlay">
<!--
2) UPDATE THE POSTER IMAGE HERE
This is the preview image shown before the tour starts.
You can use any image URL (jpg/png/webp).
If you leave src empty, the poster will not be displayed.
-->
<img
class="space-pano__overlay-img"
src="https://space-tour.pro/vt-tour.jpg"
alt="Virtual Tour Preview"
>
<!-- Tour start button -->
<button class="space-pano__play" type="button" aria-label="Start virtual tour">
<!-- Play icon (no need to change) -->
<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>
/* Wrapper: defines the area where the tour will be displayed */
.space-pano {
position: relative;
width: 100%;
height: 600px; /* You can change the height, e.g. 500px or 80vh */
overflow: hidden;
}
/* Make the iframe fill the entire wrapper */
.space-pano iframe {
width: 100%;
height: 100%;
border: 0;
/* Key point:
While the tour is not launched, the iframe does NOT capture clicks/scroll
so the page scrolls normally */
pointer-events: none;
}
/* Overlay (poster + Play button) */
.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;
}
/* Poster image */
.space-pano__overlay-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Play button on top of the poster */
.space-pano__play {
position: relative;
z-index: 2;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
}
/* Hide overlay after launch */
.space-pano__overlay.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
</style>
<script>
// Start the tour when the user clicks the Play button:
// 1) make the iframe clickable (enable pointer-events)
// 2) remove the poster overlay
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);
}
});
// If the poster is missing or fails to load, remove the image so it doesn't block the UI
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>
Summary
At this stage, you now know how to:
- embed a tour on any website in just a few minutes;
- host a tour independently without a subscription;
- use iframe embedding in both basic and advanced formats.
✅ The guide is complete.
You now understand the entire workflow — from uploading panoramas to publishing and using your virtual tour.
Если хочешь, следующим шагом могу:
- дать Title / Description для этого шага,
- сократить версию под in-app help,
- или подготовить отдельную статью для базы знаний.
