Come aggiungere il chatbot IA Asyntai a MedusaCMS

Guida passo passo per gli storefront basati su Medusa

Piattaforma:

Importante: Medusa è una piattaforma e-commerce headless. Il codice del chatbot deve essere aggiunto alla tua applicazione storefront, non al server/pannello di amministrazione di Medusa.

Passaggio 1: ottieni il tuo codice di incorporamento

Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:

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

Nota: Il codice sopra è solo un esempio. Devi copiare il tuo codice di incorporamento univoco dalla tua Dashboard poiché contiene il tuo ID widget personale.

Passaggio 2: Aggiungi allo Storefront Next.js (il più comune)

Lo starter predefinito dello storefront di Medusa utilizza Next.js. Aggiungi il chatbot al layout principale del tuo storefront:

App Router (Next.js 13+)

Apri app/layout.tsx nel tuo progetto storefront e aggiungi il componente 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

Se il tuo storefront utilizza il Pages Router, apri pages/_document.tsx o 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"
      />
    </>
  )
}

Suggerimento: L'opzione strategy="afterInteractive" garantisce che il chatbot si carichi dopo che la pagina diventa interattiva, offrendo la migliore esperienza utente senza influire sulle prestazioni di caricamento della pagina.

Metodo alternativo 1: Storefront Gatsby

Se il tuo storefront Medusa utilizza Gatsby, aggiungi lo script tramite gatsby-ssr.js utilizzando onRenderBody e 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: Dovresti anche aggiungere lo stesso codice a gatsby-browser.js se desideri che il widget persista durante la navigazione lato client. In alternativa, aggiungilo al tuo componente layout principale.

Metodo alternativo 2: Storefront React personalizzato

Se il tuo storefront Medusa utilizza una configurazione React personalizzata (Vite, Create React App, ecc.):

Aggiungi lo script a public/index.html appena prima del tag di chiusura </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>

Oppure usa un hook useEffect nel tuo componente principale:

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

Metodo alternativo 3: Qualsiasi Frontend personalizzato

Se il tuo negozio basato su Medusa utilizza qualsiasi altro frontend basato su HTML, aggiungi semplicemente il tag script standard appena prima del tag di chiusura </body>:

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

Suggerimento: Questo metodo funziona con qualsiasi framework frontend o generatore di siti statici che produce HTML, inclusi Vue, Svelte, Angular, Astro e altri collegati al backend Medusa.

Passaggio 3: Distribuisci e verifica

Dopo aver aggiunto il codice alla tua applicazione storefront:

Distribuisci il tuo storefront sul tuo provider di hosting (Vercel, Netlify, Railway, ecc.)
Apri il tuo storefront live in una nuova scheda del browser
Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra della tua pagina
Cliccaci sopra per assicurarti che si apra e funzioni correttamente

Non vedi il widget? Assicurati di aver sostituito YOUR_WIDGET_ID con il tuo ID widget effettivo dalla dashboard. Verifica che lo script si stia caricando nella scheda Network del browser (F12 > Network). Verifica che lo storefront sia stato ridistribuito dopo aver aggiunto il codice. Per Next.js, assicurati di utilizzare il componente Script da next/script, non un tag <script> standard. Ricorda, il codice va nello storefront, non nel server Medusa. Svuota la cache del browser o testa in modalità incognito.

Documentazione