Kaip pridėti Asyntai DI pokalbių robotą prie MedusaCMS

Žingsnis po žingsnio vadovas Medusa paremtoms elektroninėms parduotuvėms

Platforma:

Svarbu: Medusa yra be galvutės (headless) elektroninės prekybos platforma. Pokalbių roboto kodą reikia pridėti prie jūsų parduotuvės programos, o ne prie Medusa serverio/administravimo skydelio.

1 žingsnis: Gaukite savo įterpimo kodą

Pirma, eikite į savo Asyntai valdymo skydelį ir slinkite žemyn iki "Įterpimo kodas" skyriaus. Nukopijuokite savo unikalų įterpimo kodą, kuris atrodys taip:

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

Pastaba: Aukščiau pateiktas kodas yra tik pavyzdys. Turite nukopijuoti savo unikalų įterpimo kodą iš savo Valdymo skydelio, nes jame yra jūsų asmeninis valdiklio ID.

2 žingsnis: Pridėjimas prie Next.js parduotuvės (dažniausias)

Medusa numatytasis parduotuvės šablonas naudoja Next.js. Pridėkite pokalbių robotą prie savo parduotuvės pagrindinio išdėstymo:

App Router (Next.js 13+)

Atidarykite app/layout.tsx savo parduotuvės projekte ir pridėkite 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

Jei jūsų parduotuvė naudoja Pages Router, atidarykite pages/_document.tsx arba 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"
      />
    </>
  )
}

Patarimas: strategy="afterInteractive" parinktis užtikrina, kad pokalbių robotas įkeliamas po to, kai puslapis tampa interaktyvus, suteikiant geriausią naudotojo patirtį nepaveikiant puslapio įkėlimo našumo.

Alternatyvus metodas 1: Gatsby parduotuvė

Jei jūsų Medusa parduotuvė naudoja Gatsby, pridėkite scenarijų per gatsby-ssr.js naudodami onRenderBody ir 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"
    />
  ]);
};

Pastaba: Taip pat turėtumėte pridėti tą patį kodą į gatsby-browser.js, jei norite, kad valdiklis išliktų naršant kliento pusėje. Arba pridėkite jį prie savo pagrindinio išdėstymo komponento.

Alternatyvus metodas 2: individuali React parduotuvė

Jei jūsų Medusa parduotuvė naudoja individualų React nustatymą (Vite, Create React App ir kt.):

Pridėkite scenarijų į public/index.html prieš pat uždaromąjį </body> žymą:

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

Arba naudokite useEffect kabliuką (hook) savo pagrindiniame komponente:

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

Alternatyvus metodas 3: bet kokia individuali sąsaja

Jei jūsų Medusa paremta parduotuvė naudoja bet kokį kitą HTML pagrįstą frontend, tiesiog pridėkite standartinę script žymą prieš pat uždaromąjį </body> žymą:

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

Patarimas: Šis metodas veikia su bet kokia frontend sistema ar statinių svetainių generatoriumi, kuris generuoja HTML, įskaitant Vue, Svelte, Angular, Astro ir kitus, sujungtus su Medusa backend.

3 žingsnis: Įdiekite ir patikrinkite

Pridėję kodą prie savo parduotuvės programos:

Įdiekite savo parduotuvę pas prieglobos tiekėją (Vercel, Netlify, Railway ir kt.)
Atidarykite savo veikiančią parduotuvę naujame naršyklės skirtuke
Turėtumėte matyti pokalbių valdiklio mygtuką apatiniame dešiniajame kampe
Spustelėkite jį, kad įsitikintumėte, jog jis atsidaro ir veikia teisingai

Nematote valdiklio? Įsitikinkite, kad pakeitėte YOUR_WIDGET_ID savo tikruoju valdiklio ID iš valdymo skydelio. Patikrinkite, ar scenarijus įkeliamas naršyklės Network skirtuke (F12 > Network). Patvirtinkite, kad parduotuvė buvo iš naujo įdiegta pridėjus kodą. Next.js atveju įsitikinkite, kad naudojate Script komponentą iš next/script, o ne įprastą <script> žymą. Atminkite, kodas eina į parduotuvę, o ne į Medusa serverį. Išvalykite naršyklės talpyklą arba testuokite inkognito režimu.

Dokumentacija