Đồng hồ đếm ngược nhúng được
Tạo đồng hồ đếm ngược cho website, landing page, chương trình khuyến mãi. Chỉnh giao diện, xem trước trực tiếp rồi sao chép mã dán vào WordPress, Blogger, Shopify hoặc HTML thuần. Không cần máy chủ, cấu hình nằm ngay trong mã nhúng.
Hướng dẫn nhúng đồng hồ đếm ngược vào website
Nhúng trong 3 bước
Chọn mốc thời gian, múi giờ rồi chỉnh giao diện. Bản xem trước bên phải cập nhật ngay khi bạn chỉnh.
Bấm Sao chép mã ở phần Mã nhúng. Chọn dạng Script, hoặc iframe nếu nền tảng của bạn chặn script.
Dán mã vào vị trí muốn hiển thị trên trang, lưu lại và tải lại trang để kiểm tra.
Hướng dẫn theo nền tảng
WordPress
Trong trình soạn thảo khối, bấm dấu cộng, chọn khối Custom HTML (HTML tùy chỉnh) và dán mã vào. Bấm Xem trước để kiểm tra rồi Cập nhật. Nếu dùng trình soạn thảo cổ điển, chuyển sang tab Text (Văn bản) trước khi dán.
Blogger
Vào Bố cục (Layout), bấm Thêm tiện ích (Add a Gadget), chọn HTML/JavaScript và dán mã. Với bài viết, mở chế độ xem HTML rồi dán mã vào vị trí muốn hiển thị.
Shopify
Vào Online Store, Customize, Add section và chọn Custom Liquid (hoặc thêm block Custom Liquid vào section có sẵn), dán mã vào ô nội dung rồi Save. Nếu theme không có Custom Liquid, dùng dạng iframe trong khối HTML.
HTML thuần và nền tảng khác
Dán mã vào đúng chỗ trong file HTML. Wix, Squarespace, Webflow đều có khối Embed hoặc Custom Code, thường dùng dạng iframe cho an toàn.
Câu hỏi thường gặp về đồng hồ đếm ngược
Đồng hồ có cần máy chủ hay lưu dữ liệu của tôi không?
Không. Toàn bộ cấu hình nằm trong mã nhúng bạn dán vào website, không có tài khoản hay cơ sở dữ liệu. File countdown.js chạy hoàn toàn trên trình duyệt của khách, không gọi mạng ngoài và không có tracking.
Nên chọn dạng Script hay iframe?
Script là lựa chọn tốt nhất: nhẹ, hòa vào trang, hỗ trợ nhiều đồng hồ và dùng Shadow DOM để CSS của website không làm vỡ giao diện. Chọn iframe khi nền tảng chặn thẻ script. Đoạn script tùy chọn đi kèm sẽ tự chỉnh chiều cao iframe theo nội dung.
Vì sao đồng hồ luôn đếm đúng dù tab bị ngủ hay khách ở múi giờ khác?
Mỗi giây đồng hồ tính lại thời gian còn lại từ mốc kết thúc quy đổi sang UTC, không trừ dồn từng giây nên không bị trôi khi tab ngủ. Mốc kết thúc theo múi giờ bạn chọn, kể cả múi giờ có giờ mùa hè, nên mọi khách thấy cùng một thời điểm kết thúc.
Chế độ evergreen hoạt động thế nào?
Đồng hồ đếm ngược số giờ bạn đặt, tính từ lần đầu mỗi khách mở trang. Thời điểm đó được lưu trong localStorage của trình duyệt khách. Nếu khách xóa dữ liệu trình duyệt, dùng chế độ ẩn danh hoặc đổi thiết bị thì đồng hồ bắt đầu lại, nên không dùng cho ưu đãi cần cam kết nghiêm ngặt.
Có đặt được nhiều đồng hồ trên cùng một trang không?
Có. Dán nhiều thẻ div class htcd, mỗi thẻ một cấu hình riêng. Chỉ cần nạp script một lần, nạp lại nhiều lần cũng không tạo đồng hồ trùng.
Khi hết giờ có thể làm gì?
Bạn chọn một trong ba: hiện thông điệp tùy chỉnh, ẩn đồng hồ, hoặc chuyển hướng khách tới một URL http hoặc https. Nếu mốc thời gian đã qua ngay lúc khách mở trang, đồng hồ áp dụng luôn hành động này.