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

Nền tảng:

WooCommerce

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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:

Bước 2: Sử dụng Plugin (Khuyến nghị)

Cách dễ nhất để thêm chatbot vào cửa hàng WooCommerce của bạn là sử dụng plugin đầu trang/chân trang miễn phí:

1. Đăng nhập vào Bảng điều khiển Quản trị WordPress của bạn
2. Vào Plugins → Add New
3. Tìm kiếm "Insert Headers and Footers" của WPCode (hoặc plugin tương tự)
4. Nhấp "Install Now" rồi "Activate"
5. Vào Code Snippets → Header & Footer (hoặc trang cài đặt của plugin)
6. Dán mã nhúng Asyntai của bạn vào phần "Footer"
7. Nhấp "Save Changes"

Thay thế: Sử dụng Tùy chỉnh giao diện

Nhiều giao diện WooCommerce có tùy chọn tích hợp sẵn để thêm kịch bản tùy chỉnh:

1. Vào Appearance → Customize
2. Tìm phần có tên "Additional CSS/JS", "Custom Code", hoặc "Footer Scripts"
3. Dán mã nhúng Asyntai của bạn vào trường phù hợp
4. Nhấp "Publish" để lưu các thay đổi của bạn

Thay thế: Chỉnh sửa tệp giao diện (functions.php)

Dành cho nhà phát triển hoặc những người thoải mái chỉnh sửa tệp giao diện:

1. Vào Appearance → Theme File Editor
2. Chọn giao diện đang hoạt động của bạn (hoặc tốt hơn là giao diện con)
3. Mở tệp functions.php
4. Thêm mã sau vào cuối tệp:
   function add_asyntai_chatbot() {
  echo '<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>';
}
add_action('wp_footer', 'add_asyntai_chatbot');
5. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
6. Nhấp "Update File"

Thay thế: Hook riêng cho WooCommerce

Để tải chatbot chỉ trên các trang WooCommerce (cửa hàng, sản phẩm, giỏ hàng, thanh toán):

1. Thêm mã này vào tệp functions.php của giao diện:
   function add_asyntai_chatbot_woocommerce() {
  if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) {
    echo '<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>';
  }
}
add_action('wp_footer', 'add_asyntai_chatbot_woocommerce');
2. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
3. Lưu tệp

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

Sau khi lưu các thay đổi, hãy truy cập cửa hàng WooCommerce 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. Nhấp vào để đảm bảo nó mở và hoạt động đúng.