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

BigCommerce商店的分步指南

获取嵌入代码

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

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

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

注意: 以上代码仅为示例。您必须从仪表板复制您自己的专属嵌入代码,因为其中包含您的个人小部件 ID。

步骤2:选择安装方法

有几种方法可以将聊天小部件添加到BigCommerce。选择最适合您的方法:

方法1:使用脚本管理器(推荐)

脚本管理器是将自定义脚本添加到BigCommerce商店的最简单且推荐的方法。它不需要任何编程知识,且在主题更换时保持不变。

  1. 登录您的BigCommerce控制面板
  2. 前往Storefront → Script Manager
  3. 点击"创建脚本"按钮
  4. 使用以下设置配置您的脚本:
    • 名称: Asyntai AI Chatbot
    • 描述: AI驱动的聊天小部件(可选)
    • 位置: Footer
    • 范围: All Pages
    • 脚本类别: Functional
    • 脚本类型: Script
  5. "脚本内容"框中,粘贴您的 Asyntai 嵌入代码
  6. 点击"保存"

为什么使用脚本管理器? 通过脚本管理器添加的脚本与您的主题分开管理。当您更新或更换商店主题时,它们不会受到影响。

方法2:使用页面构建器

您可以使用BigCommerce的页面构建器通过HTML元素添加聊天小部件。如果您想更好地控制小部件的显示位置,此方法很有用。

  1. 登录您的BigCommerce控制面板
  2. 前往Storefront → My Themes
  3. 点击当前主题上的"自定义"按钮
  4. 在页面构建器的左侧栏中,找到"HTML"元素
  5. 将HTML元素拖放到页面模板的页脚区域
  6. 点击 HTML 元素并选择"编辑 HTML"
  7. 粘贴您的Asyntai嵌入代码
  8. 点击"保存 HTML"
  9. 点击"发布"以将更改应用到您的在线商店

注意: 如果您希望聊天机器人出现在所有页面上,您需要将其添加到页脚等全局区域。脚本管理器方法更适合全站安装。

方法3:编辑主题文件(Stencil主题)

对于使用Stencil主题的开发者,您可以直接将代码添加到主题文件中。这需要访问主题的源文件。

使用BigCommerce控制面板

  1. 前往Storefront → My Themes
  2. 点击当前主题上的"高级"
  3. 选择"编辑主题文件"
  4. 导航到templates → components → common
  5. 打开footer.html
  6. 滚动到文件底部
  7. 将您的Asyntai嵌入代码粘贴在闭合标签之前
  8. 点击"保存并应用文件"

使用Stencil CLI(本地开发)

如果您正在使用Stencil CLI进行本地开发:

  1. 打开您主题的本地文件
  2. 导航到templates/components/common/footer.html
  3. 在闭合标签之前添加您的Asyntai嵌入代码
  4. 使用stencil push推送您的更改

重要提示: 更新主题时,主题文件的更改可能会被覆盖。如需在主题更新后仍保持有效的永久解决方案,请使用脚本管理器方法。

步骤3:验证安装

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

看不到小部件? 清除浏览器缓存后重试。如果您通过主题编辑器进行了更改,请确保点击了"发布"以将更改应用到您的在线商店。