Cách gắn chatbot vào website: dán một đoạn mã, Setup trong 10 phút (WordPress, Haravan, Sapo, Ladipage)

Khách vào website lúc 11 giờ đêm. Họ hỏi còn size không, phí ship bao nhiêu. Không ai trả lời. Sáng ra, họ đã mua ở shop khác.

Một chatbot AI trên website giữ lại những khách đó. Bài này hướng dẫn cách gắn chatbot vào website bằng một đoạn mã. Có từng bước cho WordPress, Haravan, Sapo, Ladipage, Shopify, Wix và website tự code. Setup trong 10 phút.

Chatbot AI trên website làm được gì cho shop

Khung chat nằm ở góc trang. Khách bấm là hỏi được ngay, không phải điền form rồi chờ.

• Bot tư vấn sản phẩm, trả lời giá, size, chính sách đổi trả theo thông tin shop đã nhập.

• Bot chốt đơn và đặt lịch hẹn ngay trong chat, giống bot trên Messenger.

• Tin nhắn từ website về chung hộp thư với Fanpage và Instagram. Mỗi cuộc chat có nhãn nguồn web.

• Khách gửi được ảnh mẫu, ảnh sản phẩm lỗi. Bot xem ảnh để tư vấn tiếp.

Nếu anh chị chưa rõ chatbot AI khác chatbot kịch bản thế nào, xem thêm bài chatbot Facebook là gì.

Cách gắn chatbot vào website: 3 bước chung

Nền tảng nào cũng đi qua 3 bước này. Chỉ khác chỗ dán mã.

Bước 1: Bật kênh Website và khai tên miền

Vào Dashboard ChatPilot, mở Kênh kết nối, bật Website. Nhập tên miền của shop, ví dụ shopcuaban.vn.

Bước này bắt buộc. Widget chỉ chạy trên tên miền đã khai. Ai copy mã sang web khác cũng không dùng được.

Shop đã kết nối Fanpage trên ChatPilot thì không cần tạo trang mới. Chỉ cần bật thêm kênh Website.

Bước 2: Chỉnh khung chat cho giống shop

Anh chị chỉnh được:

• Tên khung chat, lời chào, màu chính, icon nút chat.

• Vị trí nút: góc phải dưới hoặc góc trái dưới.

• Câu hỏi gợi ý để khách bấm hỏi nhanh.

• Form hỏi tên, email, số điện thoại trước khi chat.

• Nút chuyển sang Messenger hoặc Zalo.

• Ẩn widget ở trang không cần, ví dụ trang thanh toán /checkout.

• Bật hoặc tắt gửi ảnh. Mỗi tin khách gửi tối đa 3 ảnh, mỗi ảnh tối đa 5 MB.

Bước 3: Copy đoạn mã và dán vào website

Trong Dashboard có sẵn đoạn mã của shop. Đoạn mã có dạng:

<script src="https://chatpilot.vn/widget/widget.js" data-widget-id="ma-widget-cua-shop" async></script>

Dán vào phần header hoặc footer đều được. Mã tải bất đồng bộ (async), nên không chặn trang hiển thị. Lưu lại, tải lại website là thấy nút chat.

Hướng dẫn dán mã theo từng nền tảng

Không cần plugin riêng. Nền tảng nào cho chèn JavaScript là dán được. Tên menu có thể khác một chút tùy phiên bản và giao diện anh chị đang dùng.

WordPress

Cách 1: dùng một plugin chèn mã vào header và footer mà anh chị tin dùng. Dán đoạn mã vào ô footer, lưu lại.

Cách 2: vào Giao diện, Trình chỉnh sửa giao diện, mở file footer.php. Dán mã ngay trước thẻ đóng body. Nên làm trên theme con để cập nhật theme không mất mã.

Haravan

Vào trang quản trị, mở Website, chọn Giao diện. Ở giao diện đang dùng, chọn chỉnh sửa code. Mở file layout chính (thường là theme.liquid). Dán mã trước thẻ đóng body, lưu lại.

Sapo

Vào trang quản trị, mở Website, chọn Giao diện. Chọn sửa code giao diện đang dùng. Mở file layout chính, dán mã trước thẻ đóng body, lưu lại.

Ladipage

Mở trang cần gắn chatbot trong trình chỉnh sửa. Vào phần cài đặt trang, tìm ô chèn mã vào head hoặc body. Dán đoạn mã, lưu và xuất bản lại trang. Mỗi landing page cần gắn riêng nếu anh chị chèn theo từng trang.

Shopify

Vào Online Store, Themes, chọn Edit code. Mở file theme.liquid, dán mã trước thẻ đóng body, lưu lại.

Wix

Vào phần cài đặt website, tìm mục Custom Code. Thêm đoạn mã, chọn áp dụng cho tất cả các trang, vị trí body cuối trang.

Website tự code (HTML)

Dán mã trước thẻ đóng body trong file layout chung. Nhờ dev deploy một lần là xong.

Không có website? Dùng link chat và mã QR

Mỗi khung chat có một link công khai dạng chatpilot.vn/c/ten-shop. Anh chị gửi link này qua email, gắn vào bio Instagram, hoặc in thành mã QR dán ở quầy, trên tờ rơi. Khách quét là chat với bot ngay.

Sau khi gắn: kiểm tra và vận hành

Mở website trên điện thoại và máy tính, gửi thử vài câu khách hay hỏi. Xem bot trả lời có đúng giá, đúng chính sách không. Chỗ nào chưa đúng thì bổ sung thông tin sản phẩm và câu hỏi thường gặp trong Dashboard.

Tin nhắn website hiện trong hộp thư chung với Fanpage và Instagram. Muốn tự trả lời một khách, mở cuộc trò chuyện, tắt AI cho cuộc đó rồi gõ tay.

Bot trên website tư vấn, chốt đơn và đặt lịch như trên Messenger. Đơn và lịch hẹn shop xem lại trong dashboard. Muốn bot trả lời tin nhắn tốt hơn, xem thêm 15 kịch bản chatbot bán hàng.

Lỗi hay gặp khi gắn chatbot vào website

Dán mã rồi mà không thấy nút chat. Kiểm tra tên miền đã có trong danh sách được phép chưa. Kiểm tra đã lưu hoặc xuất bản theme chưa. Xóa cache trình duyệt và cache plugin. Xem trang đó có nằm trong danh sách ẩn widget không.

Nút chat hiện nhưng bot không trả lời. Vào Cấu hình AI, kiểm tra AI đang bật.

Có tên miền www và không www. Khai cả hai nếu website chạy được ở cả hai địa chỉ.

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

Không biết code có gắn chatbot lên website được không? Được. Anh chị chỉ copy một đoạn mã và dán vào header hoặc footer. Không phải viết thêm dòng code nào.

Gắn chatbot có làm website chậm không? Đoạn mã tải bất đồng bộ (async), nên không chặn nội dung trang hiển thị.

Tin nhắn từ website xem ở đâu? Ở chung hộp thư với Fanpage và Instagram, có nhãn nguồn web.

Đã dùng ChatPilot cho Fanpage, thêm website có phải làm bot lại không? Không. Bật thêm kênh Website, bot dùng chung thông tin sản phẩm và cách tư vấn đã có.

Khách gửi ảnh qua khung chat thì sao? Bot xem được ảnh để tư vấn. Mỗi tin tối đa 3 ảnh, mỗi ảnh tối đa 5 MB. Anh chị tắt được tính năng này.

Gắn chatbot cho website ngay hôm nay

Khách hỏi trên website mà được trả lời liền thì dễ ở lại hơn. Setup trong 10 phút, dán một đoạn mã là xong. Xem đầy đủ tính năng ở trang chatbot AI cho website.

Tạo chatbot miễn phí