Popup XD – Plugin tạo popup WordPress xem trước trực tiếp, hỗ trợ Elementor

Nội dung chi tiết

Popup hiện đúng lúc thì ra khách, hiện sai lúc thì khách thoát trang. Popup XD giúp bạn làm popup báo giá, đăng ký lái thử, nhận ưu đãi bằng Elementor hoặc trình soạn thảo WordPress, thấy ngay popup trông thế nào trên Desktop, Tablet, Mobile trước khi lưu, rồi tự đóng khi khách đã gửi form và không làm phiền lại khách đó.

Popup XD là gì?

Popup XD là plugin WordPress miễn phí để tạo popup: nội dung lấy từ mẫu Elementor đã lưu (chạy được với Elementor bản miễn phí) hoặc từ trình soạn thảo WordPress. Bạn chọn lúc nào popup hiện, hiện ở trang nào, trên thiết bị nào và bao lâu hiện lại một lần. Popup chỉ tải CSS/JS ở những trang thật sự có popup, nên không làm nặng cả website.

• Phiên bản: 1.3.0
• Yêu cầu: WordPress 5.6+, PHP 7.2+ (Elementor không bắt buộc)
• Tác giả: Vĩnh XD

Tính năng chính của Popup XD

Xem trước trực tiếp, đúng kích thước màn hình thật

Ngay trong trang sửa popup có khung xem trước nằm cạnh phần cài đặt. Đổi độ rộng, bo góc, màu nền mờ, nút X, hiệu ứng… là khung cập nhật ngay, không cần bấm Lưu. Chuyển qua lại Desktop 1280px, Tablet 820px, Mobile 390px; khung còn ghi rõ kích thước thực tế của popup (vd: “Hiển thị thực tế: 460 × 359px”) để bạn canh cho vừa.

Làm nội dung bằng Elementor, mở trình soạn ở tab mới

Chọn mẫu Elementor có sẵn, hoặc bấm Tạo mẫu mới: plugin tạo sẵn mẫu trống, chọn luôn cho popup và mở Elementor ở tab mới. Thiết kế xong quay lại tab popup, khung xem trước tự làm mới. CSS riêng của mẫu được nạp đầy đủ, popup ngoài site trông đúng như trong Elementor.

5 cách mở popup

• Sau X giây kể từ lúc vào trang.
• Khi cuộn đến X% chiều cao trang.
• Khi khách định thoát trang (đưa chuột lên thanh tab).
• Khi click vào nút/ảnh có class bất kỳ — gõ đúng tên class trong ô “Class CSS” của Elementor, vd: baogiaxd.
• Thủ công: shortcode [popupxd id="123"], link #popupxd-123 dán vào nút/menu bất kỳ, hoặc gọi PopupXD.open(123).

Tự đóng khi khách gửi form — hỗ trợ Fluent Forms, Contact Form 7, Elementor Pro Forms

Khách gửi form thành công bên trong popup: popup chờ vài giây cho khách đọc lời cảm ơn rồi tự đóng, và không tự hiện lại với khách đó trong 30 ngày (tự chỉnh được). Khách đã để lại số thì không bị popup làm phiền nữa.

Bottom sheet cho điện thoại

Bật một tùy chọn là trên mobile popup trượt lên từ đáy màn hình, rộng hết chiều ngang, có thanh kéo — ngón cái dễ chạm, nhìn tự nhiên như ứng dụng. Nút X luôn có vùng bấm tối thiểu 44×44px nên không bấm trượt.

Đúng nơi, đúng thiết bị, đúng tần suất

• Hiện trên toàn site, hoặc chọn từng trang (có ô tìm kiếm) và từng loại nội dung (bài viết, sản phẩm, xe…).
• Loại trừ theo ID trang/bài viết.
• Bật/tắt riêng cho Desktop, Tablet, Mobile — popup không dành cho thiết bị đó sẽ không hiện và không khóa cuộn trang.
• Mỗi khách chỉ thấy 1 lần trong N ngày; chọn tính “đã xem” khi khách bấm đóng hoặc ngay khi popup hiện ra.
• Có cảnh báo khi đặt popup tự hiện quá sớm trên mobile — kiểu popup dễ bị Google đánh giá là gây khó chịu.

Đo hiệu quả bằng Google Tag Manager / GA4

Popup tự đẩy sự kiện vào dataLayer: popupxd_open (kèm nguồn kích hoạt), popupxd_close, popupxd_click và popupxd_form_submit. Sự kiện gửi form dùng làm chuyển đổi Google Ads rất tiện — biết chính xác popup nào ra khách.

Quản lý gọn trong danh sách

Mỗi popup có công tắc Bật/Tắt ngay trong danh sách, dòng tóm tắt dễ đọc (vd: “Hiện sau 8 giây hoặc khi cuộn 40% · ở 1 trang · mỗi người 1 lần/7 ngày”), nút Nhân bản, Xuất/Nhập JSON để chuyển popup sang website khác.

Hướng dẫn cài đặt Popup XD

1. Tải file popup-xd-v1.3.0.zip bằng nút tải ở trang này.
2. Vào Plugin → Cài mới → Tải plugin lên, chọn file zip, cài đặt và kích hoạt. (Nâng cấp từ bản cũ: chọn Thay thế bản hiện tại — cấu hình popup cũ được giữ nguyên.)
3. Menu quản trị sẽ có mục Popup XD.

Tạo popup đầu tiên

1. Vào Popup XD → Thêm Popup, đặt tên (vd: “Nhận báo giá lăn bánh”).
2. Tab 1. Nội dung: chọn mẫu Elementor (hoặc bấm Tạo mẫu mới), hoặc soạn ngay trong trình soạn thảo WordPress. Có thể chèn shortcode form của Fluent Forms / Contact Form 7.
3. Tab 2. Giao diện: độ rộng, bo góc, nút X, hiệu ứng, kiểu bottom sheet cho mobile — xem kết quả ngay ở khung bên cạnh.
4. Tab 3. Kích hoạt: chọn lúc popup hiện, tần suất, và hành vi sau khi khách gửi form.
5. Tab 4. Nơi hiển thị: toàn site hoặc trang cụ thể, thiết bị, trang loại trừ.
6. Bấm Đăng. Cần nút mở popup thì lấy shortcode hoặc link #popupxd-ID ở tab 5. Nút & đo lường (có nút Sao chép).

Mẹo: màn hình rộng thì khung xem trước nằm cạnh phần cài đặt và dính theo khi cuộn. Nếu khung nằm phía dưới, vào Tùy chọn hiển thị (Screen Options) ở góc trên, chọn bố cục 1 cột để có thêm chỗ.

Đo chuyển đổi popup trong Google Tag Manager

1. Trong GTM, tạo trigger Custom Event, tên sự kiện popupxd_form_submit.
2. Gắn trigger đó vào tag GA4 Event hoặc Google Ads Conversion.
3. Muốn tách số liệu theo từng popup: tạo biến Data Layer popupxd_title hoặc popupxd_id.

Câu hỏi thường gặp về Popup XD

Dành cho ai?

Popup XD hợp với người làm website bán hàng, tư vấn ô tô, bất động sản, dịch vụ đang dùng WordPress — muốn có popup báo giá, đăng ký lái thử, nhận ưu đãi đẹp, đúng lúc, đo được hiệu quả, mà không phải mua plugin popup trả phí.