כיצד להוסיף צ'אטבוט AI של Asyntai ל-MedusaCMS

מדריך צעד אחר צעד לחנויות מבוססות Medusa

פלטפורמה:

חשוב: Medusa היא פלטפורמת מסחר אלקטרוני headless. יש להוסיף את קוד הצ'אטבוט לאפליקציית החנות שלכם, לא לשרת/ממשק הניהול של Medusa.

שלב 1: קבל את קוד ההטמעה שלך

ראשית, עבור ללוח הבקרה של Asyntai וגלול למטה לחלק "קוד הטמעה". העתק את קוד ההטמעה הייחודי שלך שייראה כך:

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

הערה: הקוד למעלה הוא רק דוגמה. עליך להעתיק את קוד ההטמעה הייחודי שלך מלוח הבקרה שלך כיוון שהוא מכיל את מזהה הווידג'ט האישי שלך.

שלב 2: הוספה לחנות Next.js (הנפוץ ביותר)

ערכת ההתחלה של חנות Medusa משתמשת ב-Next.js. הוסיפו את הצ'אטבוט ל-layout הראשי של החנות:

App Router (Next.js 13+)

פתחו את app/layout.tsx בפרויקט החנות שלכם והוסיפו את רכיב 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" מבטיחה שהצ'אטבוט נטען לאחר שהדף הופך לאינטראקטיבי, ומספקת את חוויית המשתמש הטובה ביותר מבלי להשפיע על ביצועי טעינת הדף.

שיטה חלופית 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 אם אתם רוצים שהווידג'ט יישאר במהלך ניווט בצד הלקוח. לחלופין, הוסיפו אותו לרכיב ה-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 ברכיב הראשי שלכם:

// 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 שלכם משתמשת בכל frontend אחר מבוסס HTML, פשוט הוסיפו את תגית הסקריפט הסטנדרטית ממש לפני תגית הסגירה </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 או מחולל אתרים סטטיים שמפיק HTML, כולל Vue, Svelte, Angular, Astro ואחרים המחוברים ל-backend של Medusa.

שלב 3: פריסה ואימות

לאחר הוספת הקוד לאפליקציית החנות שלכם:

פרסו את החנות שלכם אצל ספק האירוח (Vercel, Netlify, Railway וכו')
פתחו את החנות החיה שלכם בלשונית דפדפן חדשה
אתה אמור לראות את כפתור ווידג'ט הצ'אט בפינה הימנית התחתונה
לחצו עליו כדי לוודא שהוא נפתח ופועל כראוי

לא רואה את הווידג'ט? ודאו שהחלפתם YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלכם מלוח הבקרה. בדקו שהסקריפט נטען בלשונית Network של הדפדפן (F12 > Network). ודאו שהחנות פורסה מחדש לאחר הוספת הקוד. עבור Next.js, ודאו שאתם משתמשים ברכיב Script מ-next/script, ולא בתגית <script> רגילה. זכרו, הקוד נכנס לחנות, לא לשרת Medusa. נקו את מטמון הדפדפן או בדקו במצב גלישה פרטית.

תיעוד