Cách thêm Asyntai AI Chatbot vào WordPress

Hướng dẫn từng bước cho các trang web WordPress

Nền tảng:

Bước 1: Lấy Mã Nhúng của Bạn

Trước tiên, hãy vào Bảng điều khiển Asyntai và cuộn xuống phần "Mã nhúng". Sao chép mã nhúng riêng của bạn, mã này sẽ trông như sau:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Lưu ý: Mã ở trên chỉ là ví dụ. Bạn phải sao chép mã nhúng duy nhất của riêng mình từ Bảng điều khiển vì nó chứa ID tiện ích cá nhân của bạn.

Bước 2: Chọn Phương pháp Cài đặt

Có nhiều cách để thêm widget chat vào WordPress. Chọn phương pháp phù hợp nhất với bạn:

Phương pháp 1: Sử dụng Plugin (Khuyến nghị)

Cách dễ nhất để thêm widget chat là dùng plugin miễn phí "WPCode" (trước đây có tên "Insert Headers and Footers").

Sử dụng WPCode (Miễn phí)

Vào Plugins → Add Plugin trong trang quản trị WordPress
Tìm kiếm "WPCode" và cài đặt nó
Kích hoạt plugin
Vào Code Snippets → Header & Footer
Dán mã nhúng Asyntai của bạn vào phần "Footer"
Nhấp "Save Changes"

Tại sao nên sử dụng plugin? Sử dụng plugin đảm bảo mã của bạn vẫn được giữ nguyên ngay cả khi bạn cập nhật hoặc thay đổi giao diện WordPress của bạn.

Phương pháp 2: Chỉnh sửa tệp giao diện

Bạn có thể thêm mã trực tiếp vào các tệp giao diện của bạn. Vị trí của Trình chỉnh sửa tệp giao diện phụ thuộc vào phiên bản WordPress và loại giao diện của bạn.

Dành cho giao diện cổ điển

Vào Appearance → Theme File Editor trong trang quản trị WordPress của bạn
Chọn giao diện đang hoạt động của bạn từ danh sách thả xuống
Tìm và nhấp vào footer.php trong danh sách tệp bên phải
Cuộn xuống cuối và tìm thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước thẻ </body>
Nhấp "Update File"

Dành cho giao diện khối (Giao diện FSE)

Giao diện khối (như Twenty Twenty-Four và các giao diện Full Site Editing khác) không có tệp footer.php và không có thẻ </body> trong các tệp giao diện. Với giao diện khối, hãy dùng phương pháp plugin (WPCode), phương pháp này hoạt động với mọi loại giao diện.

Quan trọng: Các bản cập nhật giao diện sẽ ghi đè các thay đổi của bạn. Để có giải pháp vĩnh viễn, hãy sử dụng giao diện con hoặc phương pháp plugin thay thế.

Phương pháp 3: Sử dụng Elementor

Nếu bạn đang sử dụng Elementor, bạn có thể thêm mã thông qua tính năng mã tùy chỉnh của Elementor.

Elementor Pro

Vào Elementor → Custom Code
Nhấp "Add New"
Đặt tên cho nó, ví dụ "Asyntai Chatbot"
Đặt Location thành "<body> – End"
Dán mã nhúng Asyntai của bạn
Đặt Điều kiện hiển thị thành "Entire Site"
Nhấp "Publish"

Elementor Free

Nếu bạn đang sử dụng phiên bản miễn phí của Elementor, hãy sử dụng phương pháp plugin được mô tả ở trên, vì tính năng chèn mã tùy chỉnh yêu cầu Elementor Pro.

Bước 3: Xác minh Cài đặt

Sau khi thêm mã, hãy truy cập trang web của bạn trong một tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút widget chat ở góc dưới bên phải của trang web. Nhấp vào để đảm bảo nó mở và hoạt động đúng.

Không thấy tiện ích? Xóa bộ nhớ đệm trình duyệt và bất kỳ plugin lưu đệm WordPress nào. Nếu bạn đang sử dụng plugin lưu đệm như WP Rocket hoặc W3 Total Cache, hãy xóa bộ nhớ đệm sau khi thêm mã.

Thêm Thanh tìm kiếm AI

Thanh tìm kiếm AI là một widget riêng với mã riêng. Thêm nó cùng với chat, hoặc dùng một mình. Nó cần gói Standard trở lên: ở gói thấp hơn, thanh vẫn hiện nhưng không trả về kết quả.

Thêm thuộc tính data-replace vào thẻ script và thanh này sẽ thay chỗ thanh sẵn có của giao diện. Thêm nó bằng chính plugin header và footer mà bạn đã dùng cho mã chat, chẳng hạn WPCode. Script không cần nằm gần ô tìm kiếm của bạn, vì vậy bạn không cần chỉnh sửa tệp giao diện nào.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

Đọc hướng dẫn đầy đủ về Thanh tìm kiếm AI

Tài liệu