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

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

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

हेडलेस CMS: Contentful एक हेडलेस CMS है, जिसका अर्थ है कि यह API के माध्यम से सामग्री प्रदान करता है लेकिन इसमें बिल्ट-इन फ्रंटएंड शामिल नहीं है। चैटबॉट इंस्टॉलेशन इस बात पर निर्भर करता है कि आप अपनी Contentful सामग्री को रेंडर करने के लिए किस फ्रंटएंड फ्रेमवर्क का उपयोग कर रहे हैं। नीचे वह विधि चुनें जो आपके सेटअप से मेल खाती हो।

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

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

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

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

विधि 1: Contentful के साथ Next.js (अनुशंसित)

यदि आप अपनी Contentful सामग्री रेंडर करने के लिए Next.js का उपयोग कर रहे हैं, तो Script कंपोनेंट का उपयोग करके चैटबॉट जोड़ें:

अपनी मुख्य लेआउट फ़ाइल खोलें: app/layout.tsx (App Router) या pages/_app.tsx (Pages Router)
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="lazyOnload" /> </body> </html> ) }
YOUR_WIDGET_ID को अपनी वास्तविक विजेट ID से बदलें
फ़ाइल सहेजें और अपना डेवलपमेंट सर्वर पुनः शुरू करें

सुझाव: strategy="lazyOnload" का उपयोग सुनिश्चित करता है कि चैटबॉट पृष्ठ पूरी तरह इंटरएक्टिव होने के बाद लोड हो, जिससे सर्वोत्तम प्रदर्शन मिले।

विधि 2: Contentful के साथ Gatsby

Contentful से सामग्री खींचने वाली Gatsby साइटों के लिए:

gatsby-plugin-load-script इंस्टॉल करें (वैकल्पिक लेकिन अनुशंसित):
npm install gatsby-plugin-load-script
अपनी gatsby-config.js में जोड़ें:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
वैकल्पिक रूप से, gatsby-ssr.js का उपयोग करें:
// 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" /> ]) }
अपना Gatsby डेवलपमेंट सर्वर पुनः शुरू करें

विधि 3: Contentful के साथ React

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

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

या useEffect के साथ React कंपोनेंट का उपयोग करें:

// 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
}

विधि 4: Contentful के साथ Vue/Nuxt

Contentful का उपयोग करने वाले Vue या Nuxt.js एप्लिकेशन के लिए:

Nuxt 3:

अपनी 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' } ] } } })

Vue 3:

</body> से पहले अपनी index.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>

विधि 5: Contentful API के साथ स्टैटिक HTML

यदि आप वैनिला JavaScript के साथ Contentful की Content Delivery API का उपयोग कर रहे हैं:

क्लोज़िंग </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: इंस्टॉलेशन सत्यापित करें

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

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

पर्यावरण चर: बेहतर सुरक्षा और लचीलेपन के लिए, हार्डकोड करने के बजाय अपनी विजेट ID को पर्यावरण चर में संग्रहीत करने पर विचार करें (जैसे, Next.js के लिए NEXT_PUBLIC_ASYNTAI_ID)।

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