Strapi में Asyntai AI चैटबॉट कैसे जोड़ें
Strapi-संचालित वेबसाइटों के लिए चरण-दर-चरण गाइड
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
हेडलेस CMS: Strapi एक हेडलेस CMS है जो API के माध्यम से सामग्री प्रदान करता है लेकिन इसमें बिल्ट-इन फ्रंटएंड शामिल नहीं है। चैटबॉट इंस्टालेशन इस बात पर निर्भर करता है कि आप अपनी Strapi सामग्री को रेंडर करने के लिए किस फ्रंटएंड फ्रेमवर्क का उपयोग कर रहे हैं। नीचे वह विधि चुनें जो आपके सेटअप से मेल खाती हो।
चरण 1: अपना एम्बेड कोड प्राप्त करें
सबसे पहले, अपने Asyntai डैशबोर्ड पर जाएँ और "एम्बेड कोड" अनुभाग तक स्क्रॉल करें। अपना अद्वितीय एम्बेड कोड कॉपी करें जो इस तरह दिखेगा:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
नोट: ऊपर दिया गया कोड केवल एक उदाहरण है। आपको अपने डैशबोर्ड से अपना अद्वितीय एम्बेड कोड कॉपी करना होगा क्योंकि इसमें आपकी व्यक्तिगत विजेट ID होती है।
विधि 1: Strapi के साथ Next.js (अनुशंसित)
यदि आप अपने Strapi फ्रंटएंड के रूप में 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" का उपयोग यह सुनिश्चित करता है कि पेज के पूरी तरह से इंटरैक्टिव होने के बाद चैटबॉट लोड हो, जो आपकी Strapi-संचालित साइट के लिए सर्वोत्तम प्रदर्शन प्रदान करता है।
विधि 2: Strapi के साथ Gatsby
gatsby-source-strapi का उपयोग करने वाली Gatsby साइटों के लिए:
- अपने प्रोजेक्ट रूट में
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"
/>
])
} YOUR_WIDGET_IDको अपनी वास्तविक विजेट ID से बदलें- अपना Gatsby डेवलपमेंट सर्वर पुनः शुरू करें
विधि 3: Strapi के साथ Nuxt.js
@nuxtjs/strapi का उपयोग करने वाले 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'
}
]
}
}
})
Nuxt 2:
- अपने
nuxt.config.jsमें जोड़ें:export default {
head: {
script: [
{
src: 'https://asyntai.com/static/js/chat-widget.js',
async: true,
'data-asyntai-id': 'YOUR_WIDGET_ID'
}
]
}
}
विधि 4: Strapi के साथ React
Strapi API का उपयोग करने वाले मानक React ऐप्स (Create React App, Vite) के लिए:
- अपनी
public/index.htmlफ़ाइल (CRA) याindex.html(Vite) खोलें - क्लोजिंग
</body>टैग से पहले एम्बेड कोड जोड़ें:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - फ़ाइल सहेजें
या एक 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
}
विधि 5: Strapi के साथ SvelteKit
Strapi सामग्री का उपयोग करने वाले SvelteKit एप्लिकेशन के लिए:
- अपनी
src/app.htmlफ़ाइल संपादित करें - क्लोजिंग
</body>टैग से पहले एम्बेड कोड जोड़ें:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - फ़ाइल सहेजें
विधि 6: Strapi API के साथ स्टैटिक साइट
यदि आप स्टैटिक HTML साइट के साथ Strapi की REST या GraphQL API का उपयोग कर रहे हैं:
- क्लोज़िंग
</body>टैग से पहले अपनी HTML फ़ाइल में एम्बेड कोड जोड़ें:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - फ़ाइल सहेजें और अपनी होस्टिंग पर अपलोड करें
चरण 2: इंस्टॉलेशन सत्यापित करें
अपने Strapi-संचालित साइट पर चैटबॉट कोड जोड़ने के बाद, अपने डेवलपमेंट सर्वर को डिप्लॉय करें या चलाएं। एक नए ब्राउज़र टैब या इनकॉग्निटो विंडो में अपनी वेबसाइट पर जाएं। आपको नीचे दाएं कोने में चैट विजेट बटन दिखाई देना चाहिए। यह सुनिश्चित करने के लिए कि यह खुलता है और सही ढंग से काम करता है, इस पर क्लिक करें।
विजेट दिखाई नहीं दे रहा? सुनिश्चित करें कि आपने अपने फ्रेमवर्क के लिए सही फ़ाइल में स्क्रिप्ट जोड़ी है। किसी भी त्रुटि के लिए अपने ब्राउज़र का डेवलपर कंसोल जाँचें। यदि सर्वर-साइड रेंडरिंग का उपयोग कर रहे हैं, तो सुनिश्चित करें कि स्क्रिप्ट क्लाइंट साइड पर चलती है। अपना ब्राउज़र कैश साफ़ करने या इनकॉग्निटो विंडो में देखने का प्रयास करें।
पर्यावरण चर: बेहतर सुरक्षा और लचीलेपन के लिए, हार्डकोड करने के बजाय अपनी विजेट ID को पर्यावरण चर में संग्रहीत करने पर विचार करें (जैसे, Next.js के लिए NEXT_PUBLIC_ASYNTAI_ID या Vite के लिए VITE_ASYNTAI_ID)।