Gắn widget chat lên website
Tạo kênh website, dán đoạn mã lên mọi trang và kiểm tra khách đã chat được với đội ngũ của bạn trong Hộp thư.
Cập nhật ngày
Trong bài này
Widget chat là bong bóng chat ở góc website của bạn. Khách bấm vào để nhắn cho shop, và tin nhắn về Hộp thư cùng chỗ với Zalo, Facebook và mọi kênh khác. Chỉ cần ba bước: thêm website trong Hạ Tầng, sao chép đoạn mã, rồi dán đoạn mã lên website.
Trước khi bắt đầu
- Module Hỗ trợ đang bật cho doanh nghiệp. Khi module tắt, widget không hiện ở đâu cả.
- Bạn có quyền Quản lý với module Hỗ trợ (chủ sở hữu và quản trị viên luôn có). Xem Nhân viên và vai trò.
- Bạn biết địa chỉ website, ví dụ
mochuongtea.vn. - Bạn, hoặc người quản lý website, có thể thêm mã hoặc cài plugin cho website.
Bước 1: thêm website
-
Vào Hỗ trợ khách hàng → Kênh và bấm Thêm kênh.
-
Trong nhóm Website & ứng dụng, chọn Website.
-
Điền biểu mẫu:
Trường Nhập gì Tên site Tên để cả đội dễ nhận ra, ví dụ "Mộc Hương Tea". Đây cũng là tiêu đề trên đầu widget; đổi lại được sau. Tên miền Địa chỉ website, không có https://, ví dụmochuongtea.vn. Widget chạy trên địa chỉ này và mọi tên miền phụ của nó, nhưwww.mochuongtea.vnhayshop.mochuongtea.vn.Origin được phép thêm Không bắt buộc. Những địa chỉ khác cần chạy widget, mỗi dòng một địa chỉ, ví dụ trang thử nghiệm https://staging.mochuongtea.vn. Phần lớn shop để trống. -
Bấm Tạo site.

Trang của website mở ra với đoạn mã đã sẵn sàng. Lần sau, bạn tìm lại nó trong Hỗ trợ khách hàng → Kênh, nhóm Website & ứng dụng.
Bước 2: sao chép đoạn mã
Trên trang của website, thẻ Cài lên website ở trên cùng hiện một đoạn mã ngắn đã có sẵn ID của website. Bấm Sao chép mã.

Bước 3: dán đoạn mã lên website
Đoạn mã được dán ngay trước </body> trên mọi trang mà bạn muốn khách chat được. Bên dưới đoạn mã, thẻ Cài lên website có hướng dẫn từng bước cho các nền tảng phổ biến; bấm vào tên nền tảng để mở.
| Website của bạn chạy trên | Cách làm |
|---|---|
| WordPress | Dùng plugin Hạ Tầng Chat: chỉ cần dán Site ID, không đụng tới mã. Xem Cài widget trên WordPress. |
| Shopify | Online Store → Themes → Edit code, mở layout/theme.liquid, dán mã ngay trước </body> rồi lưu. |
| Haravan | Website → Giao diện → Chỉnh sửa mã nguồn, mở layout/theme.liquid, dán mã trước </body> rồi lưu. |
| LadiPage | Mở landing page, trên thanh công cụ chọn Thiết lập → Mã JavaScript/CSS. Dán mã, lưu rồi xuất bản lại. Làm cho từng landing page. |
| Sapo | Website → Giao diện → Thao tác → Chỉnh sửa HTML/CSS, mở Theme.bwt, dán mã ngay trước </body> rồi lưu. |
| Google Tag Manager | Tags → New → Custom HTML, dán mã, chọn trigger All Pages, lưu rồi publish container. |
| Webflow | Project settings → Custom code → Footer code, dán mã rồi publish. |
| Website do lập trình viên làm | Gửi họ đoạn mã và hướng dẫn cho lập trình viên. Website React, Next.js có sẵn component để dùng. |
Bước 4: kiểm tra
- Mở website của bạn trên trình duyệt. Bong bóng chat hiện ở góc dưới bên phải.
- Quay lại trang của website trong Hạ Tầng, thẻ Cài lên website giờ hiện Đã cài trên tên miền của bạn và thời điểm lần cuối thấy widget. Khi widget chưa từng tải trên website, thẻ hiện Chưa phát hiện. Trạng thái cập nhật tối đa mỗi phút một lần.
- Gửi thử một tin nhắn từ widget. Tin nhắn hiện trong Hỗ trợ khách hàng → Hộp thư thành một hội thoại mới.
Trên trang Kênh, trạng thái của website chuyển từ Chưa cài sang Hoạt động.
Bước 5: nhận diện khách đã đăng nhập (nếu website có đăng nhập)
Nếu khách đăng nhập vào website của bạn, hãy để website báo cho widget khách là ai. Khi đó nhân viên thấy tên, email và nhãn Đã xác minh trong Hộp thư, khách giữ cùng một lịch sử chat trên mọi thiết bị, và liên kết hồ sơ mở đúng khách trong trang quản trị của bạn. Không làm bước này, mọi khách đều là khách lạ Chưa xác minh.
Việc này cần lập trình viên làm trên máy chủ bằng mã bí mật định danh của website. Xem cách lấy mã, việc lập trình viên cần làm và cách kiểm tra trong Nhận diện khách đã đăng nhập.
Nhiều website
Mỗi tên miền hoặc thương hiệu là một kênh website riêng: vào lại Hỗ trợ khách hàng → Kênh → Thêm kênh → Website. Mỗi website có đoạn mã, cài đặt widget và mã bí mật định danh riêng. Mọi hội thoại vẫn về chung một Hộp thư, và mỗi hội thoại ghi rõ đến từ website nào.
Các kênh như Zalo OA hay trang Facebook cũng gắn vào một website: hội thoại của chúng dùng báo cáo, quy tắc phân phối và tự động hoá của website đó. Xem Cách các kênh hoạt động.
Tạm ẩn hoặc gỡ widget
- Muốn ẩn widget mà không mất gì, mở trang của website, đặt Trạng thái thành Đã tắt (ẩn widget) rồi bấm Lưu cài đặt.
- Xoá site ở cuối trang sẽ xoá vĩnh viễn website cùng hội thoại, khách truy cập, các kênh mạng xã hội đã kết nối và app key của nó. Bạn phải gõ tên site để xác nhận. Không thể khôi phục.
Bước tiếp theo
Bài viết này có giúp ích cho bạn không?
Bài viết liên quan
- Cài widget trên WordPressGắn widget chat lên website WordPress bằng plugin miễn phí Hạ Tầng Chat, không cần sửa mã, và nhận diện người dùng đã đăng nhập.
- Tùy chỉnh giao diện widgetĐặt màu, giao diện sáng tối, vị trí, nút mở chat, đầu khung chat, ngôn ngữ và những trang hiện widget, rồi xem ngay trong khung xem trước.
- Widget không hiện trên websiteKiểm tra lần lượt những lý do thường gặp khiến bong bóng chat không hiện, từ trang bị loại trừ trong cài đặt đến sai tên miền, và cách sửa từng lỗi.
Chưa tìm thấy điều bạn cần?
Đội ngũ của chúng tôi trả lời qua chat, bằng tiếng Việt hoặc tiếng Anh.
Bạn đang tích hợp API hoặc SDK? Xem tài liệu cho lập trình viên →