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

Đầu tiên, đi đến Bảng điều khiển Asyntai và cuộn xuống phần "Mã Nhúng". Sao chép mã nhúng duy nhất của bạn sẽ trông như thế này:

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. Access your Craft CMS project files via FTP, SSH, or your code editor
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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
2. Hoặc kiểm tra các phần cụ thể:
   {% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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.