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

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

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

चरण 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: FreeMarker टेम्पलेट में जोड़ें (अनुशंसित)

CrafterCMS पृष्ठ रेंडर करने के लिए FreeMarker (.ftl) टेम्पलेट का उपयोग करता है। सभी पृष्ठों पर चैटबॉट जोड़ने का सबसे आसान तरीका अपना मुख्य पेज टेम्पलेट संपादित करना है:

Crafter Studio में, साइट डैशबोर्ड > सामग्री प्रकार पर जाएँ या टेम्पलेट पर नेविगेट करें
अपना मुख्य पेज टेम्पलेट खोलें (जैसे, /templates/web/pages/home.ftl या बेस लेआउट)
क्लोज़िंग </body> टैग खोजें
</body> टैग से ठीक पहले अपना 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> </body>
फ़ाइल सहेजें और Crafter Studio के माध्यम से प्रकाशित करें

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

वैकल्पिक विधि 1: Crafter टेम्पलेट कंपोनेंट का उपयोग करना

बेहतर संगठन के लिए, चैटबॉट विजेट के लिए एक समर्पित कंपोनेंट टेम्पलेट बनाएँ:

Crafter Studio में, /templates/web/components/asyntai-widget.ftl पर एक नई टेम्पलेट फ़ाइल बनाएँ
कंपोनेंट टेम्पलेट में निम्नलिखित सामग्री जोड़ें:
 <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>
FreeMarker इनक्लूड निर्देश का उपयोग करके इसे अपने मुख्य लेआउट टेम्पलेट में शामिल करें:
<#include "/templates/web/components/asyntai-widget.ftl" />
वैकल्पिक रूप से, यदि Crafter के कंपोनेंट रेंडरिंग सिस्टम का उपयोग कर रहे हैं, तो उपयोग करें:
<@renderComponent component=contentModel.asyntaiWidget />
दोनों फ़ाइलें सहेजें और Crafter Studio के माध्यम से प्रकाशित करें

नोट: एक अलग कंपोनेंट टेम्पलेट का उपयोग करने से एक ही इनक्लूड लाइन को कमेंट आउट करके आपकी पूरी साइट पर चैटबॉट को सक्षम या अक्षम करना आसान हो जाता है।

वैकल्पिक विधि 2: Crafter के Head/Scripts कॉन्फ़िगरेशन का उपयोग करना

CrafterCMS आपको साइट कॉन्फ़िगरेशन के माध्यम से वैश्विक रूप से स्क्रिप्ट इंजेक्ट करने की अनुमति देता है:

Crafter Studio में, साइट कॉन्फ़िग > कॉन्फ़िगरेशन पर नेविगेट करें
Engine साइट कॉन्फ़िगरेशन फ़ाइल (site-config.xml) खोलें
एक कस्टम स्क्रिप्ट इंजेक्शन कॉन्फ़िगरेशन जोड़ें:
<site>   <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
वैकल्पिक रूप से, साइट कॉन्फ़िगरेशन से पढ़ने और गतिशील रूप से स्क्रिप्ट इंजेक्ट करने के लिए अपना बेस FreeMarker लेआउट संपादित करें:
<#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
कॉन्फ़िगरेशन परिवर्तन सहेजें और प्रकाशित करें

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

वैकल्पिक विधि 3: Groovy कंट्रोलर का उपयोग करना

CrafterCMS सर्वर-साइड लॉजिक के लिए Groovy स्क्रिप्ट का समर्थन करता है। आप चैटबॉट स्क्रिप्ट को गतिशील रूप से जोड़ने के लिए कंट्रोलर का उपयोग कर सकते हैं:

/scripts/pages/ में एक Groovy स्क्रिप्ट बनाएँ (जैसे, /scripts/pages/home.groovy या आपका साइट-व्यापी कंट्रोलर)
टेम्पलेट मॉडल में स्क्रिप्ट URL इंजेक्ट करने के लिए निम्नलिखित कोड जोड़ें:
// /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
फिर अपने FreeMarker टेम्पलेट में मॉडल चरों का संदर्भ दें:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Groovy स्क्रिप्ट और टेम्पलेट फ़ाइल दोनों सहेजें
Crafter Studio के माध्यम से परिवर्तन प्रकाशित करें

नोट: Groovy कंट्रोलर दृष्टिकोण तब उपयोगी है जब आपको सशर्त लॉजिक की आवश्यकता होती है (जैसे, केवल कुछ उपयोगकर्ता भूमिकाओं या पृष्ठ प्रकारों के लिए चैटबॉट सक्षम करना) या जब आप बाहरी स्रोतों से कॉन्फ़िगरेशन मान प्राप्त करना चाहते हैं।

चरण 3: प्रकाशित करें और सत्यापित करें

अपने परिवर्तन करने के बाद, उन्हें Crafter Studio के माध्यम से प्रकाशित करें:

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

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

टेम्पलेट स्थान: CrafterCMS टेम्पलेट स्थान आपकी प्रोजेक्ट संरचना के अनुसार भिन्न हो सकते हैं। सामान्य स्थानों में पेज टेम्पलेट के लिए /templates/web/pages/, कंपोनेंट टेम्पलेट के लिए /templates/web/components/, और लेआउट टेम्पलेट के लिए /templates/web/ शामिल हैं। </body> टैग कहाँ परिभाषित है यह खोजने के लिए अपने मौजूदा टेम्पलेट जाँचें।