Πώς να Προσθέσετε το Asyntai AI Chatbot στο MedusaCMS

Οδηγός βήμα προς βήμα για βιτρίνες καταστημάτων που τροφοδοτούνται από Medusa

Πλατφόρμα:

Σημαντικό: Το Medusa είναι μια headless πλατφόρμα ηλεκτρονικού εμπορίου. Ο κώδικας chatbot πρέπει να προστεθεί στην εφαρμογή βιτρίνας σας, όχι στον διακομιστή/διαχειριστή Medusa.

Βήμα 1: Αποκτήστε τον Κωδικό Ενσωμάτωσής σας

Αρχικά, μεταβείτε στον Πίνακα ελέγχου Asyntai και μετακινηθείτε προς τα κάτω στην ενότητα «Embed Code». Αντιγράψτε τον μοναδικό σας κωδικό ενσωμάτωσης, ο οποίος θα μοιάζει κάπως έτσι:

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

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό widget.

Βήμα 2: Προσθήκη στη Βιτρίνα Next.js (Πιο Συνηθισμένο)

Το προεπιλεγμένο starter βιτρίνας του Medusa χρησιμοποιεί Next.js. Προσθέστε το chatbot στο βασικό layout της βιτρίνας σας:

App Router (Next.js 13+)

Ανοίξτε το app/layout.tsx στο έργο βιτρίνας σας και προσθέστε το component 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

Αν η βιτρίνα σας χρησιμοποιεί Pages Router, ανοίξτε το pages/_document.tsx ή το 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"
      />
    </>
  )
}

Συμβουλή: Η επιλογή strategy="afterInteractive" διασφαλίζει ότι το chatbot φορτώνεται αφού η σελίδα γίνει διαδραστική, παρέχοντας την καλύτερη εμπειρία χρήστη χωρίς να επηρεάζει την απόδοση φόρτωσης σελίδας.

Εναλλακτική Μέθοδος 1: Βιτρίνα Gatsby

Αν η βιτρίνα Medusa σας χρησιμοποιεί Gatsby, προσθέστε το σενάριο μέσω του gatsby-ssr.js χρησιμοποιώντας onRenderBody και 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"
    />
  ]);
};

Σημείωση: Θα πρέπει επίσης να προσθέσετε τον ίδιο κώδικα στο gatsby-browser.js αν θέλετε η γραφική εφαρμογή να παραμένει κατά την πλοήγηση στο πρόγραμμα-πελάτη. Εναλλακτικά, προσθέστε το στο component βασικού layout σας.

Εναλλακτική Μέθοδος 2: Προσαρμοσμένη Βιτρίνα React

Αν η βιτρίνα Medusa σας χρησιμοποιεί προσαρμοσμένη ρύθμιση React (Vite, Create React App κ.λπ.):

Προσθέστε το σενάριο στο public/index.html ακριβώς πριν την ετικέτα κλεισίματος </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>

Ή χρησιμοποιήστε ένα hook useEffect στο βασικό component σας:

// 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: Οποιοδήποτε Προσαρμοσμένο Frontend

Αν το κατάστημά σας που τροφοδοτείται από Medusa χρησιμοποιεί οποιοδήποτε άλλο HTML-based frontend, απλώς προσθέστε την τυπική ετικέτα σεναρίου ακριβώς πριν την ετικέτα κλεισίματος </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>

Συμβουλή: Αυτή η μέθοδος λειτουργεί με οποιοδήποτε frontend framework ή γεννήτρια στατικών τοποθεσιών που παράγει HTML, συμπεριλαμβανομένων των Vue, Svelte, Angular, Astro και άλλων συνδεδεμένων με το backend Medusa.

Βήμα 3: Ανάπτυξη και Επαλήθευση

Αφού προσθέσετε τον κώδικα στην εφαρμογή βιτρίνας σας:

Αναπτύξτε τη βιτρίνα σας στον πάροχο φιλοξενίας σας (Vercel, Netlify, Railway κ.λπ.)
Ανοίξτε την ενεργή βιτρίνα σας σε μια νέα καρτέλα προγράμματος περιήγησης
Θα πρέπει να δείτε το κουμπί chat widget στην κάτω δεξιά γωνία
Κάντε κλικ για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά

Δεν βλέπετε το widget; Βεβαιωθείτε ότι αντικαταστήσατε το YOUR_WIDGET_ID με το πραγματικό ID γραφικής εφαρμογής σας από τον πίνακα εργαλείων. Ελέγξτε ότι το σενάριο φορτώνεται στην καρτέλα Network του προγράμματος περιήγησής σας (F12 > Network). Επαληθεύστε ότι η βιτρίνα αναπτύχθηκε εκ νέου μετά την προσθήκη του κώδικα. Για Next.js, βεβαιωθείτε ότι χρησιμοποιείτε το component Script από το next/script, όχι μια κανονική ετικέτα <script>. Θυμηθείτε, ο κώδικας πηγαίνει στη βιτρίνα, όχι στον διακομιστή Medusa. Εκκαθαρίστε την κρυφή μνήμη του προγράμματος περιήγησης ή δοκιμάστε σε λειτουργία ανώνυμης περιήγησης.

Τεκμηρίωση