Widget Preview trong ChatBox AI Muathemewpgiare
Trong quá trình thiết kế Unified Widget hoặc Live Chat Widget, hệ thống cung cấp một bản xem trước trực quan giúp bạn hình dung bố cục và giao diện widget. Tuy nhiên, để đảm bảo hiệu quả thiết kế và tránh nhầm lẫn, bạn cần phân biệt giữa mockup preview trong trang Widget Designer và real preview của widget thực tế.
Mockup Preview trên trang Widget Designer
Trên giao diện thiết kế (Widget Designer), phần xem trước widget chỉ là mô phỏng (mockup).
Mục đích của mockup:
Giúp bạn hình dung bố cục
Xem cấu trúc trang và các block
Quan sát vị trí icon, tab, hoặc phần tử giao diện
Hỗ trợ thao tác kéo – thả khi thiết kế widget
Tuy nhiên, mockup không phản ánh hoàn toàn giao diện widget thật. Một số yếu tố sẽ không hiển thị đúng như:
Hiệu ứng chuyển động (animations)
Hành vi tương tác của người dùng
Trạng thái Live/Offline
Nội dung được render động
Tích hợp chatbot hoặc live chat
Kích thước và tỷ lệ hiển thị thực tế trên website
Đây là điều bình thường vì mockup chỉ phục vụ mục đích thiết kế bố cục.
Xem widget thực tế bằng Widget Preview
Để xem widget ở chế độ hoạt động thật, bạn cần sử dụng nút Widget Preview.
Khi nhấp vào nút này:
Hệ thống sẽ tải phiên bản thật của widget
Hiển thị chính xác màu sắc, hiệu ứng, typography
Cho phép tương tác như trên website
Hoạt động giống hệt widget khi được nhúng trên trang
Tất cả hành vi như gửi tin nhắn, mở tab, hiển thị block đều được mô phỏng đúng
Điều này giúp bạn kiểm tra:
Giao diện sau khi áp dụng theme
Hành vi của launcher và menu
Sự tương thích của block trên các trang
Tính năng live chat, chatbot, knowledge base
Cách widget hiển thị trên mobile và desktop
Widget Preview là bước quan trọng để đảm bảo thiết kế đã hoàn chỉnh trước khi đưa vào website.
Tại sao cần phân biệt mockup và real preview?
Sự khác biệt giữa mockup và bản xem trước thực tế là cần thiết vì:
Mockup giúp thao tác nhanh và dễ chỉnh sửa bố cục
Real preview giúp kiểm tra tính năng và giao diện thật
Một số hiệu ứng và hoạt động phản hồi chỉ xuất hiện trong bản thật
Tránh hiểu nhầm rằng widget đang hiển thị sai khi thực tế mockup không nhằm mô phỏng đầy đủ
Do đó, khi thiết kế, bạn nên:
Dùng mockup cho bố cục và cấu trúc
Dùng Widget Preview để đánh giá cuối cùng
