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

PayloadCMS-संचालित वेबसाइटों के लिए चरण-दर-चरण मार्गदर्शिका

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

महत्वपूर्ण: PayloadCMS एक हेडलेस CMS है। चैटबॉट कोड को आपके frontend application में जोड़ा जाना चाहिए, न कि Payload एडमिन पैनल में।

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

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

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

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

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

PayloadCMS आमतौर पर अपने फ्रंटएंड फ्रेमवर्क के रूप में 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/_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: कस्टम React फ्रंटएंड

यदि आपका PayloadCMS प्रोजेक्ट Next.js के बजाय कस्टम React फ्रंटएंड का उपयोग करता है, तो आप 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
  );
}

नोट: YOUR_WIDGET_ID को डैशबोर्ड से अपनी वास्तविक विजेट आईडी से बदलें। रिटर्न स्टेटमेंट में क्लीनअप फ़ंक्शन यह सुनिश्चित करता है कि यदि कंपोनेंट अनमाउंट हो जाता है तो स्क्रिप्ट हटा दी जाए।

वैकल्पिक विधि 2: Payload के कस्टम कंपोनेंट्स का उपयोग करना (केवल एडमिन पैनल)

यदि आप चाहते हैं कि चैटबॉट स्वयं Payload एडमिन पैनल के अंदर दिखाई दे (आंतरिक सहायता के लिए), तो आप अपने payload.config.ts में एक कस्टम कंपोनेंट रजिस्टर कर सकते हैं:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

फिर कंपोनेंट फ़ाइल बनाएँ:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  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 null;
};

export default AsyntaiChatbot;

सुझाव: यह विधि केवल Payload एडमिन पैनल में चैटबॉट जोड़ने के लिए है। आपकी सार्वजनिक वेबसाइट के लिए, इसके बजाय चरण 2 या वैकल्पिक विधि 1 का उपयोग करें।

वैकल्पिक विधि 3: साधारण HTML/स्टैटिक साइट

यदि आपकी PayloadCMS-संचालित साइट Payload API का उपयोग करने वाले साधारण HTML या स्टैटिक फ्रंटएंड का उपयोग करती है, तो एम्बेड कोड को सीधे अपने HTML में जोड़ें:

अपनी मुख्य HTML फ़ाइल खोलें (आमतौर पर index.html)
क्लोजिंग </body> टैग से ठीक पहले एम्बेड कोड जोड़ें:

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

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

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

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

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

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