How to build a chatbot interface

Jan 26, 2026
कैसे करना है

2000 के दशक के मध्य में, आभासी एजेंटों और ग्राहक सेवा चैटबॉट्स को बहुत सारे अनुकरण प्राप्त हुए, भले ही वे बहुत बातचीत नहीं कर रहे थे, और हुड के तहत वे केवल वेब सर्वर के साथ डेटा एक्सचेंजों से बना थे।

आजकल, भले ही 'कमजोर एआई' के उदाहरणों की एक बड़ी संख्या मौजूद है (सिरी, एलेक्सा, वेब सर्च इंजन, स्वचालित अनुवादक और चेहरे की मान्यता सहित) और अन्य विषयों जैसे प्रतिक्रियात्मक वेब डिज़ाइन लाइटलाइट को हॉगिंग कर रहे हैं, चैटबॉट अभी भी हलचल पैदा कर रहे हैं। बड़ी कंपनियों से प्रमुख निवेश के साथ, भविष्य के वार्तालाप इंटरफेस को हैक करने के लिए बहुत सारे अवसर हैं।

    [2 9] चैटबॉट अनुभव कैसे डिजाइन करें

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

अनिवार्य रूप से हम बढ़ रहे हैं प्रयोगकर्ता का अनुभव वेब ब्राउज़र पॉइंट-एंड-क्लिक या मोबाइल इशारे के बजाय, एक विशेषज्ञ या मित्र के साथ बातचीत करने की तरह, अधिक प्राकृतिक महसूस करने के लिए। इसका उद्देश्य यह है कि सहानुभूतिपूर्ण, प्रासंगिक प्रतिक्रियाएं प्रदान करके, यह तकनीक सीधे लोगों के जीवन में एम्बेडेड हो जाएगी।

एक सेवा डिजाइन अभ्यास में वास्तविक परियोजना-सेवन आवेदन के आधार पर, चैटबॉट को डिजाइन और निर्माण करने के व्यावहारिक तरीके को खोजने के लिए नीचे दिए गए वीडियो को देखें या पढ़ें।

01. एक व्यक्तित्व निर्धारित करें

[5 9]

यह सुनिश्चित करना महत्वपूर्ण है कि चैटबॉट का व्यक्तित्व उस कंपनी को दर्शाता है जो इसका प्रतिनिधित्व कर रहा है

चूंकि यह अभ्यास वैश्विक स्तर पर 110,000 से अधिक सदस्यों की सेवा करता है, लक्ष्य एक त्वरित, सुविधाजनक और प्राकृतिक इंटरफ़ेस प्रदान करना था जिसके माध्यम से आंतरिक हितधारक भ्रमित रूपों को भरने के बजाय प्रभावी डिजिटल सेवाओं का अनुरोध कर सकते थे।

पहला कदम चैटबॉट के व्यक्तित्व को स्थापित करना था, क्योंकि यह सेवा डिजाइन टीम की आवाज़ को अपने हितधारकों को दर्शाता है। हमने ऑर्गन वाल्टर के मौलिक काम पर बनाया डिजाइन व्यक्तित्व । इसने हमारी टीम को बॉट के व्यक्तित्व लक्षणों को विकसित करने में काफी मदद की, जो तब ग्रीटिंग्स, त्रुटियों और उपयोगकर्ता प्रतिक्रिया के लिए संदेशों को निर्धारित किया।

यह एक नाजुक चरण है, क्योंकि यह प्रभावित करता है कि संगठन को कैसे माना जाता है। यह सुनिश्चित करने के लिए कि हमारे पास जितना संभव हो सके उतनी जानकारी थी, हमने बॉट के साथ संलग्न होने पर उचित व्यक्तित्व, रंग, टाइपोग्राफी, इमेजरी और उपयोगकर्ता के प्रवाह को नाखून करने के लिए तुरंत हितधारक कार्यशालाएं स्थापित की।

कानूनी वकील की मांग करने सहित सभी आवश्यक अनुमोदन प्राप्त करने के बाद - हमने पुरातन अनुरोध फॉर्मों को वापस और आगे के प्रश्नों की एक श्रृंखला में परिवर्तित करने के लिए निर्धारित किया जो हितधारकों और हमारी डिजाइन सेवा टीम के प्रतिनिधि के बीच बातचीत की नकल करते थे।

02. RiveScript का उपयोग करें

[8 9]

यह सरल स्क्रिप्टिंग भाषा एक चैटबॉट पीओसी को डिजाइन और निर्माण करने के लिए आवश्यक सब कुछ प्रदान करती है

हम जानते थे कि हम प्रसंस्करण भाग के लिए एआई मार्कअप भाषा में बहुत गहरा नहीं होना चाहते थे - हमें अनुभव को कूदने के लिए पर्याप्त आवश्यकता है।

RiveScript एक साधारण चैटबॉट एपीआई है जो हमारी आवश्यकताओं के लिए सीखने और पर्याप्त रूप से आसान है। कुछ दिनों के भीतर हमारे पास बॉट से एक परियोजना अनुरोध का सेवन करने के लिए तर्क नीचे था, और इसे सत्यापित करने और वर्गीकृत करने के लिए पर्याप्त व्यावसायिक तर्क के साथ इसे पार्स करें ताकि इसे जेसन रेस्ट सर्विसेज के माध्यम से उचित आंतरिक परियोजना टास्किंग कतार में भेजा जा सके।

इस मूल चैटबॉट को काम करने के लिए, सिर के लिए Rivscript रेपो , इसे क्लोन करें और सभी मानक नोड निर्भरताओं को स्थापित करें। रेपो में आप उन इंटरैक्शन का स्वाद भी प्राप्त कर सकते हैं जिन्हें आप विभिन्न उदाहरण स्निपेट के साथ जोड़ सकते हैं।

इसके बाद, वेब-क्लाइंट फ़ोल्डर चलाएं, जो मूल ग्रंट सर्वर चलाकर बॉट को वेब पेज में बदल देता है। इस बिंदु पर आप अपनी आवश्यकताओं के अनुरूप अनुभव को बढ़ा सकते हैं।

03. अपने बॉट का मस्तिष्क उत्पन्न करें

अगला कदम हमारे बॉट के 'मस्तिष्क' उत्पन्न करना है। यह .rive एक्सटेंशन के साथ फ़ाइलों में निर्दिष्ट है, और शुक्र है कि राइसस्क्रिप्ट पहले से ही बॉक्स के बाहर मूल इंटरैक्शन के साथ आता है (उदाहरण के लिए, 'आपका नाम क्या है?', 'आप कितने साल के हैं?' और 'क्या है? पसंदीदा रंग?')।

जब आप उचित नोड कमांड का उपयोग करके वेब-क्लाइंट ऐप शुरू करते हैं, तो HTML फ़ाइल को इन्हें लोड करने का निर्देश दिया जाता है .Rive फ़ाइलें।

इसके बाद हमें अपने चैटबॉट के मस्तिष्क का हिस्सा उत्पन्न करने की आवश्यकता है जो परियोजना अनुरोधों से निपटेंगे। हमारा मुख्य लक्ष्य एक नियमित वार्तालाप में प्रोजेक्ट टास्किंग सेवन प्रश्नों के चयन को परिवर्तित करना है।

तो, उदाहरण के लिए:

    [2 9] हैलो, हम कैसे मदद कर सकते हैं?
[2 9] बढ़िया, हमें कितनी जल्दी शुरू करने की आवश्यकता है? [2 9] क्या आप मुझे अपने बजट का एक मोटा विचार दे सकते हैं? [2 9] मुझे अपनी परियोजना के बारे में और बताएं ... [2 9] आपको हमारे बारे में कैसे पता चला?

एक विशिष्ट सुलभ वेब फॉर्म इस तरह दिखेगा: 

 & lt; फॉर्म क्रिया = "" & gt;
& lt; फ़ील्ड्स और जीटी;
& lt; किंवदंती और जीटी; अनुरोध प्रकार: & lt; / किंवदंती और जीटी;
& lt; इनपुट आईडी = "विकल्प-वन" टाइप = "रेडियो" नाम = "अनुरोध-प्रकार" मान = "विकल्प-वन" & gt;
& lt; लेबल के लिए = "विकल्प-वन" & gt; विकल्प 1 & lt; / लेबल & gt; & lt; br & gt;
& lt; इनपुट आईडी = "विकल्प-दो" प्रकार = "रेडियो" नाम = "अनुरोध-प्रकार" मान = "विकल्प-दो" & gt;
& lt; लेबल के लिए = "विकल्प-दो" & gt; विकल्प 2 & lt; / लेबल & gt; & lt; br & gt;
& lt; इनपुट आईडी = "विकल्प-तीन" प्रकार = "रेडियो" नाम = "अनुरोध-प्रकार" मान = "विकल्प-तीन" & gt;
& lt; लेबल के लिए = "विकल्प-तीन" & gt; विकल्प 3 & lt; / लेबल & gt; & lt; br & gt;
& lt; / फ़ील्ड्स और जीटी;
& lt; फ़ील्ड्स और जीटी;
& lt; किंवदंती और जीटी; समयरेखा: & lt; / किंवदंती और जीटी;
& lt; इनपुट आईडी = "एक महीने" प्रकार = "रेडियो" नाम = "अनुरोध-समयरेखा" मान = "एक महीने" & gt;
& lt; लेबल के लिए = "एक महीने" & gt; 1 माह & lt; / लेबल & gt; & lt; br & gt;
& lt; इनपुट आईडी = "एक-तीन महीने" प्रकार = "रेडियो" नाम = "अनुरोध- समयरेखा" मान = "एक-तीन महीने" & gt;
& lt; लेबल के लिए = "एक महीने" & gt; 1-3 महीने & lt; / लेबल & gt; & lt; br & gt;
& lt; इनपुट आईडी = "चार-प्लस-महीने" प्रकार = "रेडियो" नाम = "अनुरोध- समयरेखा" मान = "चार-प्लस-महीने" & gt;
& lt; लेबल के लिए = "चार-प्लस-महीने" & gt; 4+ महीने & lt; / लेबल & gt; & lt; br & gt; & lt; / फ़ील्ड्स और जीटी;
& lt; br & gt;
& lt; लेबल के लिए = "अनुरोध-बजट" & gt; बजट जानकारी & lt; / लेबल & gt; & lt; br & gt; & lt; textarea id = "अनुरोध-बजट" नाम = "अनुरोध-बजट-पाठ" पंक्तियों = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
& lt; लेबल के लिए = "अनुरोध-विवरण" & gt; परियोजना विवरण & lt; / लेबल & gt; & lt; br & gt;
& lt; textarea id = "अनुरोध-विवरण" नाम = "अनुरोध-विवरण-पाठ" पंक्तियां = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
& lt; लेबल के लिए = "अनुरोध-संदर्भ" & gt; संदर्भ & lt; / लेबल & gt; & lt; br & gt; & lt; textarea id = "अनुरोध-संदर्भ" नाम = "अनुरोध-संदर्भ- पाठ" पंक्तियों = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
 & lt; इनपुट प्रकार = "सबमिट करें" मान = "सबमिट करें" & gt;
& lt; / फॉर्म & gt; [14 9]
  

   वेब रूपों के साथ, हम कुछ पैटर्न से बहुत परिचित हैं: आप सबमिट बटन पर क्लिक करते हैं, सभी फॉर्म डेटा किसी अन्य पृष्ठ पर भेजा जाता है जहां अनुरोध संसाधित होता है, और फिर सबसे अधिक संभावना एक गाल का धन्यवाद पृष्ठ पॉप अप होता है।
  

  

   चैटबॉट्स के साथ, हम अनुरोध सबमिट करने की बातचीत करने में सक्षम हैं, और इसे अधिक सार्थक बनाते हैं।
  

  

   04. एक आवाज डिजाइन
  

  

   इस फॉर्म को राइवस्क्रिप्ट के चैटबॉट वेब क्लाइंट में एक वार्तालाप उपयोगकर्ता इंटरफ़ेस में कनवर्ट करने के लिए, हमें सूचना आर्किटेक्चर को कठोर से तरल पदार्थ में परिवर्तित करने की आवश्यकता है; या यूआई स्ट्रिंग्स में फील्ड लेबल।
  

  

   आइए कुछ सुलभ फ़ील्ड लेबल पर विचार करें, और उनके संबंधित प्रश्न टोन:
  

  
    
   [2 9]
    
     निवेदन:
    
    हम आपकी सहायता किस तरह से कर सकते है? पक्का नहीं? क्या आपको बुरा लगता है अगर मैं कुछ सवाल पूछता हूं?
[2 9] समयरेखा: हमें कितनी जल्दी शुरू करने की आवश्यकता है? [2 9] बजट जानकारी: क्या आप मुझे अपने बजट का एक मोटा विचार दे सकते हैं? [2 9] परियोजना विवरण: ठीक है, क्या आप मुझे हल करने के लिए समस्या का सारांश बता सकते हैं? [2 9] संदर्भ: इसके अलावा, किसने हमें संदर्भित किया?

इसके बाद हमें वेब फॉर्म के कोड को एआई स्क्रिप्ट में बदलने की जरूरत है, राइवस्क्रिप्ट के बहुत ही सीखने के बाद प्रसंस्करण तर्क दो-तरफा बातचीत के लिए: 

- हम आपकी सहायता किस तरह से कर सकते है?

+ *
% हम आपकी सहायता किस तरह से कर सकते है
- & lt; सेट क्षेत्रों = & lt; var & gt; & gt; यकीन है कि अगर मैं कुछ सवाल पूछूं तो क्या आप बुरा मानते हैं?

+ *
% निश्चित रूप से आप बुरा मानते हैं अगर मैं कुछ सवाल पूछता हूं - मुझे इस अनुरोध को कितनी जल्दी शुरू करने की आवश्यकता है?

+ *
% इस अनुरोध को शुरू करने के लिए मुझे कितनी जल्दी आवश्यकता है
- & lt; सेट जब = & lt; var & gt; & gt; क्या आप मुझे अपने बजट का आइडिया दे सकते हैं?

+ *
% क्या आप मुझे अपने बजट का मोटा विचार दे सकते हैं
- & lt; बजट निर्धारित करें = & lt; var & gt; & gt; ठीक है, क्या आप मुझे समस्या का सारांश हल करने, घटकों और वातावरण प्रभावित, या एक समग्र विवरण बता सकते हैं?

+ *
% ठीक है क्या आप मुझे हल किए गए घटकों और वातावरण को हल करने के लिए समस्या का सारांश बता सकते हैं
- & lt; सेट प्रोजेक्ट = & lt; var & gt; & gt; इसके अलावा, किसने हमें संदर्भित किया?

+ *
% ने भी जो आपको हमें संदर्भित करता है
- & lt; सेट रेफरल = & lt; var & gt; & gt; यहां महान है जो मुझे अब तक मिला है: \ n सेवाएं चाहिए: & lt; क्षेत्रों और gt प्राप्त करें; \ N शुरू करने की आवश्यकता है: & lt; जब & gt; \ n किसी न किसी बजट: & lt; बजट प्राप्त करें & gt; \ N आपकी परियोजना के बारे में: & lt; परियोजना प्राप्त करें और जीटी; \ N संदर्भित: & lt; रेफ़रल और जीटी प्राप्त करें; \ N और जल्द ही संपर्क में आ जाएगा क्या कुछ और है जो मैं आज आपकी मदद कर सकता हूं? & lt; कॉल & gt; सेवन & lt; क्षेत्रों को प्राप्त करें & gt; & lt; जब & gt; & lt; बजट प्राप्त करें & gt; & lt; परियोजना प्राप्त करें और जीटी; & lt; रेफरल प्राप्त करें & gt; & lt; / कॉल & gt; [14 9]
  

   05. सबमिशन का अनुरोध करें
  

  

   किसी अन्य पृष्ठ या सेवा के लिए सेवा के लिए मानक फॉर्म चर के विपरीत, चैटबॉट तुरंत चैट विंडो (या बोले गए) में उपयोगकर्ता द्वारा दर्ज की गई जानकारी को प्रमाणित और सबमिट कर सकते हैं, जिसका अर्थ है कि उपयोगकर्ता पहले ही दर्ज मूल्यों को आसानी से संशोधित कर सकते हैं।
  

  

   हमें जेसन रेस्ट एपीआई के माध्यम से एक बाहरी प्रोजेक्ट टास्किंग सर्वर पर चैटबॉट यूआई में दर्ज उपयोगकर्ता के अनुरोध को भेजने की आवश्यकता थी।
  

  

   में
   [1 9 7]
    Rivescript-JS
हम एक का उपयोग करने के लिए स्वतंत्र हैं Xmlhttprequest ऑब्जेक्ट लगभग एक साथ अनुरोध जमा करने के लिए, क्योंकि उपयोगकर्ता द्वारा डेटा दर्ज किया गया है: 
 & gt; ऑब्जेक्ट सेवन जावास्क्रिप्ट
 var http = new xmlhttprequest ();

 var a = rs.getuservar (rs.currentuser (), "क्षेत्र");
 var b = rs.getuservar (rs.currentuser (), "कब");
 var c = rs.getuservar (rs.currentuser (), "बजट");
 var d = rs.getuservar (rs.currentuser (), "परियोजना");
 var e = rs.getuservar (rs.currentuser (), "संदर्भ");

 var url = "http: // localhost: 3000 / भेजें";

 var params = "क्षेत्रों =" + ए + "& amp; जब =" + बी + "& amp; बजट =" + सी + "& amp; प्रो ject =" + d + "& amp; रेफरल =" + ई;
 Console.log (पैराम्स);

 http.open ("पोस्ट", यूआरएल, सत्य);

 http.setrequestheader ("सामग्री-प्रकार", "आवेदन / एक्स- www-form-Urlencoded");
 http.setrequestheader ("कनेक्शन", "बंद");
 http.onreadystatechange = फ़ंक्शन () {// राज्य में परिवर्तन होने पर एक फ़ंक्शन को कॉल करें।
  यदि (http.readystate == 4 & amp; http.status == 200) {
    चेतावनी (http.responsetext);
  }
 }
 http.send (पैराम्स);

& lt; ऑब्जेक्ट [14 9]
  

   06. चैटबॉट से डरो मत
  

  

   जल्द ही, जानकारी प्राप्त करने के लिए कंप्यूटर के साथ बातचीत करने के वर्तमान तरीके चैटबॉट जैसे एआई आधारित तकनीक में प्रवेश करेंगे, जहां लोग साधारण वॉयस कमांड बनाते हैं, जैसे कि हमने अमेज़ॅन गूंज और Google होम जैसे तकनीक के साथ देखा है।
  

  

   वेब डिज़ाइन समुदाय को डरने की आवश्यकता नहीं है - हमें सभी को इस नई तकनीक के अतिरिक्त मूल्य को गले लगाना चाहिए।
  

  

   यह उन कंपनियों के लिए एक गेम-परिवर्तक हो सकता है जो इसके लिए काम करता है, पूरी तरह से स्केलेबल ग्राहक सेवा और बेहतर ग्राहक खुफिया की पेशकश करता है।
  

  

   
    इस लेख को मूल रूप से शामिल किया गया था
   
   
    
     नेट पत्रिका
    
   
   
    , वेब डिजाइनरों और डेवलपर्स के लिए दुनिया की सबसे अच्छी बिकने वाली पत्रिका।
   
   
    
     यहां सदस्यता लें
    
   
   
    ।
   
  

  

   
    संबंधित आलेख:
   
  

  
    
   [2 9]
    
     कैसे चैटबॉट सीख रहे हैं - जाइल्स कोलबोर्न के साथ साक्षात्कार
[2 9] बुद्धिमान वेब कैसे हमारे इंटरैक्शन को बदल देगा [2 9] कैसे संवादी इंटरफेस बैंकिंग का नवाचार कर रहे हैं

कैसे करना है - सर्वाधिक लोकप्रिय लेख

ऐप्पल वॉच ऐप कैसे बनाएं

कैसे करना है Jan 26, 2026

(छवि क्रेडिट: भविष्य) [1 9] जब ऐप्पल ने पहली बार �..

How to draw more realistic figures

कैसे करना है Jan 26, 2026

इस आंकड़े में ट्यूटोरियल ड्राइंग हम धड़ और स्तनो�..

How to select with Photoshop's Lasso tools

कैसे करना है Jan 26, 2026

चयन सबसे महत्वपूर्ण कार्यों में से एक हैं जो आप में मास्टर करना सीखेंगे ..

Learn to grow foliage with X-Particles

कैसे करना है Jan 26, 2026

एक स्थिर संयंत्र को मॉडलिंग जिसमें सीटू में उगाए ..

Master the knife tool

कैसे करना है Jan 26, 2026

कभी-कभी मूलभूत बातों पर वापस आना आपके खेल के शीर्�..

एक मूल टैरो कार्ड पेंट

कैसे करना है Jan 26, 2026

जब मुझे अपना पहला टैरो डेक मिला, तो मुझे सुंदर कला�..

Create a low poly wallpaper in C4D

कैसे करना है Jan 26, 2026

2 का पृष्ठ 1: C4D में एक कम पॉली वॉलपेपर बनाए..

How to combine Painter's watercolour sets

कैसे करना है Jan 26, 2026

कोरल पेंटर जल रंग उपकरण का एक भोज प्रदान करता..

श्रेणियाँ