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

Contentful 驱动网站的分步指南

获取嵌入代码

平台：

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

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

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

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

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

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

如果您使用 Next.js 渲染 Contentful 内容，请使用 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" 可确保聊天机器人在页面完全可交互后加载，从而提供最佳性能。

方法 2：Gatsby 搭配 Contentful

对于从 Contentful 获取内容的 Gatsby 网站：

安装 gatsby-plugin-load-script（可选但推荐）：
npm install gatsby-plugin-load-script
添加到您的 gatsby-config.js：
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
或者，使用 gatsby-ssr.js：
// 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" /> ]) }
重启 Gatsby 开发服务器

方法 3：React 搭配 Contentful

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

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

或使用带有 useEffect 的 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
}

方法 4：Vue/Nuxt 搭配 Contentful

对于使用 Contentful 的 Vue 或 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' } ] } } })

Vue 3：

在 index.html 的 </body> 之前添加：
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

方法 5：静态 HTML 搭配 Contentful API

如果您使用 Contentful 的 Content Delivery API 和原生 JavaScript：

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

步骤 2：验证安装

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

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

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

文档