如何将 Asyntai AI 聊天机器人添加到任何网站

平台：

HTML/Custom

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：添加到您的 HTML 文件

添加聊天机器人最简单的方式是将嵌入代码直接粘贴到 HTML 文件中：

1. 在文本编辑器中打开您的 HTML 文件
2. 找到</body>闭合标签
3. 将您的Asyntai嵌入代码粘贴到</body>标签之前
4. 保存文件

对于多页面网站

如果您的网站有多个 HTML 页面，您有以下几种选择：

选项 A：添加到每个页面

将嵌入代码添加到每个您希望聊天机器人出现的 HTML 文件中。

选项 B：使用通用页脚包含

如果您使用服务器端包含（SSI）、PHP 包含或类似技术：

1. 创建一个 footer.html（或 footer.php）文件
2. 将 Asyntai 嵌入代码添加到此文件中
3. 在所有页面中包含此页脚文件：
   <!-- For PHP -->
<?php include 'footer.php'; ?>

<!-- For SSI -->
<!--#include virtual="/footer.html" -->

选项 C：JavaScript 动态加载

创建一个在所有页面上加载聊天机器人的 JavaScript 文件：

1. 创建一个名为 asyntai-loader.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);
})();
2. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
3. 在所有页面中包含此脚本：
   <script src="/js/asyntai-loader.js"></script>

对于静态站点生成器

如果您使用静态站点生成器，请将嵌入代码添加到基础布局或模板中：

对于 React / Vue / Angular 应用

对于单页应用（SPA），您可以将脚本添加到 index.html 或动态加载：

React（index.html 方法）

React（useEffect 方法）

Vue（在 main.js 或 App.vue 中）

Angular（在 index.html 中）

步骤3：验证安装

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