Dễ như copy – paste, ai cũng làm được trong 1 phút!

Bạn đã có tour 360 lung linh, nhưng nếu khách hàng không xem được ngay trên website, landing page hoặc Zalo OA… thì hiệu quả giảm 50%.

Tin vui: việc nhúng tour 360 thực ra cực kỳ đơn giản. Dưới đây là hướng dẫn chi tiết, có mã nhúng sẵn – bạn chỉ việc copy là xong.

👉 Cuối bài có CTA nhờ chúng tôi nhúng miễn phí nếu bạn không rành kỹ thuật.

🔥 1. Lấy mã nhúng (Embed Code) của tour 360

Hầu hết các tour 360 chuyên nghiệp đều cung cấp dạng iframe để chèn vào website.

Bạn sẽ nhận được một đoạn tương tự như sau:

<iframe 
    src="https://yourtourlink.com/tour/index.html" 
    width="100%" 
    height="600" 
    frameborder="0" 
    allowfullscreen>
</iframe>

Gợi ý:

• width="100%" giúp tour tự căn theo màn hình, rất đẹp trên mobile.
• height="600" bạn có thể tăng lên 700–800 nếu muốn trải nghiệm rộng hơn.

🖥️ 2. Nhúng tour 360 vào Website (WordPress, HTML, Wix, Webflow…)

➤ 2.1. WordPress (phổ biến nhất)

Cách làm:

1. Vào trang cần chèn → Edit
2. Chuyển sang tab “HTML / Code”
3. Dán đoạn iframe vào
4. Cập nhật (Update)

👉 Hoàn thành! Tour sẽ hiển thị mượt mà ngay trên trang web.

➤ 2.2. Website HTML thủ công

Chèn iframe vào bất kỳ vị trí nào bạn muốn hiển thị:

<div class="tour-360-box">
    <iframe 
        src="https://yourtourlink.com/tour/index.html"
        width="100%"
        height="620"
        allowfullscreen>
    </iframe>
</div>

Pro-tip:
Thêm CSS nhẹ cho đẹp:

.tour-360-box iframe {
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.15);
}

➤ 2.3. Webflow / Wix / Landing Page builders

Hầu hết nền tảng đều có mục:
➡️ Add → Embed / Custom Code → Paste iframe

Các nền tảng hỗ trợ tốt:
✔ Landbot
✔ Ladipage
✔ Webflow
✔ Wix
✔ Shopify
✔ Haravan (Sapo)
✔ Manychat landingpage

Chỉ cần paste → Save → Xong.

📱 3. Nhúng tour 360 vào Landing Page (Ladipage, Sapo, v.v.)

Ladipage

1. Chọn Thêm mới
2. Tìm mục HTML
3. Dán iframe
4. Kéo giãn khung cho vừa trang

Sapo / Haravan

1. Chèn vào khung Custom HTML
2. Nhấn Lưu
3. Kiểm tra hiển thị mobile (rất quan trọng)

👉 Tour hiển thị ngay 100% chiều rộng, rất đẹp và tăng thời gian onsite ~3–5 phút!

💬 4. Nhúng tour 360 vào Zalo OA (cách đúng mà ít ai biết)

Zalo OA không hỗ trợ nhúng trực tiếp iframe, nhưng bạn có thể:

Cách 1 – Gắn nút xem tour trong bài viết OA

1. Tạo bài viết mới
2. Thêm CTA “Xem tour 360”
3. Dán link tour
4. Zalo tự tạo preview cực đẹp

Cách 2 – Gắn vào Menu OA

→ Menu → Thêm mục → Liên kết → Dán URL tour

Cách 3 – Đính kèm trong ZNS hoặc Chatbot

Dán URL → khách click mở tour ngay.

📌 Mẹo tăng tỉ lệ click:
Dùng link ngắn gọn + ảnh thumbnail đẹp.

🚀 5. Tour 360 không hiển thị? Đây là 3 lỗi phổ biến

❌ Lỗi 1: Website chặn iframe cross-origin

→ Liên hệ đơn vị tour, yêu cầu cho phép domain website.

❌ Lỗi 2: Tour chưa được public

→ Kiểm tra link đã mở public chưa.

❌ Lỗi 3: Nhúng sai định dạng (dán link, không phải iframe)

→ Luôn dùng mã nhúng dạng <iframe>.

🎁 BONUS: Mẫu mã nhúng responsive đẹp nhất (dùng cho mọi web)

<div style="position:relative;padding-bottom:56.5%;height:0;overflow:hidden;">
  <iframe 
    src="https://yourtourlink.com/tour/" 
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" 
    allowfullscreen>
  </iframe>
</div>

✔ Load nhanh
✔ Tự co giãn theo mọi màn hình
✔ Chuẩn UX cho web hiện đại

💚 Bạn bận? Để chúng tôi làm giúp!

Nhờ chúng tôi nhúng miễn phí vào:
✔ Website
✔ Landing page
✔ Zalo OA
✔ Chatbot
✔ Page bán hàng

Chỉ cần gửi link tour + quyền truy cập web → Xử lý trong 5 phút.