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

Nền tảng:

Umbraco

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 chính (Khuyến nghị)

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

1. Đăng nhập vào Umbraco Backoffice của bạn
2. Đi đến Settings trong thanh bên trái
3. Mở rộng Templates
4. Nhấp vào mẫu Master của bạn (hoặc mẫu bố cục chính mà trang web của bạn sử dụng)
5. Tìm thẻ đóng </body>
6. Dán mã nhúng Asyntai ngay trước thẻ </body>
7. Nhấp "Save"

Thay thế: Sử dụng Loại tài liệu Cài đặt trang

Để linh hoạt hơn, bạn có thể thêm một trường tùy chỉnh để quản lý các kịch bản chân trang:

1. Vào Settings → Document Types
2. Chỉnh sửa loại tài liệu Site Settings của bạn (hoặc tạo một loại nếu chưa tồn tại)
3. Thêm một thuộc tính mới có tên "Footer Scripts" với kiểu dữ liệu Textarea
4. Lưu Loại tài liệu
5. Đi đến Content và chỉnh sửa nút Cài đặt trang của bạn
6. Dán mã nhúng Asyntai của bạn vào trường Footer Scripts
7. Trong mẫu Master của bạn, thêm mã này trước </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Lưu cả nội dung và mẫu

Thay thế: Sử dụng thư mục Scripts

Bạn cũng có thể tạo một tệp JavaScript trong Umbraco Backoffice:

1. Vào Settings → Scripts
2. Nhấp chuột phải vào Scripts và chọn "Create"
3. Tạo một tệp mới có tên asyntai-chatbot.js
4. Thêm mã sau:
   (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);
})();
5. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
6. Lưu tệp
7. Bao gồm kịch bản này trong mẫu Master của bạn trước </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Thay thế: Theo trang với RenderSection

Nếu bạn chỉ muốn chatbot trên các trang cụ thể:

1. Trong mẫu Master của bạn, thêm trước </body>:
   @RenderSection("footerScripts", required: false)
2. Trong mẫu trang cụ thể nơi bạn muốn chatbot, thêm:
   @section footerScripts {
  <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>
}

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

Sau khi lưu thay đổi, truy cập trang web 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.