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

Grav CMS के लिए चरण-दर-चरण मार्गदर्शिका

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

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

सबसे पहले, अपने 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>

नोट: ऊपर दिया गया कोड केवल एक उदाहरण है। आपको अपने डैशबोर्ड से अपना अद्वितीय एम्बेड कोड कॉपी करना होगा क्योंकि इसमें आपकी व्यक्तिगत विजेट ID होती है।

चरण 2: Grav थीम टेम्पलेट में जोड़ें (अनुशंसित)

अपनी Grav साइट के सभी पृष्ठों पर चैटबॉट जोड़ने का सबसे अच्छा तरीका अपनी थीम का बेस Twig टेम्पलेट संपादित करना है:

अपने Grav प्रोजेक्ट की user/themes/yourtheme/templates/ डायरेक्टरी पर नेविगेट करें और default.html.twig खोलें (या आपकी थीम द्वारा उपयोग किया जाने वाला बेस टेम्पलेट)
क्लोज़िंग </body> टैग से पहले अपना Asyntai एम्बेड कोड जोड़ें:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <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>
</html>

फ़ाइल सहेजें

सुझाव: Grav अपने टेम्पलेटिंग इंजन के रूप में Twig का उपयोग करता है। बेस टेम्पलेट आमतौर पर default.html.twig या आपकी थीम के अनुसार partials/base.html.twig होती है। सही फ़ाइल खोजने के लिए अपनी थीम की संरचना जाँचें जिसमें </body> क्लोज़िंग टैग है।

वैकल्पिक विधि 1: Grav एसेट मैनेजर का उपयोग करना

Grav का बिल्ट-इन एसेट मैनेजर Twig के माध्यम से JavaScript एसेट जोड़ने का एक साफ तरीका प्रदान करता है:

अपनी थीम का बेस Twig टेम्पलेट खोलें (जैसे, user/themes/yourtheme/templates/partials/base.html.twig)
JavaScript जोड़ने के लिए एसेट मैनेजर का उपयोग करें:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

या अपने बेस टेम्पलेट में गतिशील रूप से स्क्रिप्ट एलिमेंट बनाने के लिए इनलाइन JavaScript जोड़ें:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.body.appendChild(script);
})();
</script>
</body>
</html>

नोट: एसेट मैनेजर विधि JavaScript एसेट प्रबंधित करने के लिए Grav-अनुशंसित दृष्टिकोण है। यह एसेट पाइपलाइनिंग, ऑर्डरिंग, और ग्रुपिंग के लिए बिल्ट-इन समर्थन प्रदान करता है।

वैकल्पिक विधि 2: कस्टम JS प्लगइन का उपयोग करना

यदि आप थीम फ़ाइलों को संपादित किए बिना प्लगइन-आधारित दृष्टिकोण पसंद करते हैं:

Grav एडमिन पैनल या CLI के माध्यम से "Custom JS" प्लगइन इंस्टॉल करें:

bin/gpm install custom-js

एडमिन > प्लगइन > Custom JS पर जाएँ
एम्बेड स्क्रिप्ट कोड जोड़ें:

<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: चाइल्ड टेम्पलेट में ब्लॉक ओवरराइड का उपयोग करना

यदि आपकी Grav थीम Twig ब्लॉक इनहेरिटेंस का उपयोग करती है, तो आप चाइल्ड टेम्पलेट में बॉटम ब्लॉक को ओवरराइड कर सकते हैं:

{% block bottom %}
    {{ parent() }}
    <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>
{% endblock %}

एक चाइल्ड टेम्पलेट बनाएँ या खोलें जो आपकी थीम के बेस टेम्पलेट को विस्तारित करती है
ऊपर दिखाया गया ब्लॉक ओवरराइड जोड़ें
parent() कॉल यह सुनिश्चित करता है कि ब्लॉक में सभी मौजूदा सामग्री संरक्षित है

नोट: यह विधि Twig के टेम्पलेट इनहेरिटेंस सिस्टम का उपयोग करती है। सुनिश्चित करें कि ब्लॉक का नाम (जैसे, bottom) आपकी थीम के बेस टेम्पलेट में परिभाषित ब्लॉक से मेल खाता है। सामान्य ब्लॉक नामों में bottom, javascripts, या footer शामिल हैं।

वैकल्पिक विधि 4: Grav Custom Head प्लगइन का उपयोग करना

एक और प्लगइन-आधारित विकल्प Custom Head प्लगइन है:

CLI या एडमिन पैनल के माध्यम से custom-head प्लगइन इंस्टॉल करें:

bin/gpm install custom-head

एडमिन > प्लगइन > Custom Head पर जाएँ
प्लगइन कॉन्फ़िगरेशन में अपना 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>

कॉन्फ़िगरेशन सहेजें

सुझाव: Custom Head प्लगइन आपको थीम फ़ाइलों को छुए बिना अपनी साइट के हेड या बॉडी अनुभागों में कोड इंजेक्ट करने की अनुमति देता है। क्लोज़िंग </body> टैग से पहले स्क्रिप्ट डालने के लिए सही प्लेसमेंट विकल्प के लिए प्लगइन प्रलेखन जाँचें।

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

कोड जोड़ने के बाद, अपना Grav कैश साफ़ करें और इंस्टॉलेशन सत्यापित करें:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

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

विजेट दिखाई नहीं दे रहा? सुनिश्चित करें कि आपने bin/grav clearcache से या एडमिन पैनल से Grav कैश साफ़ किया। जाँचें कि आपने YOUR_WIDGET_ID को डैशबोर्ड से अपनी वास्तविक विजेट ID से बदला है। अपना ब्राउज़र कैश साफ़ करें या इनकॉग्निटो मोड में देखें। किसी भी JavaScript त्रुटि के लिए ब्राउज़र कंसोल (F12) खोलें। राइट-क्लिक करके और "पेज सोर्स देखें" चुनकर सत्यापित करें कि स्क्रिप्ट पृष्ठ स्रोत में मौजूद है।

दस्तावेज़ीकरण