Cách Thêm Chatbot AI Asyntai vào MedusaCMS

Hướng dẫn từng bước cho cửa hàng trực tuyến chạy bằng Medusa

Nền tảng:

Quan trọng: Medusa là nền tảng thương mại điện tử headless. Mã chatbot cần được thêm vào ứng dụng cửa hàng trực tuyến, không phải vào máy chủ/quản trị Medusa.

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 Cửa hàng Next.js (Phổ biến nhất)

Bộ khởi đầu cửa hàng mặc định của Medusa sử dụng Next.js. Thêm chatbot vào bố cục gốc cửa hàng:

App Router (Next.js 13+)

Mở app/layout.tsx trong dự án cửa hàng 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 cửa hàng sử dụng Pages Router, mở pages/_document.tsx hoặc pages/_app.tsx:

// 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: Cửa hàng Gatsby

Nếu cửa hàng Medusa sử dụng Gatsby, thêm script qua gatsby-ssr.js sử dụng onRenderBody và setPostBodyComponents:

// 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 nên thêm cùng mã vào gatsby-browser.js nếu muốn tiện ích tồn tại trong quá trình điều hướng phía client. Ngoài ra, thêm vào thành phần bố cục gốc.

Phương pháp Thay thế 2: Cửa hàng React Tùy chỉnh

Nếu cửa hàng Medusa sử dụng thiết lập React tùy chỉnh (Vite, Create React App, v.v.):

Thêm script vào public/index.html ngay trước thẻ đóng </body>:

<!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.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
  );
}

Phương pháp Thay thế 3: Bất kỳ Frontend Tùy chỉnh Nào

Nếu cửa hàng chạy bằng Medusa sử dụng bất kỳ frontend dựa trên HTML nào khác, chỉ cần thêm thẻ script tiêu chuẩn 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>

Mẹo: Phương pháp này hoạt động với bất kỳ framework frontend hoặc trình tạo trang tĩnh nào xuất HTML, bao gồm Vue, Svelte, Angular, Astro và các framework khác kết nối với backend Medusa.

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

Sau khi thêm mã vào ứng dụng cửa hàng:

Triển khai cửa hàng lên nhà cung cấp hosting (Vercel, Netlify, Railway, v.v.)
Mở cửa hàng trực tuyến 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? Đả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 trình duyệt (F12 > Network). Xác minh cửa hàng đã được triển khai lại sau khi thêm mã. Đối với Next.js, đảm bảo bạn sử dụng thành phần Script từ next/script, không phải thẻ <script> thông thường. Nhớ rằng mã đặt trong cửa hàng, không phải máy chủ Medusa. Xóa bộ nhớ đệm trình duyệt hoặc thử nghiệm ở chế độ ẩn danh.

Tài liệu