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

Docusaurus प्रलेखन साइटों के लिए चरण-दर-चरण मार्गदर्शिका

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

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

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

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

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

चरण 2: docusaurus.config.js में स्क्रिप्ट जोड़ें (अनुशंसित)

अपनी Docusaurus साइट के सभी पृष्ठों पर चैटबॉट जोड़ने का सबसे अच्छा तरीका कॉन्फ़िगरेशन फ़ाइल के माध्यम से है:

अपने कोड एडिटर में अपना Docusaurus प्रोजेक्ट खोलें
अपने प्रोजेक्ट रूट में docusaurus.config.js फ़ाइल खोजें और खोलें
const config = { } ऑब्जेक्ट खोजें
अपने Asyntai विजेट के साथ scripts फ़ील्ड जोड़ें या अपडेट करें:

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

docusaurus.config.js फ़ाइल सहेजें
npm run build या yarn build चलाकर अपनी साइट पुनः बनाएँ
यदि स्थानीय रूप से चला रहे हैं तो डेवलपमेंट सर्वर पुनः शुरू करें

सुझाव: scripts फ़ील्ड JavaScript स्रोतों की एक सरणी स्वीकार करती है। स्क्रिप्ट टैग स्वचालित रूप से हर पृष्ठ के HTML हेड में डाला जाएगा। यह Docusaurus साइटों के लिए सबसे साफ और सबसे रखरखाव योग्य विधि है।

वैकल्पिक विधि 1: स्ट्रिंग प्रारूप (सरल सिंटैक्स)

यदि आप सरल दृष्टिकोण पसंद करते हैं, तो आप scripts सरणी में स्ट्रिंग प्रारूप का उपयोग कर सकते हैं:

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

नोट: स्ट्रिंग प्रारूप का उपयोग करते समय, आपको स्क्रिप्ट URL को अपनी विजेट ID को क्वेरी पैरामीटर के रूप में शामिल करने के लिए संशोधित करना होगा, या चरण 2 में दिखाए गए ऑब्जेक्ट प्रारूप का उपयोग करें जो आपको सीधे data-asyntai-id विशेषता सेट करने की अनुमति देता है।

वैकल्पिक विधि 2: कस्टम हेड टैग

आप docusaurus.config.js में headTags फ़ील्ड का उपयोग करके भी स्क्रिप्ट जोड़ सकते हैं:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

सुझाव: headTags फ़ील्ड <head> अनुभाग में डाले गए सटीक HTML टैग पर अधिक नियंत्रण प्रदान करती है। यह विधि कार्यात्मक रूप से scripts फ़ील्ड का उपयोग करने के समकक्ष है।

वैकल्पिक विधि 3: कस्टम HTML टेम्पलेट (उन्नत)

उन्नत उपयोगकर्ताओं के लिए जिन्हें HTML टेम्पलेट पर पूर्ण नियंत्रण चाहिए:

एक नई डायरेक्टरी बनाएँ: src/theme (यदि यह मौजूद नहीं है)
एक फ़ाइल बनाएँ: src/theme/Root.js
स्क्रिप्ट को गतिशील रूप से इंजेक्ट करने के लिए निम्नलिखित कोड जोड़ें:

import React, { useEffect } from 'react';

export default function Root({children}) {
  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.head.appendChild(script);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

फ़ाइल सहेजें और अपनी साइट पुनः बनाएँ

महत्वपूर्ण: Root.js कंपोनेंट आपके पूरे एप्लिकेशन को रैप करता है। यह उन्नत विधि केवल तभी उपयोग की जानी चाहिए जब आपको कस्टम JavaScript लॉजिक की आवश्यकता हो या ऐसी विशिष्ट आवश्यकताएँ हों जो कॉन्फ़िगरेशन फ़ाइल दृष्टिकोण से पूरी नहीं हो सकतीं।

वैकल्पिक विधि 4: फुटर कंपोनेंट स्विज़ल करें

आप स्क्रिप्ट शामिल करने के लिए फुटर को कस्टमाइज़ कर सकते हैं:

स्विज़ल कमांड चलाएँ: npm run swizzle @docusaurus/theme-classic Footer -- --eject
यह src/theme/Footer/ में Footer कंपोनेंट की एक प्रति बनाता है
अपना स्क्रिप्ट टैग शामिल करने के लिए Footer कंपोनेंट संपादित करें
फुटर के क्लोज़िंग टैग से पहले स्क्रिप्ट जोड़ें
अपनी साइट सहेजें और पुनः बनाएँ

नोट: स्विज़लिंग आपको Docusaurus कंपोनेंट पर पूर्ण नियंत्रण देती है, लेकिन इसका मतलब है कि आपको उस कंपोनेंट को स्वयं बनाए रखना होगा। Docusaurus के अपडेट स्विज़ल किए गए कंपोनेंट को स्वचालित रूप से अपडेट नहीं करेंगे।

चरण 3: बनाएँ और डिप्लॉय करें

कोड जोड़ने के बाद, अपनी Docusaurus साइट बनाएँ और डिप्लॉय करें:

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

सुझाव: विकास के दौरान, अपने परिवर्तनों का स्थानीय रूप से पूर्वावलोकन करने के लिए npm start या yarn start चलाएँ। चैटबॉट सभी पृष्ठों पर नीचे दाएँ कोने में दिखाई देना चाहिए।

चरण 4: इंस्टॉलेशन सत्यापित करें

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

विजेट दिखाई नहीं दे रहा? परिवर्तन करने के बाद सुनिश्चित करें कि आपने अपनी साइट पुनः बनाई है। जाँचें कि आपने YOUR_WIDGET_ID को डैशबोर्ड से अपनी वास्तविक विजेट ID से बदला है। अपना ब्राउज़र कैश साफ़ करें या इनकॉग्निटो मोड में देखें। किसी भी JavaScript त्रुटि के लिए ब्राउज़र कंसोल (F12) खोलें।

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