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

Statamic CMS वेबसाइटों के लिए चरण-दर-चरण गाइड

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

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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: इंस्टॉलेशन विधि चुनें

Statamic Antlers और Blade दोनों टेम्प्लेटिंग का समर्थन करता है। आप जिस टेम्प्लेटिंग इंजन का उपयोग कर रहे हैं उसके आधार पर विधि चुनें:

विधि 1: Antlers लेआउट (अनुशंसित)

चैटबॉट जोड़ने का सबसे आसान तरीका इसे अपनी मुख्य लेआउट फ़ाइल में शामिल करना है। Statamic अपने डिफ़ॉल्ट टेम्प्लेटिंग इंजन के रूप में Antlers का उपयोग करता है।

अपने Statamic प्रोजेक्ट की resources/views निर्देशिका पर नेविगेट करें
अपनी लेआउट फ़ाइल खोलें (आमतौर पर layout.antlers.html)
क्लोज़िंग </body> टैग खोजें
</body> टैग से ठीक पहले अपना Asyntai एम्बेड कोड पेस्ट करें
फ़ाइल सहेजें

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

  <!-- Asyntai Chatbot -->
  <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>

सुझाव: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

विधि 2: Blade लेआउट

यदि आप Antlers के बजाय Blade टेम्पलेट का उपयोग कर रहे हैं, तो इन चरणों का पालन करें:

अपने Statamic प्रोजेक्ट की resources/views निर्देशिका पर नेविगेट करें
अपनी Blade लेआउट फ़ाइल खोलें (उदा., layout.blade.php)
क्लोज़िंग </body> टैग खोजें
</body> टैग से ठीक पहले अपना Asyntai एम्बेड कोड पेस्ट करें
फ़ाइल सहेजें

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

  <!-- Asyntai Chatbot -->
  <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>

नोट: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

विधि 3: पार्शियल का उपयोग

बेहतर संगठन के लिए, आप चैटबॉट के लिए एक पुन: प्रयोज्य पार्शियल बना सकते हैं:

चरण 1: पार्शियल बनाएँ

resources/views/partials/_chatbot.antlers.html पर एक नई फ़ाइल बनाएँ
इस फ़ाइल में अपना 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>

चरण 2: अपने लेआउट में शामिल करें

अपनी लेआउट फ़ाइल खोलें (layout.antlers.html)
</body> से पहले पार्शियल टैग जोड़ें:
{{ partial:chatbot }} </body>

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

एकाधिक लेआउट का उपयोग

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

आप कई तरीकों से सेट कर सकते हैं कि कोई पेज कौन सा लेआउट उपयोग करे:

प्रविष्टि में: फ्रंट मैटर में layout: your_layout जोड़ें
संग्रह में: अपने संग्रह की कॉन्फ़िगरेशन YAML फ़ाइल में एक डिफ़ॉल्ट लेआउट सेट करें
ब्लूप्रिंट में: एक लेआउट फ़ील्ड जोड़ें जिसे संपादक चुन सकें

Statamic स्टार्टर किट के लिए

यदि आप Statamic स्टार्टर किट का उपयोग कर रहे हैं, तो लेआउट स्थान भिन्न हो सकता है। सामान्य स्थानों में शामिल हैं:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html के साथ resources/views/snippets/ में पार्शियल

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

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

कोड जोड़ने के बाद, यह सुनिश्चित करने के लिए कि परिवर्तन प्रभावी हों, अपना Statamic कैश साफ़ करें:

php artisan cache:clear
php please stache:refresh

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

विजेट दिखाई नहीं दे रहा? सुनिश्चित करें कि आपने Laravel का कैश और Statamic का Stache दोनों साफ़ कर दिए हैं। यदि आप स्टैटिक कैशिंग का उपयोग कर रहे हैं, तो php please static:clear भी चलाएँ। किसी भी जावास्क्रिप्ट त्रुटियों के लिए अपने ब्राउज़र का कंसोल (F12) देखें।

महत्वपूर्ण: यदि आप Statamic के स्टैटिक साइट जनरेटर (ssg) का उपयोग कर रहे हैं, तो चैटबॉट स्क्रिप्ट जोड़ने के बाद php please ssg:generate चलाकर अपनी स्टैटिक फ़ाइलों को पुन: उत्पन्न करना सुनिश्चित करें।

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