Grav में Asyntai AI चैटबॉट कैसे जोड़ें
Grav CMS के लिए चरण-दर-चरण मार्गदर्शिका
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Docusaurus
Hugo
Kentico
Volusion
Craft CMS
Contentful
Strapi
Joomla
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Statamic
Umbraco
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: Grav थीम टेम्पलेट में जोड़ें (अनुशंसित)
अपनी Grav साइट के सभी पृष्ठों पर चैटबॉट जोड़ने का सबसे अच्छा तरीका अपनी थीम का बेस Twig टेम्पलेट संपादित करना है:
- अपने Grav प्रोजेक्ट की user/themes/yourtheme/templates/ डायरेक्टरी पर नेविगेट करें और default.html.twig खोलें (या आपकी थीम द्वारा उपयोग किया जाने वाला बेस टेम्पलेट)
- क्लोज़िंग </body> टैग से पहले अपना Asyntai एम्बेड कोड जोड़ें:
<!-- user/themes/yourtheme/templates/default.html.twig -->
...
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- प्लगइन कॉन्फ़िगरेशन सहेजें
सुझाव: स्क्रिप्ट इंजेक्ट करने के लिए प्लगइन का उपयोग करने का मतलब है कि आपको किसी भी थीम फ़ाइल को संशोधित करने की आवश्यकता नहीं है। इससे अपने चैटबॉट एकीकरण को खोए बिना थीम बदलना या अपडेट करना आसान हो जाता है।
वैकल्पिक विधि 3: चाइल्ड टेम्पलेट में ब्लॉक ओवरराइड का उपयोग करना
यदि आपकी Grav थीम Twig ब्लॉक इनहेरिटेंस का उपयोग करती है, तो आप चाइल्ड टेम्पलेट में बॉटम ब्लॉक को ओवरराइड कर सकते हैं:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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) खोलें। राइट-क्लिक करके और "पेज सोर्स देखें" चुनकर सत्यापित करें कि स्क्रिप्ट पृष्ठ स्रोत में मौजूद है।