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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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à sử dụng plugin như "Insert Headers and Footers" hoặc "WPCode".

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

Vào Plugins → Add New trong trang quản trị WordPress của bạn
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"

Sử dụng Insert Headers and Footers

Vào Plugins → Add New trong trang quản trị WordPress của bạn
Tìm kiếm "Insert Headers and Footers" của WPBeginner
Cài đặt và kích hoạt plugin
Vào Settings → Insert Headers and Footers
Dán mã nhúng Asyntai của bạn vào ô "Scripts in Footer"
Nhấp "Save"

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)

Nếu bạn đang sử dụng giao diện dựa trên khối (như Twenty Twenty-Four hoặc các giao diện Chỉnh sửa toàn trang khác), Trình chỉnh sửa tệp giao diện đã được chuyển:

Vào Tools → 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 footer.php hoặc footer.html trong danh sách tệp
Thêm mã nhúng Asyntai của bạn trước thẻ đóng </body>
Nhấp "Update File"

Lưu ý: Một số giao diện khối không có tệp footer.php. Trong trường hợp đó, hãy sử dụng phương pháp plugin (WPCode) hoạt động với tất cả các 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 Vị trí thành "Before </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 bằng đúng plugin header và footer bạn đã dùng cho mã chat, ví dụ Code Snippets hoặc Insert Headers and Footers. Script không cần nằm cạnh ô tìm kiếm, nên bạn không phải 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