Kā pievienot Asyntai MI tērzēšanas robotu MedusaCMS

Soli pa solim ceļvedis Medusa darbinātiem veikaliem

Platforma:

Svarīgi: Medusa ir bezgalvas e-komercijas platforma. Tērzēšanas robota kods jāpievieno jūsu veikala lietojumprogrammai, nevis Medusa serverim/administrēšanas panelim.

1. solis: Iegūstiet savu iegulto kodu

Vispirms dodieties uz savu Asyntai vadības paneli un ritiniet uz leju līdz sadaļai "Iegultais kods". Nokopējiet savu unikālo iegulto kodu, kas izskatīsies šādi:

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

Piezīme: Iepriekš minētais kods ir tikai piemērs. Jums jānokopē savs unikālais iegultais kods no sava Vadības paneļa, jo tas satur jūsu personīgo logrīka ID.

2. solis: Pievienošana Next.js veikalam (visbiežāk)

Medusa noklusējuma veikala sākumprojekts izmanto Next.js. Pievienojiet tērzēšanas robotu sava veikala saknes izkārtojumam:

App Router (Next.js 13+)

Atveriet app/layout.tsx savā veikala projektā un pievienojiet Script komponentu:

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

Ja jūsu veikals izmanto Pages Router, atveriet pages/_document.tsx vai 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"
      />
    </>
  )
}

Padoms: Opcija strategy="afterInteractive" nodrošina, ka tērzēšanas robots tiek ielādēts pēc tam, kad lapa kļūst interaktīva, nodrošinot labāko lietotāja pieredzi, neietekmējot lapas ielādes veiktspēju.

1. alternatīvā metode: Gatsby veikals

Ja jūsu Medusa veikals izmanto Gatsby, pievienojiet skriptu, izmantojot gatsby-ssr.js ar onRenderBody un 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"
    />
  ]);
};

Piezīme: Jums vajadzētu pievienot to pašu kodu arī failā gatsby-browser.js, ja vēlaties, lai logrīks saglabātos klienta puses navigācijas laikā. Alternatīvi pievienojiet to savam saknes izkārtojuma komponentam.

2. alternatīvā metode: pielāgots React veikals

Ja jūsu Medusa veikals izmanto pielāgotu React konfigurāciju (Vite, Create React App u.c.):

Pievienojiet skriptu failā public/index.html tieši pirms noslēdzošā </body> taga:

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

Vai izmantojiet useEffect āķi savā saknes komponentā:

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

3. alternatīvā metode: jebkurš pielāgots priekšgals

Ja jūsu Medusa darbinātais veikals izmanto jebkuru citu HTML bāzētu priekšgalu, vienkārši pievienojiet standarta skripta tagu tieši pirms noslēdzošā </body> taga:

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

Padoms: Šī metode darbojas ar jebkuru priekšgala ietvaru vai statisko vietņu ģeneratoru, kas izvada HTML, tostarp Vue, Svelte, Angular, Astro un citiem, kas savienoti ar Medusa aizmuguri.

3. solis: Izvietojiet un pārbaudiet

Pēc koda pievienošanas jūsu veikala lietojumprogrammai:

Izvietojiet savu veikalu pie hostinga pakalpojumu sniedzēja (Vercel, Netlify, Railway u.c.)
Atveriet savu aktīvo veikalu jaunā pārlūkprogrammas cilnē
Jums vajadzētu redzēt tērzēšanas logrīka pogu apakšējā labajā stūrī
Noklikšķiniet uz tā, lai pārliecinātos, ka tas atveras un darbojas pareizi

Neredzat logrīku? Pārliecinieties, ka esat aizstājis YOUR_WIDGET_ID ar savu faktisko logrīka ID no vadības paneļa. Pārbaudiet, vai skripts tiek ielādēts pārlūkprogrammas cilnē Network (F12 > Network). Pārliecinieties, ka veikals tika atkārtoti izvietots pēc koda pievienošanas. Next.js gadījumā pārliecinieties, ka izmantojat Script komponentu no next/script, nevis parastu <script> tagu. Atcerieties, ka kods tiek ievietots veikalā, nevis Medusa serverī. Notīriet pārlūkprogrammas kešatmiņu vai testējiet inkognito režīmā.

Dokumentācija