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

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

DatoCMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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

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

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

Next.js DatoCMS के साथ उपयोग किया जाने वाला सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क है। Script कंपोनेंट का उपयोग करके चैटबॉट जोड़ें:

App Router (app/layout.tsx):

1. अपनी रूट लेआउट फ़ाइल खोलें: app/layout.tsx
2. Script कंपोनेंट आयात करें और चैटबॉट जोड़ें:
   import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}
3. YOUR_WIDGET_ID को अपनी वास्तविक विजेट ID से बदलें
4. फ़ाइल सहेजें और अपना डेवलपमेंट सर्वर पुनः शुरू करें

Pages Router (pages/_app.tsx):

1. अपनी pages/_app.tsx फ़ाइल खोलें
2. Script कंपोनेंट जोड़ें:
   import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

वैकल्पिक विधि 1: Gatsby फ्रंटएंड

gatsby-source-datocms के माध्यम से DatoCMS से सामग्री खींचने वाली Gatsby साइटों के लिए:

1. अपने प्रोजेक्ट रूट में gatsby-ssr.js बनाएँ या संपादित करें:
   import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai-chatbot"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ])
}
2. YOUR_WIDGET_ID को अपनी वास्तविक विजेट ID से बदलें
3. अपना Gatsby डेवलपमेंट सर्वर पुनः शुरू करें

वैकल्पिक विधि 2: Nuxt.js फ्रंटएंड

DatoCMS सामग्री का उपयोग करने वाले Nuxt.js एप्लिकेशन के लिए:

1. अपनी nuxt.config.ts में जोड़ें:
   export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          async: true,
          'data-asyntai-id': 'YOUR_WIDGET_ID'
        }
      ]
    }
  }
})
2. YOUR_WIDGET_ID को अपनी वास्तविक विजेट ID से बदलें
3. अपना Nuxt डेवलपमेंट सर्वर पुनः शुरू करें

वैकल्पिक विधि 3: सामान्य HTML / स्टैटिक साइट

यदि आप स्टैटिक HTML साइट या स्टैटिक साइट जनरेटर के साथ DatoCMS की Content Delivery API का उपयोग कर रहे हैं:

1. क्लोज़िंग </body> टैग से पहले अपनी HTML फ़ाइल में एम्बेड कोड जोड़ें:
   <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. YOUR_WIDGET_ID को अपनी वास्तविक विजेट ID से बदलें
3. फ़ाइल सहेजें और अपनी होस्टिंग पर अपलोड करें

वैकल्पिक विधि 4: React (Vite/CRA)

DatoCMS API का उपयोग करने वाले मानक React ऐप्स (Create React App, Vite) के लिए:

विकल्प A: public/index.html में जोड़ें

1. अपनी public/index.html फ़ाइल (CRA) या index.html (Vite) खोलें
2. क्लोजिंग </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>
3. फ़ाइल सहेजें

विकल्प B: रूट कंपोनेंट में useEffect

1. एक चैटबॉट कंपोनेंट बनाएँ या अपने रूट कंपोनेंट में जोड़ें:
   // components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://asyntai.com/static/js/chat-widget.js'
    script.async = true
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [])
  return null
}
2. अपने App.jsx या रूट लेआउट में कंपोनेंट आयात करें और रेंडर करें

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

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