Kuidas lisada Asyntai AI vestlusrobotit MedusaCMS-ile

Samm-sammult juhend Medusa-põhiste kaupluste jaoks

Platvorm:

Oluline: Medusa on peata e-kaubanduse platvorm. Vestlusroboti kood tuleb lisada teie kaupluse rakendusse, mitte Medusa serverisse/halduspaneeli.

1. samm: hankige oma manuskood

Esmalt minge oma Asyntai juhtpaneelile ja kerige alla jaotiseni "Manuskood". Kopeerige oma unikaalne manuskood, mis näeb välja selline:

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

Märkus: Ülalolev kood on vaid näide. Peate kopeerima oma unikaalse manuskoodi oma juhtpaneelilt, kuna see sisaldab teie isiklikku vidina ID-d.

2. samm: lisamine Next.js kauplusesse (kõige levinum)

Medusa vaikimisi kaupluse starter kasutab Next.js-i. Lisage vestlusrobot oma kaupluse juurküljendusesse:

App Router (Next.js 13+)

Avage oma kaupluse projektis app/layout.tsx ja lisage Script komponent:

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

Kui teie kauplus kasutab Pages Routerit, avage pages/_document.tsx või 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"
      />
    </>
  )
}

Vihje: Valik strategy="afterInteractive" tagab, et vestlusrobot laadib pärast lehe interaktiivseks muutumist, pakkudes parimat kasutajakogemust ilma lehe laadimise jõudlust mõjutamata.

Alternatiivne meetod 1: Gatsby veebipood

Kui teie Medusa kauplus kasutab Gatsbyt, lisage skript faili gatsby-ssr.js kaudu, kasutades onRenderBody ja 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"
    />
  ]);
};

Märkus: Samuti peaksite lisama sama koodi faili gatsby-browser.js, kui soovite, et vidin püsiks kliendipoolse navigeerimise ajal. Alternatiivina lisage see oma juurküljenduse komponenti.

Alternatiivne meetod 2: kohandatud Reacti veebipood

Kui teie Medusa kauplus kasutab kohandatud Reacti seadistust (Vite, Create React App jne):

Lisage skript faili public/index.html vahetult enne sulgevat </body> märgendit:

<!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>

Või kasutage useEffect konksu oma juurkomponendis:

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

Alternatiivne meetod 3: mis tahes kohandatud kasutajaliides

Kui teie Medusa-põhine kauplus kasutab mis tahes muud HTML-põhist kasutajaliidest, lisage lihtsalt standardne skriptimärgend vahetult enne sulgevat </body> märgendit:

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

Vihje: See meetod töötab mis tahes kasutajaliidese raamistiku või staatilise saidi generaatoriga, mis väljastab HTML-i, sealhulgas Vue, Svelte, Angular, Astro ja teised, mis on ühendatud Medusa tagaosaga.

3. samm: Juurutage ja kontrollige

Pärast koodi lisamist oma kaupluse rakendusse:

Juurutage oma kauplus oma hostinguteenuse pakkujale (Vercel, Netlify, Railway jne)
Avage oma aktiivne veebipood uuel brauseri vahekaardil
Peaksite nägema vestlusvidina nuppu alumises paremas nurgas
Klõpsake sellel, et veenduda selle avamises ja korrektses toimimises

Ei näe vidinat? Veenduge, et asendasite YOUR_WIDGET_ID oma tegeliku vidina ID-ga juhtpaneelilt. Kontrollige, kas skript laadib teie brauseri võrgu vahekaardil (F12 > Network). Veenduge, et kauplus juurutati pärast koodi lisamist uuesti. Next.js-i puhul veenduge, et kasutate Script komponenti paketist next/script, mitte tavalist <script> märgendit. Pidage meeles, et kood lisatakse kauplusesse, mitte Medusa serverisse. Tühjendage brauseri vahemälu või testige inkognito režiimis.

Dokumentatsioon