Cum să adăugați Chatbot-ul AI Asyntai în MedusaCMS

Ghid pas cu pas pentru vitrinele bazate pe Medusa

Platformă:

Important: Medusa este o platformă de e-commerce headless. Codul chatbot-ului trebuie adăugat în aplicația de vitrină, nu în serverul/adminul Medusa.

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați în vitrina Next.js (Cel mai frecvent)

Starter-ul de vitrină implicit Medusa folosește Next.js. Adăugați chatbot-ul în layout-ul rădăcină al vitrinei:

App Router (Next.js 13+)

Deschideți app/layout.tsx în proiectul de vitrină și adăugați componenta 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

Dacă vitrina dvs. folosește Pages Router, deschideți pages/_document.tsx sau 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"
      />
    </>
  )
}

Sfat: Opțiunea strategy="afterInteractive" asigură că chatbot-ul se încarcă după ce pagina devine interactivă, oferind cea mai bună experiență utilizatorului fără a afecta performanța de încărcare a paginii.

Metoda alternativă 1: Vitrină Gatsby

Dacă vitrina Medusa folosește Gatsby, adăugați scriptul prin gatsby-ssr.js folosind onRenderBody și 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"
    />
  ]);
};

Notă: De asemenea, ar trebui să adăugați același cod în gatsby-browser.js dacă doriți ca widget-ul să persiste în timpul navigării pe partea de client. Alternativ, adăugați-l în componenta de layout rădăcină.

Metoda alternativă 2: Vitrină React personalizată

Dacă vitrina Medusa folosește o configurație React personalizată (Vite, Create React App, etc.):

Adăugați scriptul în public/index.html chiar înainte de eticheta de închidere </body>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
  </body>
</html>

Sau utilizați un hook useEffect în componenta rădăcină:

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

Metoda alternativă 3: Orice frontend personalizat

Dacă magazinul dvs. bazat pe Medusa folosește orice alt frontend bazat pe HTML, pur și simplu adăugați eticheta script standard chiar înainte de eticheta de închidere </body>:

    <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
  </body>
</html>

Sfat: Această metodă funcționează cu orice framework frontend sau generator de site-uri statice care produce HTML, inclusiv Vue, Svelte, Angular, Astro și altele conectate la backend-ul Medusa.

Pasul 3: Implementați și verificați

După adăugarea codului în aplicația de vitrină:

Implementați vitrina pe furnizorul dvs. de hosting (Vercel, Netlify, Railway, etc.)
Deschideți vitrina live într-o filă nouă de browser
Ar trebui să vedeți butonul widgetului de chat în colțul din dreapta jos
Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect

Nu vedeți widgetul? Asigurați-vă că ați înlocuit YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord. Verificați că scriptul se încarcă în fila Network a browserului (F12 > Network). Verificați că vitrina a fost reimplementată după adăugarea codului. Pentru Next.js, asigurați-vă că utilizați componenta Script din next/script, nu o etichetă <script> obișnuită. Rețineți, codul merge în vitrină, nu pe serverul Medusa. Goliți cache-ul browserului sau testați în modul incognito.

Documentație