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

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

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

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

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

<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: पेज कंपोनेंट का उपयोग करके कोड जोड़ें (अनुशंसित)

अनुशंसित विधि आपके AEM पेज कंपोनेंट के हेड सेक्शन में साइट-व्यापी इंस्टॉलेशन के लिए चैटबॉट कोड जोड़ना है:

अपने AEM Author इंस्टेंस में लॉग इन करें
CRXDE Lite पर नेविगेट करें (आमतौर पर http://your-aem-instance:4502/crx/de पर)
अपना पेज कंपोनेंट टेम्पलेट खोजें (आमतौर पर /apps/your-project/components/page के अंतर्गत)
head.html या headerlibs.html फ़ाइल खोजें या बनाएँ
इस फ़ाइल में अपना Asyntai एम्बेड कोड जोड़ें
शीर्ष मेनू में "सभी सहेजें" पर क्लिक करें
परिवर्तनों को अपने प्रकाशन इंस्टेंस में दोहराएँ

सुझाव: head.html फ़ाइल में कोड रखने से चैटबॉट उस टेम्पलेट का उपयोग करने वाले सभी पृष्ठों पर दिखाई देता है। यह साइट-व्यापी इंस्टॉलेशन के लिए सबसे साफ तरीका है।

वैकल्पिक विधि 1: क्लाइंट लाइब्रेरी (ClientLibs)

अधिक संरचित दृष्टिकोण के लिए, आप AEM की क्लाइंट लाइब्रेरी प्रणाली का उपयोग कर सकते हैं:

/apps/your-project/clientlibs के अंतर्गत एक नया क्लाइंट लाइब्रेरी फ़ोल्डर बनाएँ
cq:clientLibraryFolder नोड प्रकार सेट करें
अपनी JavaScript फ़ाइलों की सूची वाली js.txt फ़ाइल बनाएँ
इस फ़ोल्डर में एक JavaScript फ़ाइल में अपना Asyntai एम्बेड कोड जोड़ें
इसका उपयोग करके अपने पेज कंपोनेंट में क्लाइंट लाइब्रेरी शामिल करें:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

नोट: यह विधि मौजूदा ClientLib संरचना वाले प्रोजेक्ट के लिए अनुशंसित है और बड़े कार्यान्वयन के लिए बेहतर संगठन प्रदान करती है।

वैकल्पिक विधि 2: टैग प्रबंधन (Adobe Launch)

यदि आप Adobe Launch (पूर्व में DTM) या किसी अन्य टैग मैनेजर का उपयोग कर रहे हैं:

Adobe Experience Platform Launch में लॉग इन करें
अपनी प्रॉपर्टी पर नेविगेट करें
नियम पर जाएँ और एक नया नियम बनाएँ
इवेंट को "Page Bottom" या "DOM Ready" पर सेट करें
एक एक्शन जोड़ें: कस्टम कोड
अपना Asyntai एम्बेड कोड पेस्ट करें
लाइब्रेरी सहेजें और प्रकाशित करें

सुझाव: Adobe Launch का उपयोग तृतीय-पक्ष स्क्रिप्ट जोड़ने के लिए Adobe-अनुशंसित दृष्टिकोण है। यह बेहतर नियंत्रण, परीक्षण क्षमताएँ प्रदान करता है, और कोड डिप्लॉयमेंट की आवश्यकता नहीं होती।

वैकल्पिक विधि 3: एक्सपीरियंस फ्रैगमेंट

लचीले, लेखक-अनुकूल कार्यान्वयन के लिए:

AEM में एक्सपीरियंस फ्रैगमेंट पर नेविगेट करें
एक नया एक्सपीरियंस फ्रैगमेंट बनाएँ
एक टेक्स्ट कंपोनेंट या HTML कंपोनेंट जोड़ें
HTML सोर्स मोड पर स्विच करें
अपना Asyntai एम्बेड कोड पेस्ट करें
इस एक्सपीरियंस फ्रैगमेंट को अपने पेज टेम्पलेट फुटर में शामिल करें

महत्वपूर्ण: सुनिश्चित करें कि आपके पास टेम्पलेट और कंपोनेंट को संशोधित करने के लिए उचित AEM अनुमतियाँ हैं। AEM as a Cloud Service के लिए, परिवर्तनों को आपकी CI/CD पाइपलाइन से गुज़रना पड़ सकता है।

चरण 3: इंस्टॉलेशन सत्यापित करें

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

विजेट दिखाई नहीं दे रहा? JavaScript त्रुटियों के लिए अपना ब्राउज़र कंसोल (F12) जाँचें। सत्यापित करें कि कोड आपके प्रकाशन इंस्टेंस में ठीक से डिप्लॉय किया गया था। AEM as a Cloud Service के लिए, सुनिश्चित करें कि आपके परिवर्तन सफलतापूर्वक डिप्लॉयमेंट पाइपलाइन से गुज़रे।