Cara Menambah Chatbot AI Asyntai ke MedusaCMS

Panduan langkah demi langkah untuk etalase berkuasa Medusa

Platform:

Penting: Medusa adalah platform e-dagang tanpa kepala. Kod chatbot perlu ditambah ke aplikasi etalase anda, bukan ke pelayan/admin Medusa.

Langkah 1: Dapatkan Kod Benam Anda

Pertama, pergi ke Papan Pemuka Asyntai anda dan tatal ke bawah ke bahagian "Kod Benam". Salin kod benam unik anda yang akan kelihatan seperti ini:

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

Nota: Kod di atas hanyalah contoh. Anda mesti menyalin kod benam unik anda sendiri dari Papan Pemuka anda kerana ia mengandungi ID widget peribadi anda.

Langkah 2: Tambah ke Etalase Next.js (Paling Biasa)

Starter etalase lalai Medusa menggunakan Next.js. Tambah chatbot ke layout akar etalase anda:

App Router (Next.js 13+)

Buka app/layout.tsx dalam projek etalase anda dan tambah komponen 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

Jika etalase anda menggunakan Pages Router, buka pages/_document.tsx atau 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"
      />
    </>
  )
}

Petua: Pilihan strategy="afterInteractive" memastikan chatbot dimuatkan selepas halaman menjadi interaktif, memberikan pengalaman pengguna terbaik tanpa menjejaskan prestasi pemuatan halaman.

Kaedah Alternatif 1: Etalase Gatsby

Jika etalase Medusa anda menggunakan Gatsby, tambah skrip melalui gatsby-ssr.js menggunakan onRenderBody dan 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"
    />
  ]);
};

Nota: Anda juga perlu menambah kod yang sama ke gatsby-browser.js jika anda mahu widget kekal semasa navigasi sisi klien. Sebagai alternatif, tambahkannya ke komponen layout akar anda.

Kaedah Alternatif 2: Etalase React Tersuai

Jika etalase Medusa anda menggunakan persediaan React tersuai (Vite, Create React App, dll.):

Tambah skrip ke public/index.html sejurus sebelum tag penutup </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>

Atau gunakan hook useEffect dalam komponen akar anda:

// 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
  );
}

Kaedah Alternatif 3: Mana-mana Frontend Tersuai

Jika kedai berkuasa Medusa anda menggunakan mana-mana frontend berasaskan HTML yang lain, cuma tambah tag skrip standard sejurus sebelum tag penutup </body>:

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

Petua: Kaedah ini berfungsi dengan mana-mana rangka kerja frontend atau penjana laman statik yang menghasilkan HTML, termasuk Vue, Svelte, Angular, Astro, dan lain-lain yang disambungkan ke backend Medusa.

Langkah 3: Laksanakan dan Sahkan

Selepas menambah kod ke aplikasi etalase anda:

Deploy etalase anda ke penyedia hosting anda (Vercel, Netlify, Railway, dll.)
Buka etalase langsung anda dalam tab pelayar baharu
Anda sepatutnya melihat butang widget sembang di sudut kanan bawah
Klik padanya untuk memastikan ia dibuka dan berfungsi dengan betul

Tidak nampak widget? Pastikan anda telah menggantikan YOUR_WIDGET_ID dengan ID widget sebenar anda dari papan pemuka. Semak bahawa skrip sedang dimuatkan dalam tab Network pelayar anda (F12 > Network). Sahkan bahawa etalase telah dideploy semula selepas menambah kod. Untuk Next.js, pastikan anda menggunakan komponen Script dari next/script, bukan tag <script> biasa. Ingat, kod perlu diletakkan di etalase, bukan pelayan Medusa. Kosongkan cache pelayar anda atau uji dalam mod inkognito.

Dokumentasi