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

Nền tảng:

CrafterCMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Docusaurus Hugo Kentico Volusion Craft CMS Contentful Strapi Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Statamic Umbraco 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: Thêm vào Mẫu FreeMarker (Khuyến nghị)

CrafterCMS sử dụng mẫu FreeMarker (.ftl) để hiển thị trang. Cách dễ nhất để thêm chatbot vào tất cả trang là chỉnh sửa mẫu trang chính:

1. Trong Crafter Studio, đi đến Site Dashboard > Content Types hoặc điều hướng đến templates
2. Mở mẫu trang chính (ví dụ: /templates/web/pages/home.ftl hoặc bố cục cơ sở)
3. Tìm thẻ đóng </body>
4. Dán mã nhúng Asyntai ngay trước thẻ </body>:
   <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
5. Lưu tệp và xuất bản qua Crafter Studio

Phương pháp Thay thế 1: Sử dụng Thành phần Mẫu Crafter

Để tổ chức tốt hơn, tạo mẫu thành phần chuyên dụng cho tiện ích chatbot:

1. Trong Crafter Studio, tạo tệp mẫu mới tại /templates/web/components/asyntai-widget.ftl
2. Thêm nội dung sau vào mẫu thành phần:
   <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Bao gồm nó trong mẫu bố cục chính bằng chỉ thị include FreeMarker:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. Hoặc nếu sử dụng hệ thống render component của Crafter, sử dụng:
   <@renderComponent component=contentModel.asyntaiWidget />
5. Lưu cả hai tệp và xuất bản qua Crafter Studio

Phương pháp Thay thế 2: Sử dụng Cấu hình Head/Scripts của Crafter

CrafterCMS cho phép bạn chèn tập lệnh toàn cục qua cấu hình trang:

1. Trong Crafter Studio, điều hướng đến Site Config > Configuration
2. Mở tệp Engine Site Configuration (site-config.xml)
3. Thêm cấu hình chèn tập lệnh tùy chỉnh:
   <site> <!-- Existing configuration... --> <!-- Custom Scripts --> <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
4. Ngoài ra, chỉnh sửa bố cục FreeMarker cơ sở để đọc từ cấu hình trang và chèn tập lệnh động:
   <#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
5. Lưu và xuất bản thay đổi cấu hình

Phương pháp Thay thế 3: Sử dụng Bộ điều khiển Groovy

CrafterCMS hỗ trợ tập lệnh Groovy cho logic phía máy chủ. Bạn có thể sử dụng bộ điều khiển để thêm tập lệnh chatbot động:

1. Tạo tập lệnh Groovy trong /scripts/pages/ (ví dụ: /scripts/pages/home.groovy hoặc bộ điều khiển toàn trang)
2. Thêm mã sau để chèn URL tập lệnh vào mô hình mẫu:
   // /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
3. Sau đó tham chiếu biến mô hình trong mẫu FreeMarker:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Lưu cả tập lệnh Groovy và tệp mẫu
5. Xuất bản thay đổi qua Crafter Studio

Bước 3: Xuất bản và Xác minh

Sau khi thực hiện các thay đổi, hãy xuất bản chúng thông qua Crafter Studio:

1. Trong Crafter Studio, đi đến Site Dashboard
2. Xem lại thay đổi trong phần My Recent Activity hoặc Pending Approval
3. Nhấp Publish để đưa thay đổi lên trực tuyến
4. Mở trang web của bạn trong tab trình duyệt mới hoặc cửa sổ ẩn danh
5. Bạn sẽ thấy nút tiện ích trò chuyện ở góc dưới bên phải
6. Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác