Cách nhúng vòng quay may mắn vào website, blog bằng iframe

Nhúng vòng quay may mắn vào website có khó không?

Không khó. Bạn lưu vòng quay để lấy mã nhúng iframe, rồi dán đoạn mã đó vào một khối HTML trên trang web. Toàn bộ mất khoảng 5 phút và không cần biết lập trình.

Sau khi nhúng, khách vào trang của bạn sẽ quay được ngay tại chỗ, không phải rời sang trang khác. Cách này hợp với blog giáo dục muốn có trò chơi cho học sinh, trang landing page khuyến mãi, website trường học hoặc trang nội bộ công ty.

Bước 1: Tạo và lưu vòng quay để lấy mã iframe

1. Mở trang vòng quay, nhập danh sách (mỗi dòng một mục), chọn bảng màu, đặt tiêu đề. Nếu cần ôn lại thao tác, xem các bước tạo vòng quay từ đầu.
2. Bấm lưu và chia sẻ. Công cụ cấp một link ngắn dạng vongquaymayman.world/v/abc123, không cần đăng ký tài khoản.
3. Chọn phần mã nhúng và sao chép toàn bộ đoạn iframe được cung cấp.
4. Dán tạm vào Notepad hoặc ghi chú để không bị mất khi chuyển tab.

Đoạn mã iframe có cấu trúc gần giống ví dụ minh họa dưới đây. Hãy luôn dùng đúng mã công cụ đưa ra cho vòng của bạn, vì phần địa chỉ là riêng cho từng vòng:

<iframe src=”https://vongquaymayman.world/v/abc123″ width=”100%” height=”600″ title=”Vòng quay may mắn” loading=”lazy”></iframe>

Lưu ý: vòng quay nhúng lấy nội dung từ bản đã lưu. Mỗi lần chỉnh danh sách, bạn cần lưu bản mới rồi thay đoạn mã trên trang.

Bước 2: Dán mã nhúng vào nền tảng bạn đang dùng

Nền tảng nào cũng có một chỗ cho phép dán HTML. Tên gọi khác nhau, nhưng nguyên tắc giống nhau: tìm khối HTML hoặc khối nhúng, dán mã, lưu và xem trước.

Tên nút có thể thay đổi nhẹ theo phiên bản giao diện của từng nền tảng, nhưng vị trí thường giống mô tả ở trên.

WordPress: dùng khối HTML tùy chỉnh

1. Mở bài viết hoặc trang cần gắn vòng quay trong trình soạn thảo khối.
2. Bấm dấu cộng để thêm khối, gõ “HTML” và chọn HTML tùy chỉnh.
3. Dán đoạn iframe vào khối.
4. Bấm Xem trước ngay trong khối để kiểm tra vòng hiển thị đúng.
5. Cập nhật bài viết.

Nếu website dùng page builder như Elementor hoặc Flatsome UX Builder, tìm phần tử có tên kiểu “HTML” hoặc “Mã HTML” và làm tương tự. Một số plugin bảo mật hoặc plugin tối ưu có thể chặn iframe, khi đó hãy kiểm tra phần cài đặt của plugin.

Blogger: chuyển sang chế độ HTML

1. Mở bài viết, bấm biểu tượng bút chì ở góc trái thanh công cụ và chọn chế độ xem HTML.
2. Đặt con trỏ vào vị trí muốn hiện vòng quay, dán mã iframe.
3. Chuyển lại chế độ soạn thảo để xem, rồi xuất bản.

Muốn vòng quay xuất hiện ở mọi trang, vào Bố cục, thêm tiện ích HTML/JavaScript và dán mã vào đó. Nhưng hãy cân nhắc phần tốc độ trang bên dưới trước khi làm vậy.

Google Sites: dùng tính năng Nhúng

1. Trong trình chỉnh sửa, chọn Chèn ở thanh bên phải, bấm Nhúng.
2. Chuyển sang thẻ Mã nhúng và dán đoạn iframe.
3. Bấm Tiếp, rồi Chèn. Kéo các góc khung để chỉnh độ rộng, chiều cao.
4. Xuất bản trang.

Google Sites rất được các thầy cô dùng để làm trang lớp. Một trang “Góc trò chơi” có vòng quay gọi tên và vòng quay chữ cái là đủ cho cả học kỳ.

Wix và LadiPage: phần tử nhúng HTML

Ở Wix, mở bảng thêm phần tử, tìm nhóm Nhúng mã và chọn phần tử nhúng HTML. Chọn kiểu dán mã, dán iframe, bấm Cập nhật rồi kéo khung cho vừa. Ở LadiPage, thêm phần tử HTML từ thanh công cụ bên trái, dán mã vào ô nội dung, chỉnh chiều cao phần tử bằng đúng chiều cao trong mã để không bị cắt.

Với landing page khuyến mãi, đặt vòng quay ngay sau phần thể lệ và bảng tỉ lệ giải thưởng. Khách đọc luật trước rồi mới quay, ít thắc mắc hơn. Bài tạo vòng quay có tỉ lệ có mẫu bảng tỉ lệ bạn có thể dùng.

Chỉnh width và height của iframe thế nào cho đẹp?

Đặt width=”100%” để vòng tự giãn theo khung nội dung, và chọn height theo vị trí đặt. Hai thuộc tính này nằm ngay trong thẻ iframe, bạn sửa con số là xong.

Các con số trên là điểm xuất phát. Hãy xem trước trên cả máy tính và điện thoại, nếu thấy thanh cuộn xuất hiện bên trong khung thì tăng height thêm 50–100.

Làm sao để vòng quay nhúng hiển thị tốt trên điện thoại?

Dùng width theo phần trăm thay vì số pixel cố định. Một iframe đặt width=”800″ sẽ tràn màn hình điện thoại và gây cuộn ngang, trong khi width=”100%” luôn vừa khung.

Nếu muốn khung luôn giữ tỉ lệ vuông vắn ở mọi kích thước màn hình, bạn có thể thêm thuộc tính style vào thẻ iframe, ví dụ:

<iframe src=”…” style=”width:100%;max-width:640px;aspect-ratio:1/1;border:0″ title=”Vòng quay may mắn” loading=”lazy”></iframe>

Ở cách này, max-width giới hạn vòng không to quá trên màn hình rộng, còn aspect-ratio giữ khung vuông. Khi dùng aspect-ratio, bỏ thuộc tính height để hai giá trị không xung đột. Sau khi sửa, mở trang trên điện thoại thật để kiểm tra, đừng chỉ tin vào chế độ xem trước của trình soạn thảo.

Trường hợp nút toàn màn hình bên trong vòng nhúng không hoạt động, thêm thuộc tính allowfullscreen vào thẻ iframe. Một số nền tảng chặn quyền này, khi đó người xem vẫn có thể mở link chia sẻ để quay toàn màn hình.

Nhúng vòng quay có làm chậm trang web không?

Có ảnh hưởng, nhưng nhỏ nếu bạn làm đúng. Mỗi iframe là một trang con cần tải thêm, nên điều quan trọng là để nó tải đúng lúc và chỉ ở nơi cần.

• Thêm loading=”lazy” vào iframe. Trình duyệt chỉ tải vòng khi người đọc cuộn gần tới, phần đầu trang hiện nhanh hơn.
• Không đặt ở đầu trang nếu không cần. Vòng quay nằm ngay màn hình đầu tiên sẽ tải cùng lúc với nội dung chính. Với bài blog, đặt sau đoạn mở bài là hợp lý.
• Không nhúng ở sidebar toàn site. Mỗi trang của bạn sẽ phải tải thêm một iframe, kể cả trang không liên quan.
• Mỗi trang một vòng. Cần nhiều vòng thì tách thành nhiều bài, hoặc đặt link chia sẻ cho các vòng phụ thay vì nhúng tất cả.
• Giữ chỗ cho khung. Luôn có height hoặc aspect-ratio để trình duyệt dành sẵn khoảng trống, tránh việc nội dung bên dưới bị đẩy xuống đột ngột khi vòng tải xong (lỗi mà Google đo bằng chỉ số CLS).
• Kiểm tra plugin cache. Nếu dùng plugin trì hoãn tải iframe, hãy xem lại sau khi bật, đôi khi vòng chỉ hiện khi người dùng chạm vào trang.

Ví dụ thực tế: ba cách các website dùng vòng quay nhúng

Blog chia sẻ giáo án

Một giáo viên tiếng Anh viết bài “Ôn từ vựng chủ đề Animals”. Cuối bài, cô nhúng vòng quay chứa 20 từ vựng. Học sinh ở nhà mở bài, quay trúng từ nào thì nói một câu có từ đó. Bài viết vừa là tài liệu, vừa là bài tập tương tác.

Landing page tri ân khách hàng

Một tiệm bánh ở Huế đặt vòng quay ưu đãi trên trang riêng, kèm thể lệ và bảng tỉ lệ. Khách mua tại quầy được nhân viên mở trang trên máy tính bảng để quay, kết quả chiếu cho khách thấy ngay. Trước khi chạy, chủ tiệm hỏi Sở Công Thương địa phương về thủ tục khuyến mại.

Trang nội bộ công ty

Phòng nhân sự nhúng vòng quay chọn người dẫn buổi chia sẻ thứ Sáu lên trang wiki nội bộ. Ai cũng xem được danh sách, lịch sử kết quả được tải ra file .txt và dán vào biên bản. Muốn chia nhóm cho buổi workshop, họ dùng thêm công cụ chia đội ngẫu nhiên.

Nhúng iframe và gửi link chia sẻ: khi nào chọn cách nào?

Nhúng khi bạn muốn người xem quay ngay trên trang của bạn và ở lại đọc nội dung. Gửi link khi bạn chỉ cần người khác mở vòng quay nhanh, ví dụ trong nhóm chat, email hay bình luận.

Với buổi thuyết trình, cả hai cách đều có thể không tiện bằng việc chèn vòng vào slide; tham khảo cách đưa vòng quay vào PowerPoint.

Vòng quay nhúng có giữ được tính công bằng không?

Có. Vòng nhúng chạy cùng cơ chế với bản gốc: trình duyệt của chính người bấm quay rút kết quả bằng nguồn số ngẫu nhiên đạt chuẩn mật mã, trước khi hiệu ứng bắt đầu. Chủ website không thể chỉnh kết quả từ xa. Chỉ có trọng số ghi trong danh sách, và người xem có thể kiểm tra bằng cách mở link chia sẻ của vòng đó.

Nếu dùng cho chương trình có giải thưởng, nên đặt link gốc ngay dưới khung nhúng kèm dòng “Xem danh sách và tỉ lệ đầy đủ”. Sự minh bạch nhỏ này giúp khách yên tâm hơn nhiều.