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

Hugo स्टैटिक साइट जनरेटर के लिए चरण-दर-चरण मार्गदर्शिका

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

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

सबसे पहले, अपने Asyntai डैशबोर्ड पर जाएँ और "एम्बेड कोड" अनुभाग तक स्क्रॉल करें। अपना अद्वितीय एम्बेड कोड कॉपी करें जो इस तरह दिखेगा:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

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

अपनी Hugo साइट के सभी पृष्ठों पर चैटबॉट जोड़ने का सबसे अच्छा तरीका एक पार्शियल बनाना है:

अपने Hugo प्रोजेक्ट की layouts/partials/ डायरेक्टरी पर नेविगेट करें
asyntai-widget.html नाम की एक नई फ़ाइल बनाएँ
इस फ़ाइल में अपना Asyntai एम्बेड कोड पेस्ट करें:

<!-- layouts/partials/asyntai-widget.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

अपनी थीम की baseof.html फ़ाइल खोलें (आमतौर पर layouts/_default/baseof.html में)
क्लोजिंग </body> टैग से पहले पार्शियल जोड़ें:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

फ़ाइल सहेजें और अपनी Hugo साइट पुनः बनाएँ

सुझाव: पार्शियल का उपयोग करना पुन: प्रयोज्य कंपोनेंट शामिल करने का Hugo-अनुशंसित तरीका है। यह विधि सुनिश्चित करती है कि चैटबॉट baseof.html टेम्पलेट का उपयोग करने वाले हर पृष्ठ पर दिखाई दे, जो आमतौर पर आपकी साइट के सभी पृष्ठ होते हैं।

वैकल्पिक विधि 1: हेड पार्शियल में जोड़ें

यदि आपकी थीम में हेड पार्शियल है, तो आप वहाँ कोड जोड़ सकते हैं:

अपनी थीम का हेड पार्शियल खोजें (आमतौर पर layouts/partials/head.html)
यदि यह मौजूद नहीं है, तो अपने प्रोजेक्ट रूट में layouts/partials/head.html बनाएँ
इस फ़ाइल में अपना Asyntai एम्बेड कोड जोड़ें:

<!-- layouts/partials/head.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

सुनिश्चित करें कि आपकी baseof.html में यह पार्शियल <head> अनुभाग में शामिल है:

<head>
  {{ partial "head.html" . }}
</head>

नोट: यदि आपकी थीम में पहले से मौजूदा सामग्री के साथ head.html पार्शियल है, तो बस अपना Asyntai कोड इसमें जोड़ें। मौजूदा सामग्री को न बदलें।

वैकल्पिक विधि 2: कस्टम JavaScript के साथ स्टैटिक फ़ोल्डर

Hugo के स्टैटिक फ़ोल्डर का उपयोग करते हुए अधिक मॉड्यूलर दृष्टिकोण के लिए:

अपने Hugo प्रोजेक्ट की static/js/ डायरेक्टरी पर नेविगेट करें
यदि डायरेक्टरी मौजूद नहीं है तो इसे बनाएँ
asyntai-loader.js नाम की एक नई फ़ाइल बनाएँ
विजेट लोड करने के लिए निम्नलिखित कोड जोड़ें:

// static/js/asyntai-loader.js
(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.head.appendChild(script);
})();

अपनी baseof.html या फुटर पार्शियल में </body> से पहले इस फ़ाइल का संदर्भ दें:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

सुझाव: static/ डायरेक्टरी में फ़ाइलें आपकी प्रकाशित साइट के रूट में यथावत कॉपी की जाती हैं। relURL फ़ंक्शन आपके डिप्लॉयमेंट के लिए सही सापेक्ष पथ जनरेट करता है।

वैकल्पिक विधि 3: Hugo कॉन्फ़िगरेशन (config.toml/yaml)

कुछ Hugo थीम के लिए जो कॉन्फ़िगरेशन के माध्यम से कस्टम स्क्रिप्ट का समर्थन करती हैं:

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

नोट: यह विधि केवल तभी काम करती है जब आपकी थीम customJS पैरामीटर का समर्थन करती है। अपनी थीम का प्रलेखन जाँचें। आपको थीम कस्टमाइज़ेशन के माध्यम से data-asyntai-id विशेषता भी जोड़नी पड़ सकती है।

वैकल्पिक विधि 4: फ्रंट मैटर (पृष्ठ-विशिष्ट)

केवल विशिष्ट पृष्ठों पर चैटबॉट जोड़ने के लिए:

अपने पृष्ठ के फ्रंट मैटर में एक कस्टम पैरामीटर जोड़ें:

---
title: "My Page"
asyntaiWidget: true
---

अपनी baseof.html या पार्शियल में, सशर्त लॉजिक जोड़ें:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

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

वैकल्पिक विधि 5: थीम लेआउट ओवरराइड करें

थीम फ़ाइलों को संशोधित किए बिना अपनी थीम का लेआउट ओवरराइड करने के लिए:

थीम की baseof.html को themes/your-theme/layouts/_default/ से कॉपी करें
इसे अपने प्रोजेक्ट की layouts/_default/baseof.html में पेस्ट करें
क्लोज़िंग </body> टैग से पहले अपना Asyntai एम्बेड कोड जोड़ें
अपनी साइट सहेजें और पुनः बनाएँ

महत्वपूर्ण: जब आप थीम फ़ाइलें ओवरराइड करते हैं, तो थीम अपडेट होने पर आपको उन फ़ाइलों के अपडेट स्वचालित रूप से नहीं मिलेंगे। यह विधि आपको पूर्ण नियंत्रण देती है लेकिन अधिक रखरखाव की आवश्यकता होती है। आसान थीम अपडेट के लिए इसके बजाय पार्शियल का उपयोग करने पर विचार करें।

चरण 3: बनाएँ और डिप्लॉय करें

कोड जोड़ने के बाद, अपनी Hugo साइट बनाएँ:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

जनरेट की गई साइट public/ डायरेक्टरी में होगी
इस डायरेक्टरी को अपने होस्टिंग प्लेटफ़ॉर्म (Netlify, Vercel, GitHub Pages, आदि) पर डिप्लॉय करें

सुझाव: विकास के दौरान, http://localhost:1313 पर अपनी साइट का स्थानीय रूप से पूर्वावलोकन करने के लिए hugo server का उपयोग करें। चैटबॉट सभी पृष्ठों पर नीचे दाएँ कोने में दिखाई देना चाहिए।

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

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

विजेट दिखाई नहीं दे रहा? hugo कमांड से परिवर्तन करने के बाद सुनिश्चित करें कि आपने अपनी साइट पुनः बनाई है। जाँचें कि आपने YOUR_WIDGET_ID को डैशबोर्ड से अपनी वास्तविक विजेट ID से बदला है। अपना ब्राउज़र कैश साफ़ करें या इनकॉग्निटो मोड में देखें। यदि CDN का उपयोग कर रहे हैं, तो आपको कैश अमान्य करने की आवश्यकता हो सकती है। किसी भी JavaScript त्रुटि के लिए ब्राउज़र कंसोल (F12) खोलें।

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