Cách Thêm Chatbot AI Asyntai vào Craft CMS

Nền tảng:

Craft CMS

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: Chỉnh sửa Mẫu Bố cục (Khuyến nghị)

Cách dễ nhất để thêm chatbot vào tất cả trang là chỉnh sửa mẫu bố cục chính:

1. Truy cập tệp dự án Craft CMS qua FTP, SSH hoặc trình biên tập mã
2. Điều hướng đến thư mục templates/
3. Tìm tệp bố cục chính (thường có tên _layout.twig, _layout.html, hoặc nằm trong templates/_layouts/)
4. Tìm thẻ đóng </body>
5. Dán mã nhúng Asyntai ngay trước thẻ </body>
6. Lưu tệp

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS cung cấp thẻ Twig tích hợp để đăng ký JavaScript:

1. Mở mẫu bố cục chính
2. Thêm mã sau trước thẻ đóng </body>:
   {% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
3. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
4. Lưu tệp

Thay thế: Tạo Tệp Include Riêng biệt

Để tổ chức tốt hơn, tạo tệp include chuyên dụng:

1. Tạo tệp mới: templates/_includes/chatbot.twig (hoặc .html)
2. Thêm mã nhúng Asyntai vào tệp này:
   <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>
3. Trong mẫu bố cục chính, bao gồm tệp này trước </body>:
   {% include '_includes/chatbot' %}
4. Lưu cả hai tệp

Thay thế: Tải Có điều kiện

Để tải chatbot chỉ trên các trang hoặc phần cụ thể:

1. Trong mẫu bố cục hoặc trang, sử dụng điều kiện Twig:
   {% if entry.showChatbot ?? true %} <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> {% endif %}
2. Hoặc kiểm tra các phần cụ thể:
   {% if craft.app.request.segments[0] != 'admin' %} <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> {% endif %}

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

Sau khi lưu thay đổi, truy cập trang web Craft CMS trong tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút tiện ích trò chuyện ở góc dưới bên phải. Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác.