"Thêm live chat vào website" nghe như một việc phải gọi lập trình viên. Thật ra với HabaChat, phần tốn thời gian nhất thường là… chọn màu cho khung chat. Bài này hướng dẫn từng bước cho từng nền tảng: WordPress, PrestaShop, OpenCart, Shopify, Haravan, Sapo, LadiPage — và cả website tự viết.
Bước 0: tạo tài khoản và lấy Widget Key
Đăng ký tài khoản HabaChat — miễn phí, mất chừng hai phút, không cần thẻ tín dụng. Sau khi đăng nhập, vào Settings → Install trong dashboard: đây là nơi chứa Widget Key và đoạn mã nhúng của riêng bạn.
Cách nhanh nhất: dán hai dòng mã (chạy trên mọi website)
Đoạn mã nhúng của HabaChat chỉ gồm hai dòng, dạng như sau:
<script id="habachat-loader">window.$habachat = {"key":"WIDGET_KEY","host":"https://habachat.com"};</script>
<script async src="https://habachat.com/widget.js"></script>
Thay WIDGET_KEY bằng key của bạn rồi dán vào cuối trang, ngay trước thẻ đóng body. Ba điều đáng biết:
- Chỉ dán vào trang khách xem — đừng dán vào trang quản trị.
- Mã nạp theo kiểu async, nghĩa là không chặn và không làm chậm trang của bạn.
- Widget vẽ trong một vùng tách riêng (Shadow DOM), nên không đụng chạm tới CSS hay giao diện sẵn có của site.
WordPress
HabaChat có plugin cho WordPress: cài plugin, dán Widget Key vào ô cấu hình, bấm lưu — xong. Không phải sửa theme, không phải chạm vào code.
PrestaShop
Đây là nền tảng chúng tôi đầu tư nhiều nhất: module HabaChat cho PrestaShop cài một chạm và tự kết nối với tài khoản của bạn — không phải copy key thủ công. Module còn gửi kèm ngữ cảnh mua sắm của khách (giỏ hàng, số đơn đã mua, trang đang xem) để nhân viên hỗ trợ nhìn thấy ngay khi trò chuyện.
OpenCart
Tương tự WordPress: cài extension HabaChat, dán Widget Key, lưu lại là khung chat xuất hiện ngoài cửa hàng.
Shopify, Haravan, Sapo, LadiPage
Các nền tảng này đều có chỗ cho phép chèn mã tuỳ chỉnh vào theme (thường ở phần chỉnh sửa giao diện hoặc "mã tuỳ chỉnh"). Dán đúng hai dòng mã ở trên vào đó là xong. Nguyên tắc chung: nền tảng nào cho phép chèn một đoạn script trước thẻ đóng body, nền tảng đó chạy được HabaChat.
Google Tag Manager
Nếu website của bạn đã gắn GTM, tạo một tag Custom HTML, dán đoạn mã vào, đặt trigger All Pages và bấm publish. Cách này tiện khi bạn không có quyền sửa mã nguồn trực tiếp.
Kiểm tra sau khi cài
Mở website ở một tab ẩn danh: bong bóng chat phải xuất hiện ở góc màn hình. Gõ thử một câu — tin nhắn phải hiện trong dashboard ngay lập tức. Nếu chưa thấy widget: kiểm tra lại Widget Key, xoá cache của website (nhất là khi dùng plugin cache), rồi tải lại trang. Vẫn kẹt? Ghé trung tâm trợ giúp hoặc nhắn cho chúng tôi — đội HabaChat hỗ trợ cài đặt cho bạn.
Ba việc nhỏ đáng làm ngay sau khi cài
- Đổi màu khung chat và lời chào theo thương hiệu của bạn (trong Settings).
- Bật chatbot tự động để ngoài giờ vẫn có "người" trực.
- Cài app iOS hoặc Android để tin nhắn mới đẩy thẳng về điện thoại.
Tài khoản mới đang được tặng trọn một năm gói Pro — đăng ký rồi cài trong 5 phút, đúng như tên bài viết.