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

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

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

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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 होती है।

चरण 2: मास्टर टेम्पलेट संपादित करें (अनुशंसित)

सभी पेजों पर चैटबॉट जोड़ने का सबसे आसान तरीका अपने Master टेम्पलेट को संपादित करना है:

अपने Umbraco बैकऑफिस में लॉग इन करें
बाएँ साइडबार में सेटिंग्स पर जाएँ
टेम्पलेट्स का विस्तार करें
अपने Master टेम्पलेट (या आपकी साइट द्वारा उपयोग किए जाने वाले मुख्य लेआउट टेम्पलेट) पर क्लिक करें
क्लोज़िंग </body> टैग खोजें
</body> टैग से ठीक पहले अपना Asyntai एम्बेड कोड पेस्ट करें
"सहेजें" पर क्लिक करें

सुझाव: क्लोज़िंग </body> टैग से पहले स्क्रिप्ट जोड़ने से यह सुनिश्चित होता है कि यह पृष्ठ सामग्री के बाद लोड हो, जो चैट विजेट के लिए अनुशंसित है और आपकी पृष्ठ लोडिंग को धीमा नहीं करेगा।

वैकल्पिक: साइट सेटिंग्स डॉक्यूमेंट टाइप का उपयोग

अधिक लचीलेपन के लिए, आप फुटर स्क्रिप्ट को प्रबंधित करने के लिए एक कस्टम फ़ील्ड जोड़ सकते हैं:

सेटिंग्स → डॉक्यूमेंट टाइप पर जाएँ
अपने Site Settings डॉक्यूमेंट टाइप को संपादित करें (या यदि यह मौजूद नहीं है तो एक बनाएं)
Textarea डेटा टाइप के साथ "Footer Scripts" नामक एक नई प्रॉपर्टी जोड़ें
डॉक्यूमेंट टाइप सहेजें
Content पर जाएँ और अपने Site Settings नोड को संपादित करें
फुटर स्क्रिप्ट्स फ़ील्ड में अपना Asyntai एम्बेड कोड पेस्ट करें
अपने Master टेम्पलेट में, </body> से पहले यह कोड जोड़ें:
@Html.Raw(Model.Value("footerScripts"))
सामग्री और टेम्पलेट दोनों सहेजें

नोट: HTML एन्कोडिंग के बिना स्क्रिप्ट टैग को ठीक से रेंडर करने के लिए @Html.Raw() का उपयोग करना महत्वपूर्ण है।

वैकल्पिक: स्क्रिप्ट्स फ़ोल्डर का उपयोग

आप Umbraco बैकऑफिस में एक JavaScript फ़ाइल भी बना सकते हैं:

सेटिंग्स → स्क्रिप्ट्स पर जाएँ
Scripts पर राइट-क्लिक करें और "Create" चुनें
asyntai-chatbot.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 से बदलें
फ़ाइल सहेजें
अपने Master टेम्पलेट में </body> से पहले इस स्क्रिप्ट को शामिल करें:
<script src="/scripts/asyntai-chatbot.js"></script>

वैकल्पिक: RenderSection के साथ पेज-विशिष्ट

यदि आप केवल विशिष्ट पृष्ठों पर चैटबॉट चाहते हैं:

अपने Master template में, </body> से पहले जोड़ें:
@RenderSection("footerScripts", required: false)
जिस विशिष्ट पेज टेम्पलेट में आप चैटबॉट चाहते हैं, वहाँ जोड़ें:
@section footerScripts { <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: इंस्टॉलेशन सत्यापित करें

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

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