MedusaCMS में Asyntai AI चैटबॉट कैसे जोड़ें

Medusa-संचालित स्टोरफ्रंट के लिए चरण-दर-चरण मार्गदर्शिका

प्लेटफ़ॉर्म:

महत्वपूर्ण: Medusa एक हेडलेस ई-कॉमर्स प्लेटफ़ॉर्म है। चैटबॉट कोड आपके स्टोरफ्रंट एप्लिकेशन में जोड़ा जाना चाहिए, Medusa सर्वर/एडमिन में नहीं।

चरण 1: अपना एम्बेड कोड प्राप्त करें

सबसे पहले, अपने Asyntai डैशबोर्ड पर जाएँ और "एम्बेड कोड" अनुभाग तक स्क्रॉल करें। अपना अद्वितीय एम्बेड कोड कॉपी करें जो इस तरह दिखेगा:

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

नोट: ऊपर दिया गया कोड केवल एक उदाहरण है। आपको अपने डैशबोर्ड से अपना अद्वितीय एम्बेड कोड कॉपी करना होगा क्योंकि इसमें आपकी व्यक्तिगत विजेट ID होती है।

चरण 2: Next.js स्टोरफ्रंट में जोड़ें (सबसे सामान्य)

Medusa का डिफ़ॉल्ट स्टोरफ्रंट स्टार्टर Next.js का उपयोग करता है। अपने स्टोरफ्रंट के रूट लेआउट में चैटबॉट जोड़ें:

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 का उपयोग करता है, तो onRenderBody और setPostBodyComponents का उपयोग करके gatsby-ssr.js के माध्यम से स्क्रिप्ट जोड़ें:

// 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 में भी वही कोड जोड़ना चाहिए। वैकल्पिक रूप से, इसे अपने रूट लेआउट कंपोनेंट में जोड़ें।

वैकल्पिक विधि 2: कस्टम React स्टोरफ्रंट

यदि आपका Medusa स्टोरफ्रंट कस्टम React सेटअप (Vite, Create React App, आदि) का उपयोग करता है:

क्लोज़िंग </body> टैग से ठीक पहले public/index.html में स्क्रिप्ट जोड़ें:

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

या अपने रूट कंपोनेंट में 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: कोई भी कस्टम फ्रंटएंड

यदि आपका Medusa-संचालित स्टोर किसी अन्य HTML-आधारित फ्रंटएंड का उपयोग करता है, तो बस क्लोज़िंग </body> टैग से ठीक पहले मानक स्क्रिप्ट टैग जोड़ें:

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

सुझाव: यह विधि किसी भी फ्रंटएंड फ्रेमवर्क या स्टैटिक साइट जनरेटर के साथ काम करती है जो HTML आउटपुट करता है, जिसमें Vue, Svelte, Angular, Astro, और Medusa बैकएंड से जुड़े अन्य शामिल हैं।

चरण 3: डिप्लॉय करें और सत्यापित करें

अपने स्टोरफ्रंट एप्लिकेशन में कोड जोड़ने के बाद:

अपना स्टोरफ्रंट अपने होस्टिंग प्रदाता (Vercel, Netlify, Railway, आदि) पर डिप्लॉय करें
अपना लाइव स्टोरफ्रंट एक नए ब्राउज़र टैब में खोलें
आपको नीचे दाएँ कोने में चैट विजेट बटन दिखाई देना चाहिए
यह सुनिश्चित करने के लिए इस पर क्लिक करें कि यह सही ढंग से खुलता और काम करता है

विजेट दिखाई नहीं दे रहा? सुनिश्चित करें कि आपने YOUR_WIDGET_ID को डैशबोर्ड से अपनी वास्तविक विजेट ID से बदला है। जाँचें कि स्क्रिप्ट आपके ब्राउज़र के Network टैब (F12 > Network) में लोड हो रही है। सत्यापित करें कि कोड जोड़ने के बाद स्टोरफ्रंट को पुनः डिप्लॉय किया गया था। Next.js के लिए, सुनिश्चित करें कि आप नियमित <script> टैग के बजाय next/script से Script कंपोनेंट का उपयोग कर रहे हैं। याद रखें, कोड स्टोरफ्रंट में जाता है, Medusa सर्वर में नहीं। अपना ब्राउज़र कैश साफ़ करें या इनकॉग्निटो मोड में परीक्षण करें।

दस्तावेज़ीकरण