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

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

अपनी SilverStripe साइट पर चैटबॉट जोड़ने का सबसे सरल तरीका अपनी थीम की मुख्य टेम्पलेट फ़ाइल को सीधे संपादित करना है:

अपनी थीम की टेम्पलेट फ़ाइल खोलें (जैसे, themes/yourtheme/templates/Page.ss)
क्लोजिंग </body> टैग से ठीक पहले एम्बेड कोड जोड़ें:

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

फ़ाइल सहेजें और अपने साइट URL के अंत में ?flush=1 जोड़कर SilverStripe कैश को फ्लश करें

सुझाव: SilverStripe टेम्पलेट इनहेरिटेंस सिस्टम के साथ .ss टेम्पलेट फ़ाइलों का उपयोग करता है। स्क्रिप्ट को अपने बेस Page.ss टेम्पलेट में रखने से यह सुनिश्चित होता है कि चैटबॉट आपकी साइट के हर पेज पर दिखाई दे। यदि आपकी थीम Includes फ़ोल्डर का उपयोग करती है, तो आप स्क्रिप्ट को एक साझा इंक्लूड फ़ाइल में भी रख सकते हैं।

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

SilverStripe प्रोग्रामेटिक रूप से जावास्क्रिप्ट और CSS डिपेंडेंसी को प्रबंधित करने के लिए एक Requirements क्लास प्रदान करता है। डेवलपर्स के लिए यह अनुशंसित दृष्टिकोण है:

app/src/PageController.php (या अपनी पेज कंट्रोलर फ़ाइल) खोलें
init() मेथड में, विजेट को डायनामिक रूप से लोड करने के लिए Requirements::customScript() का उपयोग करें:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            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.head.appendChild(script);
        JS);
    }
}

फ़ाइल सहेजें और yourdomain.com?flush=1 पर जाकर कैश फ्लश करें

नोट: Requirements क्लास स्क्रिप्ट और स्टाइलशीट को शामिल करने का SilverStripe-मानक तरीका है। Requirements::customScript() का उपयोग इनलाइन जावास्क्रिप्ट आउटपुट करता है। यह विधि सुनिश्चित करती है कि विजेट आपके PageController द्वारा नियंत्रित प्रत्येक पेज पर लोड हो।

वैकल्पिक विधि 2: टेम्पलेट में Requirements का उपयोग

आप अपनी .ss टेम्पलेट में सीधे जावास्क्रिप्ट फ़ाइलों की आवश्यकता के लिए SilverStripe के टेम्पलेट सिंटैक्स का भी उपयोग कर सकते हैं:

अपनी थीम की टेम्पलेट फ़ाइल खोलें (जैसे, themes/yourtheme/templates/Page.ss)
टेम्पलेट के नीचे, </body> से पहले निम्नलिखित जोड़ें:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

सुझाव: <% require %> सिंटैक्स एसेट्स को शामिल करने का SilverStripe का टेम्पलेट-स्तरीय तरीका है। ध्यान दें कि यह विधि मूल रूप से स्क्रिप्ट टैग में कस्टम डेटा एट्रिब्यूट जोड़ने का समर्थन नहीं करती है, इसलिए हम विजेट आईडी सेट करने के लिए एक छोटा इनिशियलाइजेशन स्निपेट जोड़ते हैं।

वैकल्पिक विधि 3: SilverStripe कॉन्फ़िग का उपयोग (YAML)

कॉन्फ़िगरेशन-संचालित दृष्टिकोण के लिए, आप ग्लोबल आवश्यकताओं को जोड़ने के लिए SilverStripe के YAML कॉन्फ़िगरेशन का उपयोग कर सकते हैं:

app/_config/app.yml फ़ाइल खोलें या बनाएँ
कस्टम एक्सटेंशन या कंट्रोलर सेटअप के माध्यम से विजेट को शामिल करने के लिए कॉन्फ़िगरेशन जोड़ें:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

एक्सटेंशन फ़ाइल app/src/Extensions/AsyntaiChatbotExtension.php बनाएँ:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            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.head.appendChild(script);
        ");
    }
}

app/_config/app.yml में अपने PageController पर एक्सटेंशन लागू करें:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

कॉन्फ़िगरेशन कैश को पुनर्निर्मित करने के लिए ?flush=1 चलाएँ

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

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

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

विजेट दिखाई नहीं दे रहा? सुनिश्चित करें कि आपने अपने साइट URL के अंत में ?flush=1 जोड़कर कैश फ्लश किया है। जांचें कि आपने YOUR_WIDGET_ID को डैशबोर्ड से अपनी वास्तविक विजेट आईडी से बदल दिया है। अपने ब्राउज़र का कैश साफ़ करें या इनकॉग्निटो मोड में देखें। किसी भी जावास्क्रिप्ट त्रुटियों की जांच के लिए ब्राउज़र कंसोल (F12) खोलें। यदि Requirements क्लास का उपयोग कर रहे हैं, तो सत्यापित करें कि आपके PageController का init() मेथड सही ढंग से कॉल किया जा रहा है।