Cách thêm Chatbot AI Asyntai vào Strapi

Hướng dẫn từng bước cho trang web sử dụng Strapi

Nền tảng:

CMS Headless: Strapi là CMS headless cung cấp nội dung qua API nhưng không bao gồm frontend tích hợp. Việc cài đặt chatbot phụ thuộc vào framework frontend bạn đang sử dụng để hiển thị nội dung Strapi. Chọn phương pháp phù hợp với cài đặt của bạn.

Bước 1: Lấy Mã Nhúng của Bạn

Đầu tiên, đi đến Bảng điều khiển Asyntai và cuộn xuống phần "Mã Nhúng". Sao chép mã nhúng duy nhất của bạn sẽ trông như thế này:

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

Lưu ý: Mã ở trên chỉ là ví dụ. Bạn phải sao chép mã nhúng duy nhất của riêng mình từ Bảng điều khiển vì nó chứa ID tiện ích cá nhân của bạn.

Phương pháp 1: Next.js với Strapi (Khuyến nghị)

Nếu bạn sử dụng Next.js làm frontend Strapi (cài đặt phổ biến nhất), thêm chatbot sử dụng component Script:

Mở tệp bố cục chính: app/layout.tsx (App Router) hoặc pages/_app.tsx (Pages Router)
Import thành phần Script và thêm chatbot:
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> ) }
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
Lưu tệp và khởi động lại máy chủ phát triển

Mẹo: Sử dụng strategy="lazyOnload" đảm bảo chatbot tải sau khi trang đã hoàn toàn tương tác, mang lại hiệu suất tốt nhất cho trang web sử dụng Strapi.

Phương pháp 2: Gatsby với Strapi

Cho trang Gatsby sử dụng gatsby-source-strapi:

Tạo hoặc chỉnh sửa gatsby-ssr.js trong thư mục gốc dự án:
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" /> ]) }
Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
Khởi động lại máy chủ phát triển Gatsby

Phương pháp 3: Nuxt.js với Strapi

Cho ứng dụng Nuxt.js sử dụng @nuxtjs/strapi:

Nuxt 3:

Thêm vào 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:

Thêm vào nuxt.config.js của bạn:
export default { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } }

Phương pháp 4: React với Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Mở tệp public/index.html (CRA) hoặc index.html (Vite)
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Lưu tệp

Hoặc tạo component 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
}

Phương pháp 5: SvelteKit với Strapi

Cho ứng dụng SvelteKit tiêu thụ nội dung Strapi:

Chỉnh sửa tệp src/app.html của bạn
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Lưu tệp

Phương pháp 6: Trang tĩnh với Strapi API

If you're using Strapi's REST or GraphQL API with a static HTML site:

Thêm mã nhúng vào tệp HTML trước thẻ đóng </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Lưu tệp và tải lên hosting

Bước 2: Xác minh Cài đặt

Sau khi thêm mã chatbot vào trang web chạy Strapi của bạn, hãy triển khai hoặc chạy máy chủ phát triển. Truy cập trang web của bạn trong một tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút widget chat ở góc dưới bên phải. Nhấp vào để đảm bảo nó mở và hoạt động đúng.

Không thấy tiện ích? Đảm bảo bạn đã thêm tập lệnh vào đúng tệp cho framework. Kiểm tra bảng điều khiển nhà phát triển trình duyệt để tìm lỗi. Nếu sử dụng render phía máy chủ, đảm bảo tập lệnh chạy ở phía client. Thử xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh.

Biến Môi trường: Để bảo mật và linh hoạt hơn, hãy cân nhắc lưu trữ ID tiện ích trong biến môi trường (ví dụ: NEXT_PUBLIC_ASYNTAI_ID cho Next.js hoặc VITE_ASYNTAI_ID cho Vite) thay vì mã hóa cứng.

Tài liệu