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

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

Nền tảng:

Quan trọng: Sanity là CMS headless cung cấp nội dung qua API. Mã chatbot cần được thêm vào ứng dụng frontend của bạn (Next.js, Gatsby, Nuxt, HTML thuần, v.v.), không phải vào Sanity Studio.

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)

Nếu trang web Sanity của bạn sử dụng Next.js (kết hợp phổ biến nhất), thêm chatbot vào bố cục gốc:

App Router (Next.js 13+)

Mở app/layout.js (hoặc app/layout.tsx) và thêm component 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.js:

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 Gatsby

Nếu trang Sanity sử dụng Gatsby, thêm script qua gatsby-ssr.js:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

Lưu ý: Bạn cũng cần thêm cùng mã vào gatsby-browser.js nếu bạn muốn tiện ích duy trì trong quá trình điều hướng phía máy khách. Hoặc thêm nó vào component bố cục gốc của bạn.

Phương pháp Thay thế 2: Frontend Nuxt.js

Nếu trang Sanity sử dụng Nuxt.js, thêm script trong nuxt.config.js (hoặc nuxt.config.ts):

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          'data-asyntai-id': 'YOUR_WIDGET_ID',
          async: true
        }
      ]
    }
  }
})

Phương pháp thay thế 3: Frontend HTML thuần

Nếu trang web Sanity của bạn sử dụng HTML thuần hoặc trình tạo trang tĩnh tiêu thụ API Sanity:

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>

Phương pháp thay thế 4: React (Vite hoặc Create React App)

Nếu frontend của bạn sử dụng React với Vite hoặc Create React App:

Thêm script vào index.html trong thư mục public/:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Hoặc sử dụng hook useEffect trong thành phần gốc:

// App.jsx or App.tsx
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
  );
}

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