Cara Menambahkan Chatbot AI Asyntai ke MedusaCMS

Panduan langkah demi langkah untuk etalase berbasis Medusa

Platform:

Penting: Medusa adalah platform e-commerce headless. Kode chatbot perlu ditambahkan ke aplikasi etalase Anda, bukan ke server/admin Medusa.

Langkah 1: Dapatkan Kode Embed Anda

Pertama, buka Dasbor Asyntai dan gulir ke bawah ke bagian "Kode Embed". Salin kode embed unik Anda yang akan terlihat seperti ini:

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

Catatan: Kode di atas hanya contoh. Anda harus menyalin kode embed unik Anda sendiri dari Dasbor karena berisi ID widget personal Anda.

Langkah 2: Tambahkan ke Etalase Next.js (Paling Umum)

Starter etalase bawaan Medusa menggunakan Next.js. Tambahkan chatbot ke layout root etalase Anda:

App Router (Next.js 13+)

Buka app/layout.tsx di proyek etalase Anda dan tambahkan 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"
      />
    </>
  )
}

Tip: Opsi strategy="afterInteractive" memastikan chatbot dimuat setelah halaman menjadi interaktif, memberikan pengalaman pengguna terbaik tanpa mempengaruhi kinerja muat halaman.

Metode Alternatif 1: Etalase Gatsby

Jika etalase Medusa Anda menggunakan Gatsby, tambahkan 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"
    />
  ]);
};

Catatan: Anda juga harus menambahkan kode yang sama ke gatsby-browser.js jika ingin widget tetap ada selama navigasi sisi klien. Atau, tambahkan ke komponen layout root Anda.

Metode Alternatif 2: Etalase React Kustom

Jika etalase Medusa Anda menggunakan pengaturan React kustom (Vite, Create React App, dll.):

Tambahkan skrip ke public/index.html tepat 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 di komponen root 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
  );
}

Metode Alternatif 3: Frontend Kustom Apa Pun

Jika toko berbasis Medusa Anda menggunakan frontend berbasis HTML lainnya, cukup tambahkan tag skrip standar tepat sebelum tag penutup </body>:

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

Tip: Metode ini berfungsi dengan framework frontend atau generator situs statis apa pun yang menghasilkan HTML, termasuk Vue, Svelte, Angular, Astro, dan lainnya yang terhubung ke backend Medusa.

Langkah 3: Deploy dan Verifikasi

Setelah menambahkan kode ke aplikasi etalase Anda:

Deploy etalase Anda ke penyedia hosting (Vercel, Netlify, Railway, dll.)
Buka etalase live Anda di tab browser baru
Anda seharusnya melihat tombol widget obrolan di pojok kanan bawah
Klik untuk memastikan widget terbuka dan berfungsi dengan benar

Tidak melihat widget? Pastikan Anda telah mengganti YOUR_WIDGET_ID dengan ID widget sebenarnya dari dasbor. Periksa apakah skrip dimuat di tab Network browser Anda (F12 > Network). Verifikasi bahwa etalase telah di-deploy ulang setelah menambahkan kode. Untuk Next.js, pastikan Anda menggunakan komponen Script dari next/script, bukan tag <script> biasa. Ingat, kode harus ditempatkan di etalase, bukan di server Medusa. Bersihkan cache browser atau uji dalam mode penyamaran.

Dokumentasi