Widget Chatbot Không Hiện Trên Website – Debug Theo Từng Trường Hợp

Widget chatbot không hiện trên website và cách debug

Hướng dẫn debug lỗi widget chatbot không hiện trên website theo từng trường hợp: mã nhúng, cache, theme, plugin, domain và script.

Bạn đã cẩn thận copy đoạn mã nhúng, dán vào website và hồi hộp tải lại trang, nhưng… widget chatbot không hiện trên website. Khung chat trống trơn, không có bất kỳ biểu tượng tư vấn nào xuất hiện.

Tình trạng chat bubble bị ẩn này rất phổ biến ở giai đoạn đầu cài đặt, thường xuất phát từ vài xung đột nhỏ trong mã nguồn. Đừng quá lo lắng, bài viết này sẽ cung cấp một checklist debug widget website chuẩn xác, giúp bạn tự sửa lỗi chat icon website nhanh chóng mà không cần phải viết ticket chờ đội ngũ hỗ trợ.

Kiểm tra Script có được load không

Nguyên nhân cơ bản nhất khiến widget chatbot không hiển thị là do website hoàn toàn chưa nhận được đoạn mã (Script) của bạn.

  • Vị trí chèn mã: Đoạn Script bắt buộc phải nằm ngay phía trên thẻ đóng </body>.

  • Lỗi do Theme/Builder: Nếu bạn đang lập trình giao diện tùy biến (sửa trực tiếp file footer.php trong WordPress) hoặc sử dụng các trình dựng trang như PageLayer, đôi khi đoạn mã JS có thể bị hệ thống tự động lọc (strip tags) không cho phép lưu, hoặc bị đẩy vào sai phân vùng hiển thị.

  • Cách kiểm tra nhanh: Mở website của bạn, nhấn Ctrl + U (View Page Source). Nhấn Ctrl + F và gõ một phần đoạn mã BotKey của bạn xem nó có thực sự tồn tại trong mã nguồn hay không.

Lỗi Content Security Policy (CSP)

Nếu website của bạn được thiết lập bảo mật cao (đặc biệt là các trang thương mại điện tử hoặc tập đoàn), hệ thống có thể đang chặn các đoạn mã từ bên thứ ba.

  • Vấn đề: Content Security Policy (CSP) là lớp khiên bảo vệ website. Nếu tên miền máy chủ chatbot của Mimo không nằm trong danh sách trắng (Whitelist), trình duyệt sẽ từ chối tải script.

  • Cách khắc phục: Cần yêu cầu quản trị viên web (Webmaster) bổ sung tên miền của chatbot vào header Content-Security-Policy của máy chủ.

Lỗi z-index: Widget bị che khuất

Đôi khi, đoạn mã đã chạy thành công, biểu tượng chat đã xuất hiện nhưng bạn không nhìn thấy vì nó đang bị một thành phần khác “đè” lên.

  • Vấn đề: Trong CSS, thuộc tính z-index quyết định lớp nào nằm trên, lớp nào nằm dưới. Nếu Footer của website hoặc các nút tiện ích khác (nút Gọi điện, Zalo rung) có z-index cao hơn, chúng sẽ che khuất hoàn toàn chatbot.

  • Cách khắc phục: Bạn có thể vào trình quản trị của chatbot, điều chỉnh lại vị trí hiển thị (đẩy sang Bottom-Left thay vì Bottom-Right) hoặc tăng khoảng cách đệm (Margin/Padding) để né các nút tiện ích có sẵn trên web.

Cache trình duyệt và Cache Website

Bộ nhớ đệm (Cache) giúp website tải nhanh hơn nhưng lại là “kẻ thù” khi bạn vừa thêm mã code mới.

  • Trình duyệt: Trình duyệt của bạn có thể đang tải lại bản lưu cũ của website từ hôm qua. Hãy nhấn Ctrl + F5 (Hard Refresh) hoặc mở trang web bằng Tab Ẩn danh (Incognito Mode) để kiểm tra.

  • Website Cache: Nếu bạn dùng WordPress với các plugin như LiteSpeed Cache, WP Rocket, hoặc dùng proxy như Cloudflare, hệ thống sẽ giữ lại bản giao diện cũ (không có mã chatbot) để phục vụ khách. Bạn bắt buộc phải vào phần quản trị web và bấm Purge Cache / Clear Cache toàn trang.

Xung đột với Plugin/Theme (JS Defer/Delay)

Để tối ưu điểm tốc độ Google PageSpeed, nhiều website cài đặt tính năng “Trì hoãn thực thi JavaScript” (Delay JS execution) hoặc “Thu nhỏ mã” (Minify JS).

  • Vấn đề: Các plugin này có thể gom đoạn mã chatbot của bạn chung với các mã khác làm gãy cấu trúc, hoặc bắt chatbot phải “ngủ đông” cho đến khi người dùng cuộn chuột.

  • Cách khắc phục: Truy cập vào cài đặt của plugin tăng tốc web, tìm mục Exclude Scripts (Loại trừ mã) và dán đường link URL script của chatbot vào. Việc này báo cho website biết hãy để mã chatbot được chạy tự do, độc lập.

Sử dụng Console DevTools để bắt bệnh

Nếu đã thử các cách trên mà sửa lỗi chat icon vẫn không thành công, đã đến lúc sử dụng công cụ mạnh mẽ nhất: Trình duyệt DevTools.

  1. Mở website của bạn, nhấn phím F12 (hoặc chuột phải chọn Inspect/Kiểm tra).

  2. Chuyển sang tab Console.

  3. Tìm các dòng chữ báo lỗi màu đỏ:

    • Lỗi 404 Not Found: Đường link script bị sai hoặc máy chủ bot đang bảo trì.

    • Lỗi CORS (Cross-Origin Request Blocked): Tên miền website của bạn chưa được đưa vào danh sách Allowlist Domain trong Dashboard chatbot. (Hãy xem lại bước Cấu hình Allowlist tại Cách Cài Đặt Widget Chatbot AI Lên Website Chỉ Trong 10 Phút).

    • Lỗi Refused to load script: Chính là lỗi CSP đã nhắc đến ở phần 2.

Để nắm rõ toàn bộ bức tranh kiến trúc và các bước vận hành chuẩn xác nhằm tránh lỗi ngay từ đầu, bạn nên đối chiếu lại quy trình với bài Hướng Dẫn Toàn Diện Cài Đặt & Vận Hành Chatbot AI Cho Website.

Câu hỏi thường gặp (FAQ)

1. Khung chat hiện rất tốt trên máy tính nhưng trên điện thoại lại biến mất?

Có thể do giao diện CSS trên nền tảng Mobile của bạn đang được thiết lập display: none cho các phần tử nhúng từ bên thứ ba, hoặc do tính năng tối ưu di động của theme đang chủ động chặn mã JS để tăng tốc load trang.

2. Tôi cài bot trên môi trường Localhost (XAMPP/WAMP) thì có hiện không?

Hầu hết các hệ thống chatbot AI có bảo mật CORS sẽ chặn hiển thị nếu tên miền là localhost hoặc IP 127.0.0.1 trừ khi bạn cấu hình allowlist riêng cho môi trường dev. Để test chính xác nhất, hãy đưa lên môi trường Staging có tên miền thực tế.

3. Tại sao tôi dùng builder kéo thả để chèn mã HTML mà bot vẫn không chạy?

Một số widget “Custom HTML” của các trình dựng trang sẽ tự động lọc bỏ thẻ <script> vì lý do bảo mật (XSS prevention). Cách tốt nhất là dùng plugin chuyên dụng như Insert Headers and Footers để chèn mã thay vì nhét trực tiếp vào trình dựng trang.

Có thể bạn quan tâm

Mimo Group
Chuyên SEO, thiết kế website và marketing online cho doanh nghiệp.