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

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

Nền tảng:

Quan trọng: PayloadCMS là CMS headless. Mã chatbot cần được thêm vào ứng dụng frontend của bạn, không phải vào bảng quản trị Payload.

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.

Bước 2: Thêm vào Frontend Next.js (Phổ biến nhất)

PayloadCMS thường sử dụng Next.js làm framework frontend. Thêm chatbot vào bố cục gốc của bạn:

App Router (Next.js 13+)

Mở app/layout.tsx và thêm thành phần Script:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

Nếu sử dụng Pages Router, mở pages/_app.tsx:

import Script from 'next/script'

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

Mẹo: Tùy chọn strategy="afterInteractive" đảm bảo chatbot tải sau khi trang trở nên tương tác, cung cấp trải nghiệm người dùng tốt nhất mà không ảnh hưởng hiệu suất tải trang.

Phương pháp thay thế 1: Frontend React tùy chỉnh

Nếu dự án PayloadCMS của bạn sử dụng frontend React tùy chỉnh thay vì Next.js, bạn có thể tải chatbot động với hook useEffect:

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // ... your app content
  );
}

Lưu ý: Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn từ bảng điều khiển. Hàm dọn dẹp trong câu lệnh return đảm bảo script được gỡ bỏ nếu component bị unmount.

Phương pháp thay thế 2: Sử dụng Component tùy chỉnh của Payload (Chỉ bảng quản trị)

Nếu bạn muốn chatbot xuất hiện bên trong bảng quản trị Payload (cho hỗ trợ nội bộ), bạn có thể đăng ký component tùy chỉnh trong payload.config.ts:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Sau đó tạo tệp component:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
};

export default AsyntaiChatbot;

Mẹo: Phương pháp này chỉ để thêm chatbot vào bảng quản trị Payload. Đối với trang web công khai, hãy sử dụng Bước 2 hoặc Phương pháp thay thế 1.

Phương pháp thay thế 3: HTML thuần/Trang tĩnh

Nếu trang web sử dụng PayloadCMS của bạn dùng frontend HTML thuần hoặc tĩnh tiêu thụ API Payload, hãy thêm mã nhúng trực tiếp vào HTML:

Mở tệp HTML chính (thường là index.html)
Thêm mã nhúng ngay trước thẻ đóng </body>:

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

Bước 3: Triển khai và Xác minh

Sau khi thêm mã vào ứng dụng frontend của bạn:

Triển khai frontend lên nhà cung cấp hosting của bạn (Vercel, Netlify, v.v.)
Mở trang web trực tiếp trong tab trình duyệt mới
Bạn sẽ thấy nút tiện ích trò chuyện ở góc dưới bên phải
Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác

Không thấy tiện ích? Hãy đảm bảo bạn đã thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ bảng điều khiển. Kiểm tra script đang tải trong tab Network của trình duyệt (F12 > Network). Xác minh frontend đã được triển khai lại sau khi thêm mã. Với Next.js, đảm bảo bạn đang sử dụng component Script từ next/script, không phải thẻ <script> thông thường. Xóa bộ nhớ đệm trình duyệt hoặc thử trong chế độ ẩn danh.

Tài liệu