Ở bước này, chúng ta sẽ tìm hiểu ba câu hỏi phổ biến và quan trọng nhất thường gặp sau khi xuất bản tour.

1. Cách nhanh chóng nhúng tour ảo vào bất kỳ trang web nào

Cách đơn giản và phổ biến nhất là nhúng bằng iframe.

Cách này hoạt động với hầu hết các trang web và không đòi hỏi kỹ năng lập trình.

Chúng ta sẽ xem các ví dụ trên những nền tảng CMS phổ biến: WordPress, Tilda và Bitrix.

Ví dụ: WordPress (Gutenberg / Elementor)

Sao chép mã iframe của tour từ trang xuất bản Space Tour.
Trên trang web của bạn, thêm một khối HTML:
- trong Gutenberg — dùng khối HTML tùy chỉnh;
- trong Elementor — dùng tiện ích HTML.
Dán toàn bộ mã đã sao chép vào khối HTML.
Lưu trang.

Hoàn tất: tour đã được nhúng và hoạt động.

Cách làm tương tự áp dụng cho Tilda, Bitrix và mọi CMS khác hỗ trợ chèn mã HTML.

2. Cách lưu trữ tour trên trang web riêng mà không cần gói đăng ký

Tùy chọn này phù hợp nếu bạn muốn một tour hoạt động hoàn toàn độc lập mà không cần gói đăng ký đang hoạt động.

⚠️ Quan trọng

Phương pháp này không phù hợp với Tilda và các trình tạo trang web tương tự không cho phép truy cập hệ thống tệp.

Các bước:

Tải tệp nén ZIP của tour về thiết bị. ⚠️ Lưu ý: Tour sẽ không mở trực tiếp trên máy tính của bạn. Cần có môi trường máy chủ (localhost) để xem cục bộ. Nếu chưa có kinh nghiệm làm việc với máy chủ cục bộ, chúng tôi không khuyên bạn tự thiết lập riêng, vì việc này nằm ngoài phạm vi của trình tạo tour.
Tải tệp nén lên dịch vụ lưu trữ/máy chủ của bạn:
- qua trình quản lý tệp như ISPmanager hoặc cPanel;
- hoặc bằng cách kết nối qua FTP.
Không tải tour lên thư mục gốc nếu dịch vụ lưu trữ của bạn đã có trang web đang hoạt động. Nếu không, tour sẽ ghi đè các tệp hệ thống và làm hỏng trang web.Cách làm được khuyến nghị:
- tạo một thư mục, ví dụ: mysite.com/tour
- tải tệp nén lên thư mục này;
- giải nén tệp.

Sau đó, tour sẽ có tại địa chỉ tương ứng, ví dụ: https://mysite.com/tour

3. Nhúng tour bằng iframe (tùy chọn nâng cao)

Nếu bạn lưu trữ tour trên máy chủ riêng hoặc cần tùy chỉnh cách nhúng, bạn có thể dùng mã iframe tiêu chuẩn và thay liên kết bằng liên kết của mình.

Ví dụ iframe cơ bản:

<iframe src="YOUR_LINK" width="100%" height="600" frameborder="0" allowfullscreen></iframe>

Các thông số:

width=”100%” — chiều rộng của khối;
height=”600″ — chiều cao của khối (có thể điều chỉnh cho phù hợp với thiết kế trang web).

Nhúng thân thiện với người dùng bằng ảnh bìa và nút Phát

Để có trải nghiệm người dùng tốt hơn, chúng tôi khuyên bạn nên sử dụng mã nhúng mở rộng do các nhà phát triển của chúng tôi cung cấp:

trang vẫn cuộn bình thường cho đến khi tour được khởi chạy;
iframe không bắt các thao tác cuộn, vuốt hoặc sự kiện con lăn chuột;
tour chỉ được kích hoạt sau khi nhấp vào nút Phát.

Mã này có thể được sử dụng:

với các tour được lưu trữ trên Space Tour;
hoặc với các tour được lưu trữ trên máy chủ riêng của bạn.

<!--
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.com/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.com/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>