返回仪表板

文档

了解如何使用 Asyntai

开始使用
安装 知识库 测试您的 AI 管理网站
自定义
组件颜色 AI 助手名称 初始消息 组件位置 自动触发 问候气泡 未读徽章 指令模式 提问 使用表情符号 收集邮箱 收集电话号码 智能线索收集 本地化 隐藏品牌标识 隐私链接 自定义通知 对话记录下载 新对话 对话历史 标语与状态点 语音转文字 聊天图标 公司徽标 字符限制 Temperature（温度）
AI 指令提示 套餐对比
功能
网站抓取 知识缺口 产品卡片 动态产品卡片 Dynamic Images 用户上下文 实时监控 人工接管 转接人工 AI 通知 每日报告 实时数据源 实时数据源 Max 团队成员 单点登录 包含图片 图像识别 翻译组件 本地化 潜在客户 智能线索收集 工单 预约 嵌入 排除页面 已屏蔽的IP 更智能模型 启用深度思考 回复建议 跟进消息 语音转文字 对话记录下载 嵌入式聊天
数据分析
聊天分析 聊天记录
集成
REST API Instagram Messenger WhatsApp Zapier Email 移动应用
其他
添加到主屏幕 自定义打开按钮
问 AI

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

DatoCMS 驱动网站的分步指南

获取嵌入代码
平台：
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

无头 CMS： DatoCMS 是一个通过 API 提供内容的无头 CMS。聊天机器人代码需要添加到您的前端应用程序（Next.js、Gatsby、Nuxt 等），而不是 DatoCMS 仪表板。

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

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

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

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

步骤 2：添加到 Next.js 前端（最常见）

Next.js 是与 DatoCMS 搭配使用最流行的前端框架。使用 Script 组件添加聊天机器人：

App Router（app/layout.tsx）：

  1. 打开根布局文件：app/layout.tsx
  2. 导入 Script 组件并添加聊天机器人：
    import Script from 'next/script'

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            {children}
            <Script
              src="https://asyntai.com/static/js/chat-widget.js"
              data-asyntai-id="YOUR_WIDGET_ID"
              strategy="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
  4. 保存文件并重启开发服务器

Pages Router（pages/_app.tsx）：

  1. 打开您的 pages/_app.tsx 文件
  2. 添加 Script 组件：
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
      return (
        <>
          <Component {...pageProps} />
          <Script
            src="https://asyntai.com/static/js/chat-widget.js"
            data-asyntai-id="YOUR_WIDGET_ID"
            strategy="afterInteractive"
          />
        </>
      )
    }

提示： 使用 strategy="afterInteractive" 可确保聊天机器人在页面变为可交互后立即加载，在性能和可用性之间取得良好平衡。

替代方法 1：Gatsby 前端

对于通过 gatsby-source-datocms 从 DatoCMS 获取内容的 Gatsby 网站：

  1. 在项目根目录创建或编辑 gatsby-ssr.js：
    import React from 'react'

    export const onRenderBody = ({ setPostBodyComponents }) => {
      setPostBodyComponents([
        <script
          key="asyntai-chatbot"
          async
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
        />
      ])
    }
  2. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
  3. 重启 Gatsby 开发服务器

替代方法 2：Nuxt.js 前端

对于使用 DatoCMS 内容的 Nuxt.js 应用：

  1. 添加到您的 nuxt.config.ts：
    export default defineNuxtConfig({
      app: {
        head: {
          script: [
            {
              src: 'https://asyntai.com/static/js/chat-widget.js',
              async: true,
              'data-asyntai-id': 'YOUR_WIDGET_ID'
            }
          ]
        }
      }
    })
  2. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
  3. 重启 Nuxt 开发服务器

替代方法 3：纯 HTML / 静态网站

如果您使用 DatoCMS 的 Content Delivery API 搭配静态 HTML 网站或静态站点生成器：

  1. 在 HTML 文件的 </body> 闭合标签之前添加嵌入代码：
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
  3. 保存文件并上传到您的主机

替代方法 4：React（Vite/CRA）

对于使用 DatoCMS API 的标准 React 应用（Create React App、Vite）：

选项 A：添加到 public/index.html

  1. 打开您的 public/index.html 文件（CRA）或 index.html（Vite）
  2. 在 </body> 闭合标签之前添加嵌入代码：
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. 保存文件

选项 B：在根组件中使用 useEffect

  1. 创建聊天机器人组件或添加到根组件：
    // components/Chatbot.jsx
    import { useEffect } from 'react'

    export default function Chatbot() {
      useEffect(() => {
        const script = document.createElement('script')
        script.src = 'https://asyntai.com/static/js/chat-widget.js'
        script.async = true
        script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
        document.body.appendChild(script)
        return () => document.body.removeChild(script)
      }, [])
      return null
    }
  2. 在 App.jsx 或根布局中导入并渲染该组件

步骤 3：部署并验证

将聊天机器人代码添加到 DatoCMS 驱动的网站后，部署或运行开发服务器。在新的浏览器标签页或无痕窗口中访问您的网站。您应该会在右下角看到聊天小部件按钮。点击它以确保能正常打开和使用。

看不到小部件？ 确保已将脚本添加到框架对应的正确文件中。检查浏览器开发者控制台是否有错误。如果使用服务端渲染，请确保脚本在客户端运行。尝试清除浏览器缓存或在无痕窗口中查看。

环境变量： 为了更好的安全性和灵活性，建议将小部件 ID 存储在环境变量中（例如，Next.js 使用 NEXT_PUBLIC_ASYNTAI_ID，Vite 使用 VITE_ASYNTAI_ID），而不是硬编码。