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

Strapi 驱动的网站的分步指南

获取嵌入代码

平台：

无头 CMS： Strapi 是一个通过 API 提供内容但不包含内置前端的无头 CMS。聊天机器人的安装取决于您使用哪个前端框架来渲染 Strapi 内容。请选择与您的设置匹配的方法。

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

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

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

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

方法 1：Next.js 搭配 Strapi（推荐）

如果您使用 Next.js 作为 Strapi 前端（最常见的设置），请使用 Script 组件添加聊天机器人：

打开您的主布局文件：app/layout.tsx（App Router）或 pages/_app.tsx（Pages Router）
导入 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="lazyOnload" /> </body> </html> ) }
将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
保存文件并重启开发服务器

提示： 使用 strategy="lazyOnload" 可确保聊天机器人在页面完全可交互后加载，为您的 Strapi 驱动的站点提供最佳性能。

方法 2：Gatsby 搭配 Strapi

对于使用 gatsby-source-strapi 的 Gatsby 站点：

在项目根目录创建或编辑 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" /> ]) }
将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
重启 Gatsby 开发服务器

方法 3：Nuxt.js 搭配 Strapi

对于使用 @nuxtjs/strapi 的 Nuxt.js 应用程序：

Nuxt 3：

添加到您的 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' } ] } } })

Nuxt 2：

添加到您的 nuxt.config.js：
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

方法 4：React 搭配 Strapi

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

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

或创建一个 React 组件：

// 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
}

方法 5：SvelteKit 搭配 Strapi

对于消费 Strapi 内容的 SvelteKit 应用程序：

编辑您的 src/app.html 文件
在 </body> 闭合标签之前添加嵌入代码：
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
保存文件

方法 6：静态站点搭配 Strapi API

如果您使用 Strapi 的 REST 或 GraphQL API 搭配静态 HTML 站点：

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

步骤 2：验证安装

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

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

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

文档