Cách Cài Đặt Widget Chatbot AI Lên Website Chỉ Trong 10 Phút
Việc cài đặt widget chatbot AI lên website giờ đây cực kỳ đơn giản và hoàn toàn cài chatbot không cần code. Mục tiêu của bài viết này là giúp bạn tự tay copy đoạn mã (snippet), dán vào website, tùy chỉnh màu sắc và test thử thành công chỉ với vài thao tác. Toàn bộ quá trình tích hợp bot widget 10 phút là xong!
Yêu cầu tối thiểu (Trước khi cài đặt)
Để quá trình thêm chat widget website diễn ra suôn sẻ, bạn cần chuẩn bị sẵn:
- Quyền truy cập Dashboard: Bạn đã tạo bot thành công trên hệ thống của Mimo Group.
- Quyền quản trị website:
- Nếu dùng WordPress: Cần tài khoản Admin hoặc quyền chỉnh sửa giao diện (Theme).
- Nếu dùng HTML thuần: Cần quyền sửa file mã nguồn (template/layout).
- Nếu dùng Shopify: Cần quyền chỉnh sửa code giao diện (Theme code).
- Bảo mật: Website của bạn nên đang chạy trên giao thức HTTPS (khuyến nghị).
- Tên miền: Nắm rõ domain chính thức để đưa vào danh sách cho phép (Allowlist), tránh việc người khác lấy mã của bạn gắn lên web lạ.
Bước 1: Copy snippet code từ Dashboard
- Đăng nhập vào Dashboard quản trị, chọn bot bạn muốn cài đặt.
- Chuyển sang mục Widget / Embed (Nhúng mã).
- Tại đây, hệ thống sẽ cung cấp một đoạn mã Javascript (Snippet). Bạn chỉ cần nhấn nút Copy toàn bộ thẻ
<script>...</script>.
Lưu ý quan trọng:
- Tuyệt đối không chỉnh sửa thông số
bot_key(Mã định danh bot của bạn) trong đoạn mã. Nếu bạn chưa rõ mã này lấy ở đâu, hãy xem lại bài viết BotKey Là Gì? Cách Lấy Và Sử Dụng Mã Xác Thực Bot Của Bạn. - Đảm bảo copy đầy đủ dấu ngoặc nhọn
< >của thẻ script.
Bước 2: Dán code vào website (WordPress / HTML / Shopify)
Tùy thuộc vào nền tảng website đang sử dụng, bạn chọn 1 trong các cách nhúng chatbot vào website dưới đây. Nguyên tắc chung là luôn đặt đoạn mã này ngay trước thẻ đóng </body>.
Website WordPress (3 cách phổ biến)
- Cách A (Khuyên dùng – An toàn nhất): Dùng Plugin
- Cài đặt và kích hoạt plugin Insert Headers and Footers (hoặc WPCode).
- Vào mục cài đặt của plugin, tìm ô Scripts in Footer (Mã dán ở phần chân trang).
- Dán đoạn mã đã copy vào và nhấn Save.
- Cách B: Dùng các trình dựng trang (Page Builder)
Nếu bạn đang phát triển website bằng các công cụ kéo thả như PageLayer hay Elementor, bạn có thể dễ dàng dán snippet này vào phần “Custom Code” (Mã tùy chỉnh) trong cài đặt của builder và thiết lập cho mã chạy trên toàn bộ trang (Load toàn site). - Cách C: Can thiệp file Theme (Dành cho người rành kỹ thuật)
Vào Appearance (Giao diện) → Theme File Editor → Tìm filefooter.php→ Dán mã ngay phía trên thẻ</body>. (Lưu ý: Nếu update theme, đoạn code này có thể bị mất. Bạn nên dùng Child Theme để an toàn hơn).
Website HTML thuần / Codebase
Mở file layout chung của toàn bộ website (thường là index.html, layout.html, app.ejs, hoặc base.twig…). Cuộn xuống cuối file, dán đoạn mã ngay phía trên thẻ </body> và lưu lại.
Website Shopify
- Vào Online Store → Themes.
- Bấm vào nút Actions (Dấu 3 chấm) → Chọn Edit code.
- Tìm file
layout/theme.liquid, cuộn xuống dưới cùng và dán snippet ngay trước thẻ</body>. Nhấn Save.
Bước 3: Kiểm tra widget hiển thị (Checklist 2 phút)
Sau khi dán mã, hãy ra trang chủ website của bạn và làm theo các bước sau:
- Xóa bộ nhớ đệm (Hard Refresh): Nhấn
Ctrl + F5(Windows) hoặcCmd + Shift + R(Mac). - Kiểm tra trực quan: Biểu tượng (icon) chatbot đã xuất hiện ở góc dưới cùng chưa?
- Tương tác thử: Bấm mở cửa sổ chat và gửi một tin nhắn bất kỳ xem bot có phản hồi không.
Xử lý sự cố nếu widget không hiện:
- Mở DevTools trên trình duyệt (nhấn F12) → Sang tab Console để xem có báo lỗi chữ đỏ nào không.
- Kiểm tra xem website của bạn có đang dùng plugin tăng tốc/cache (như LiteSpeed Cache) chặn minify Javascript không. Hãy xóa cache toàn trang.
- Đảm bảo website không có chính sách bảo mật CSP (Content Security Policy) chặn script từ domain bên ngoài.
Để hiểu toàn cảnh hơn về hệ thống, bạn có thể xem hướng dẫn cài chatbot tổng quan tại bài Hướng Dẫn Toàn Diện Cài Đặt & Vận Hành Chatbot AI Cho Website.
Bước 4: Cấu hình màu sắc và vị trí hiển thị
Để chatbot trông như một phần “máu thịt” của website, bạn hãy quay lại Dashboard của Mimo để tinh chỉnh giao diện (Thay đổi sẽ tự động cập nhật trên web mà không cần dán lại code).
- Màu sắc (Primary Color): Hãy nhập mã màu chủ đạo của thương hiệu bạn. Ví dụ: Nếu bạn thuộc hệ sinh thái Mimo Group, hãy thiết lập màu cam (
#FF7A18) làm màu chính và màu xám làm màu phụ trợ. - Vị trí: Tùy chọn đặt ở góc dưới cùng bên phải (Bottom-Right) hoặc bên trái (Bottom-Left).
- Văn bản: Sửa câu chào mở đầu và chữ mờ (placeholder) ở ô nhập liệu sao cho thân thiện với chuẩn ngôn từ SEO của bạn.
💡 Best Practice (Thực hành chuẩn):
Hãy mở website bằng điện thoại để kiểm tra. Đảm bảo cửa sổ chatbot không đè lên các nút gọi điện (Call), Zalo, hay nút “Mua hàng” cố định trên bản Mobile.
Câu hỏi thường gặp (FAQ)
1. Tôi đã dán code rồi nhưng không thấy widget hiện lên?
90% nguyên nhân là do website đang lưu cache. Hãy thử xóa cache của trình duyệt và xóa cache của plugin trên website (Purge Cache). Nếu vẫn không được, hãy kiểm tra lại xem bạn đã thêm tên miền vào Allowlist trong Dashboard chưa.
2. Gắn đoạn mã này có làm chậm tốc độ tải trang (chuẩn SEO) không?
Không đáng kể. Mã được thiết kế tải bất đồng bộ (async) và việc đặt trước thẻ </body> giúp giao diện website chính hiển thị xong toàn bộ rồi mới bắt đầu tải khung chat.
3. Tôi có thể cài một mã chatbot cho nhiều domain khác nhau được không?
Hoàn toàn được. Bạn chỉ cần đưa các domain đó (kể cả domain staging/kiểm thử) vào danh sách Allowlist là hệ thống sẽ tự động nhận diện.
4. Khách hàng chat liên tục thì có bị giới hạn gì không?
Có. Để bảo vệ ngân sách và chống spam, hệ thống có thiết lập ngưỡng giới hạn tin nhắn cho mỗi phiên.
Vui lòng tham khảo chi tiết tại bài Giới Hạn Bot: Session, Token, Request – Cần Biết Trước Khi Dùng để setup kịch bản chuyển giao (Handoff) hợp lý.
5. Widget có hoạt động tốt trên điện thoại không?
Có, giao diện chatbot được thiết kế Responsive 100%, tự động thu gọn và tính toán vùng hiển thị an toàn (Safe area) để không tràn viền trên các thiết bị di động.
Mimo Group Chuyên SEO, thiết kế website và marketing online cho doanh nghiệp.