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

Sanity-संचालित वेबसाइटों के लिए चरण-दर-चरण गाइड

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

महत्वपूर्ण: Sanity एक हेडलेस CMS है जो API के माध्यम से कंटेंट डिलीवर करता है। चैटबॉट कोड को आपके frontend application (Next.js, Gatsby, Nuxt, प्लेन HTML, आदि) में जोड़ा जाना चाहिए, न कि स्वयं Sanity Studio में।

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

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

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

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

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

यदि आपकी Sanity-संचालित साइट Next.js (सबसे सामान्य पेयरिंग) का उपयोग करती है, तो अपने रूट लेआउट में चैटबॉट जोड़ें:

App Router (Next.js 13+)

app/layout.js (या 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.js खोलें:

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 फ्रंटएंड

यदि आपकी Sanity साइट Gatsby का उपयोग करती है, तो 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: Nuxt.js फ्रंटएंड

यदि आपकी Sanity साइट Nuxt.js का उपयोग करती है, तो nuxt.config.js (या nuxt.config.ts) में स्क्रिप्ट जोड़ें:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          'data-asyntai-id': 'YOUR_WIDGET_ID',
          async: true
        }
      ]
    }
  }
})

वैकल्पिक विधि 3: साधारण HTML फ्रंटएंड

यदि आपकी Sanity-संचालित साइट प्लेन HTML या Sanity API का उपयोग करने वाले स्टैटिक साइट जनरेटर का उपयोग करती है:

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

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

वैकल्पिक विधि 4: React (Vite या Create React App)

यदि आपका फ्रंटएंड Vite या Create React App के साथ React का उपयोग करता है:

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.jsx or App.tsx
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: डिप्लॉय करें और सत्यापित करें

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

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

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

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