Nhúng Tour Ảo Vào Website: Hướng Dẫn iFrame, WordPress Và Tự Host

Nhúng tour ảo vào website (iFrame Embedding) là dán một thẻ HTML <iframe> do nền tảng tour 360 cung cấp vào trang của bạn, để khách xem và tương tác ngay trên web mà không phải rời trang. Với Panoee, mã nhúng nằm trong Publish panel → Embed options. Nếu cần tự quản lý hạ tầng, bạn có thể dùng Export Project để tự host mã nguồn tĩnh.

Nhúng tour ảo vào website là gì?

Trong bài này, “nhúng” nghĩa là embed nội dung tour ảo 360 vào trang web. Nó không liên quan đến lập trình nhúng hay hệ thống nhúng (embedded system) với vi điều khiển, IoT. Hai chủ đề này hay bị nhầm khi tìm kiếm.

Về bản chất, tour ảo là một ứng dụng WebGL/JavaScript chạy trong trình duyệt (Chrome, Safari, Edge, Firefox). Khi nhúng, trang web của bạn chỉ chứa một “cửa sổ” <iframe> trỏ tới tour. Nếu chưa có tour, hãy xem cách tạo tour ảo 360 hoặc tham khảo phần mềm tạo tour ảo 360 trước khi nhúng.

Hai cách nhúng: iFrame Cloud và tự host mã nguồn tĩnh

Hầu hết hướng dẫn chỉ nói về iFrame. Trên thực tế, bạn nên chọn phương án theo yêu cầu về tốc độ, kiểm soát dữ liệu và thương hiệu.

Quy tắc chọn nhanh: ưu tiên iFrame Cloud nếu cần chạy nhanh và hay chỉnh sửa. Chọn Export Project nếu doanh nghiệp yêu cầu dữ liệu nằm trên hạ tầng riêng.

Cách nhúng tour ảo bằng iFrame trong 4 bước

• Đặt tour ở chế độ PublicMã nhúng chỉ khả dụng khi tour công khai. Nếu cần hạn chế truy cập, xem phần bảo mật tour ảo bằng mật khẩu trước khi quyết định.
• Tùy chọn Custom Slug hoặc Custom DomainĐổi slug (định dạng https://tour.panoee.net/{slug}) hoặc gán Custom Domain trước khi lấy mã, để URL trong iFrame đồng bộ với thương hiệu.
• Sao chép mã trong Publish panel → Embed optionsPanoee tạo sẵn thẻ iFrame. Bạn không cần tự viết mã.
• Dán vào trang và kiểm traDán vào khối HTML của CMS, lưu trang và kiểm tra trên desktop lẫn điện thoại (toàn màn hình, cảm biến chuyển động).

Cấu trúc mã nhúng cơ bản:

<iframe src="URL_TOUR" width="100%" height="500px" frameborder="0" allowfullscreen allow="gyroscope; accelerometer; vr"></iframe>

Demo nhúng thực tế bằng iframe, dùng tour Địa danh Lạng Sơn của Panoee:

Responsive: 100% width, tỷ lệ 16:9 và xử lý cuộn trang trên mobile

Chiều cao cố định 500px chạy ổn trên desktop nhưng thường gây lệch trên màn hình hẹp. Có hai hướng xử lý.

Cách 1 – Khung tỷ lệ 16:9 bằng CSS aspect-ratio:

<div style="width:100%;aspect-ratio:16/9;">
  <iframe src="URL_TOUR" style="width:100%;height:100%;border:0;" allowfullscreen allow="gyroscope; accelerometer; vr" loading="lazy"></iframe>
</div>

Cách 2 – Chiều cao theo khung nhìn (vh): đặt height:70vh cho banner hoặc section toàn chiều rộng, tour sẽ chiếm phần lớn màn hình bất kể thiết bị. Đây là lựa chọn tốt cho trang landing.

Về xung đột cuộn trang trên mobile: khi iFrame chiếm toàn bộ chiều cao màn hình, ngón tay kéo xoay tour dễ bị hiểu nhầm là cuộn trang. Cách giảm thiểu:

• Không để iFrame phủ kín 100% viewport. Chừa lề trên/dưới để người xem còn chỗ chạm cuộn trang.
• Trên mobile, dùng khung cao khoảng 60–70vh thay vì full màn hình.
• Đặt tour trong section riêng, có tiêu đề phía trên và nội dung phía dưới.

Xem thêm cách xem tour ảo trên điện thoại để kiểm tra trải nghiệm thực tế của khách.

Nhúng tour ảo vào WordPress, Elementor, Webflow, Shopify

Các CMS này đều hỗ trợ dán HTML, nên nguyên tắc chung giống nhau: lấy mã iFrame và đặt vào khối HTML.

• WordPress (Gutenberg): thêm block Custom HTML, dán mã iFrame, bấm Preview để kiểm tra. Nếu dùng Classic Editor, chuyển sang tab Text/HTML rồi dán.
• Elementor: kéo widget HTML vào section, dán mã. Nên đặt section ở dạng full-width hoặc boxed tùy bố cục.
• Webflow: dùng phần tử Embed, dán mã và đặt kích thước theo container.
• Shopify: dán vào mô tả sản phẩm (chế độ Show HTML) hoặc section tùy chỉnh của theme.

Khi nào nên dùng Export Project và Panoee Hosting

Export Project ($19/project, thanh toán một lần qua Stripe, export không giới hạn số lần) xuất toàn bộ mã nguồn tĩnh: HTML, CSS, JS và assets. Bạn có thể đưa lên hosting riêng hoặc một thư mục con trong website hiện có.

Phương án này hợp lý khi:

• Doanh nghiệp yêu cầu dữ liệu tour nằm trên server riêng.
• Cần tour chạy dưới cùng tên miền (Subdirectory) với website chính.
• Muốn tách tour khỏi iFrame Cloud của bên thứ ba.

Panoee Hosting là sản phẩm riêng để lưu trữ file static export, nhận được cả file export từ Panoee, 3DVista và Pano2VR. Bạn có thể lưu qua Panoee Cloud hoặc bucket AWS S3 của chính mình. Nếu đang dùng 3DVista, xem thêm thay thế 3DVista.

Multi-Resolution: vì sao trang nhúng vẫn tải nhanh

Nỗi lo lớn nhất khi nhúng tour là trang nặng và giật. Panoee xử lý bằng công nghệ Multi-Resolution: ảnh 360 được cắt thành hàng nghìn tile nhỏ, và trình duyệt chỉ tải các tile nằm trong góc nhìn hiện tại. Vì vậy trang nhúng vẫn mượt dù ảnh gốc đạt độ phân giải tới 32K.

Ảnh đầu vào là Equirectangular JPG/PNG tỷ lệ 2:1. Để tối ưu thêm từ gốc, tham khảo tối ưu dung lượng ảnh panorama.

Lỗi thường gặp khi nhúng tour ảo

Chi phí nhúng tour ảo với Panoee

Nếu chưa có ảnh 360, xem chi phí làm tour ảo 360 để cân nhắc dịch vụ sản xuất trọn gói. Starfruit có các gói tham khảo: Quick 360 từ 4.900.000 VND, Premium 360 từ 12.000.000 VND, CGI / 3D từ 30.000.000 VND.

Câu hỏi thường gặp

Panoee và đơn vị đồng hành tại Việt Nam

Panoee là nền tảng phần mềm tạo tour ảo 360 chạy trên trình duyệt, ra mắt từ năm 2021, vận hành trên hạ tầng Amazon Web Services (AWS). Panoee, Corp. được thành lập tại Delaware, Hoa Kỳ ngày 22/03/2024. Nền tảng được phát triển bởi đội ngũ kỹ sư Starfruit và đạt 4,8/5 sao trên 88 lượt đánh giá trên Capterra.

Tại Việt Nam, Công ty Cổ phần Starfruit (MST 0106786993) là đối tác đại diện bán hàng, phát hành hợp đồng và hóa đơn VAT. Địa chỉ: Số 4 ngõ 2 Nguyễn Đổng Chi, Phường Từ Liêm, Hà Nội. Bạn có thể xem thêm Panoee là gì hoặc liên hệ qua email anhtt@starfruit.com.vn (Starfruit Sales) và neo@panoee.com (Customer Support).