किसी भी वेबसाइट में Asyntai AI चैटबॉट कैसे जोड़ें
HTML, कस्टम साइटों और स्टैटिक जनरेटर के लिए यूनिवर्सल गाइड
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 डैशबोर्ड पर जाएँ और "एम्बेड कोड" अनुभाग तक स्क्रॉल करें। अपना अद्वितीय एम्बेड कोड कॉपी करें जो इस तरह दिखेगा:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
नोट: ऊपर दिया गया कोड केवल एक उदाहरण है। आपको अपने डैशबोर्ड से अपना अद्वितीय एम्बेड कोड कॉपी करना होगा क्योंकि इसमें आपकी व्यक्तिगत विजेट ID होती है।
चरण 2: अपनी HTML फ़ाइल में जोड़ें
चैटबॉट जोड़ने का सबसे सरल तरीका एम्बेड कोड को सीधे अपनी HTML फ़ाइल में पेस्ट करना है:
- अपनी HTML फ़ाइल को टेक्स्ट एडिटर में खोलें
- क्लोज़िंग
</body>टैग खोजें </body>टैग से ठीक पहले अपना Asyntai एम्बेड कोड पेस्ट करें- फ़ाइल सहेजें
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Asyntai Chatbot - Add before closing body tag -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>
सुझाव: क्लोज़िंग </body> टैग से पहले स्क्रिप्ट जोड़ने से यह सुनिश्चित होता है कि यह आपकी पृष्ठ सामग्री के बाद लोड हो, जो प्रदर्शन के लिए इष्टतम है और आपके पृष्ठ को धीमा नहीं करेगा।
बहु-पृष्ठ वेबसाइटों के लिए
यदि आपकी वेबसाइट में कई HTML पृष्ठ हैं, तो आपके पास कई विकल्प हैं:
विकल्प A: प्रत्येक पृष्ठ पर जोड़ें
प्रत्येक HTML फ़ाइल में एम्बेड कोड जोड़ें जहाँ आप चैटबॉट दिखाना चाहते हैं।
विकल्प B: एक सामान्य फुटर इनक्लूड का उपयोग करें
यदि आप server-side includes (SSI), PHP includes, या समान का उपयोग कर रहे हैं:
- एक footer.html (या footer.php) फ़ाइल बनाएँ
- इस फ़ाइल में Asyntai एम्बेड कोड जोड़ें
- इस फुटर फ़ाइल को अपने सभी पृष्ठों में शामिल करें:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
विकल्प C: JavaScript डायनामिक लोडिंग
एक एकल JavaScript फ़ाइल बनाएँ जो सभी पृष्ठों पर चैटबॉट लोड करे:
- asyntai-loader.js नाम की एक फ़ाइल बनाएँ:
(function() {
var script = document.createElement('script');
script.async = true;
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
})(); YOUR_WIDGET_IDको अपनी वास्तविक विजेट ID से बदलें- इस स्क्रिप्ट को अपने सभी पृष्ठों में शामिल करें:
<script src="/js/asyntai-loader.js"></script>
स्टैटिक साइट जनरेटर के लिए
यदि आप स्टैटिक साइट जनरेटर का उपयोग कर रहे हैं, तो अपने बेस लेआउट या टेम्पलेट में एम्बेड कोड जोड़ें:
_includes/footer.html या _layouts/default.html में जोड़ें
layouts/partials/footer.html या layouts/_default/baseof.html में जोड़ें
gatsby-browser.js में जोड़ें या gatsby-ssr.js का उपयोग करें
pages/_document.js में जोड़ें या next/script कंपोनेंट का उपयोग करें
nuxt.config.js में head.script के अंतर्गत जोड़ें
_includes/ में अपने बेस लेआउट में जोड़ें
</body> से पहले src/layouts/Layout.astro में जोड़ें
.vuepress/config.js में head के अंतर्गत जोड़ें
React / Vue / Angular ऐप्स के लिए
सिंगल-पेज एप्लिकेशन (SPAs) के लिए, आप अपने index.html में स्क्रिप्ट जोड़ सकते हैं या इसे गतिशील रूप से लोड कर सकते हैं:
React (index.html विधि)
<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
React (useEffect विधि)
// In your App.js or a component
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);
}, []);
Vue (main.js या App.vue में)
// In mounted() or onMounted()
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);
Angular (index.html में)
<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
चरण 3: इंस्टॉलेशन सत्यापित करें
कोड जोड़ने के बाद, अपनी वेबसाइट को एक नए ब्राउज़र टैब या इनकॉग्निटो विंडो में खोलें। आपको नीचे दाएँ कोने में चैट विजेट बटन दिखाई देना चाहिए। यह सुनिश्चित करने के लिए इस पर क्लिक करें कि यह सही ढंग से खुलता और काम करता है।
विजेट दिखाई नहीं दे रहा? जाँचें कि स्क्रिप्ट </body> टैग से पहले ठीक से रखी गई है। सुनिश्चित करें कि आपके ब्राउज़र के कंसोल में कोई JavaScript त्रुटि नहीं है (डेवलपर टूल खोलने के लिए F12 दबाएँ)। अपना ब्राउज़र कैश साफ़ करने या इनकॉग्निटो विंडो में देखने का प्रयास करें।
महत्वपूर्ण: चैटबॉट के लिए आपकी वेबसाइट को HTTP या HTTPS पर सर्व किया जाना आवश्यक है (सीधे फ़ाइल के रूप में नहीं खोला गया)। यदि आप स्थानीय रूप से परीक्षण कर रहे हैं, तो स्थानीय डेवलपमेंट सर्वर का उपयोग करें।