如何将 Asyntai AI 聊天机器人添加到 Umbraco

平台：

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

步骤1：获取您的嵌入代码

首先，前往您的 Asyntai 仪表板并向下滚动到"嵌入代码"部分。复制您的专属嵌入代码，格式如下：

第 2 步：编辑 Master 模板（推荐）

将聊天机器人添加到所有页面最简单的方法是编辑 Master 模板：

1. 登录您的 Umbraco Backoffice
2. 前往左侧边栏中的Settings
3. 展开模板
4. 点击您的 Master 模板（或站点使用的主布局模板）
5. 找到</body>闭合标签
6. 将您的Asyntai嵌入代码粘贴到</body>标签之前
7. 点击"保存"

替代方案：使用站点设置文档类型

如需更多灵活性，您可以添加自定义字段来管理页脚脚本：

1. 前往 Settings → Document Types
2. 编辑您的 Site Settings 文档类型（如果不存在则创建一个）
3. 添加一个名为 "Footer Scripts" 的新属性，数据类型为 Textarea
4. 保存文档类型
5. 前往内容并编辑站点设置节点
6. 将 Asyntai 嵌入代码粘贴到 Footer Scripts 字段中
7. 在 Master 模板中，在 </body> 之前添加以下代码：
   @Html.Raw(Model.Value("footerScripts"))
8. 保存内容和模板

替代方案：使用 Scripts 文件夹

您也可以在 Umbraco Backoffice 中创建 JavaScript 文件：

1. 前往 Settings → Scripts
2. 右键点击 Scripts 并选择 "Create"
3. 创建一个名为 asyntai-chatbot.js 的新文件
4. 添加以下代码：
   (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. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
6. 保存文件
7. 在 Master 模板中的 </body> 之前引入此脚本：
   <script src="/scripts/asyntai-chatbot.js"></script>

替代方案：使用 RenderSection 实现页面级控制

如果您只想在特定页面上添加聊天机器人：

1. 在 Master 模板中，在 </body> 之前添加：
   @RenderSection("footerScripts", required: false)
2. 在您希望添加聊天机器人的特定页面模板中，添加：
   @section footerScripts {
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}

步骤3：验证安装

保存更改后，在新的浏览器标签页或无痕窗口中访问您的网站。您应该能在右下角看到聊天小部件按钮。点击它确保它能正常打开和运行。