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

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

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

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

Kirby एक फ्लैट-फ़ाइल PHP CMS है जो पुन: प्रयोज्य टेम्पलेट भागों के लिए स्निपेट का उपयोग करता है। अनुशंसित दृष्टिकोण चैटबॉट के लिए एक समर्पित स्निपेट बनाना है:

site/snippets/asyntai-widget.php पर एक नई स्निपेट फ़ाइल बनाएँ
फ़ाइल में अपना एम्बेड कोड पेस्ट करें:

<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> टैग से ठीक पहले अपनी मुख्य टेम्पलेट (जैसे, site/templates/default.php) या अपने लेआउट में स्निपेट शामिल करें:

<?php snippet('asyntai-widget') ?>
</body>
</html>

सुझाव: यदि आप साझा लेआउट या फुटर स्निपेट का उपयोग करते हैं, तो आप वहाँ स्निपेट कॉल जोड़ सकते हैं ताकि यह स्वचालित रूप से हर पृष्ठ पर दिखाई दे। उदाहरण के लिए, </body> से ठीक पहले इसे अपने फुटर स्निपेट में जोड़ें।

वैकल्पिक विधि 1: फुटर स्निपेट में जोड़ें

यदि आपकी Kirby साइट फुटर स्निपेट का उपयोग करती है, तो आप वहाँ सीधे एम्बेड कोड जोड़ सकते हैं:

site/snippets/footer.php खोलें (यदि मौजूद नहीं है तो बनाएँ)
क्लोजिंग </body> टैग से पहले एम्बेड कोड जोड़ें:

    <!-- Footer content -->
    <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>

सुनिश्चित करें कि आपकी टेम्पलेट में फुटर स्निपेट शामिल है:

<?php snippet('footer') ?>

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

वैकल्पिक विधि 2: Kirby प्लगइन का उपयोग करना

आप किसी भी टेम्पलेट को संशोधित किए बिना हर पृष्ठ में स्वचालित रूप से चैटबॉट स्क्रिप्ट इंजेक्ट करने के लिए एक Kirby प्लगइन बना सकते हैं:

site/plugins/asyntai/index.php पर प्लगइन डायरेक्टरी और फ़ाइल बनाएँ
स्क्रिप्ट को गतिशील रूप से इंजेक्ट करने के लिए निम्नलिखित कोड जोड़ें:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<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>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

सुझाव: प्लगइन दृष्टिकोण आदर्श है यदि आप किसी भी टेम्पलेट या स्निपेट फ़ाइल को संपादित किए बिना स्वचालित रूप से हर पृष्ठ पर चैटबॉट लोड करना चाहते हैं। यह आपके चैटबॉट एकीकरण को मॉड्यूलर और सक्षम या अक्षम करना आसान भी रखता है।

वैकल्पिक विधि 3: Kirby के js() हेल्पर का उपयोग करना

Kirby JavaScript फ़ाइलें लोड करने के लिए एक बिल्ट-इन js() हेल्पर प्रदान करता है। आप इसे अपनी टेम्पलेट या स्निपेट में उपयोग कर सकते हैं:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

या </body> से पहले अपनी टेम्पलेट PHP फ़ाइल में सीधे स्क्रिप्ट जोड़ें:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

    <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>

नोट: यदि आप js() हेल्पर का उपयोग करते हैं, तो सुनिश्चित करें कि यह चैटबॉट के सही लोडिंग के लिए आपकी टेम्पलेट के <body> अनुभाग के अंदर रखा गया है।

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

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

विजेट दिखाई नहीं दे रहा? सुनिश्चित करें कि आपने YOUR_WIDGET_ID को डैशबोर्ड से अपनी वास्तविक विजेट ID से बदला है। सत्यापित करें कि स्निपेट या प्लगइन फ़ाइल सही डायरेक्टरी में सहेजी गई है। यदि प्लगइन विधि का उपयोग कर रहे हैं, तो सुनिश्चित करें कि प्लगइन डायरेक्टरी संरचना site/plugins/asyntai/index.php है। अपना ब्राउज़र कैश साफ़ करें या इनकॉग्निटो मोड में परीक्षण करें। किसी भी त्रुटि के लिए अपने ब्राउज़र का डेवलपर कंसोल (F12) जाँचें।