Πώς να οικοδομήσουμε μια διασύνδεση Chatbot

Sep 12, 2025
πως να

Στα μέσα της δεκαετίας του 2000, οι εικονικοί πράκτορες και οι Chatbots εξυπηρέτησης πελατών έλαβαν πολλή προσφορά, παρόλο που δεν ήταν πολύ συνομιλίες και κάτω από την κουκούλα αποτελούσαν απλώς από ανταλλαγές δεδομένων με διακομιστές ιστού.

Σήμερα, παρόλο που υπάρχει ένας τεράστιος αριθμός παραδειγμάτων «αδύναμων ai» (συμπεριλαμβανομένου του Siri, Alexa, των μηχανών αναζήτησης ιστού, αυτοματοποιημένους μεταφραστές και αναγνώριση προσώπου) και άλλα θέματα όπως σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές Είναι ο ίδιος το προσκήνιο, οι Chatbots εξακολουθούν να προκαλούν μια αναταραχή. Με μεγάλες επενδύσεις από μεγάλες εταιρείες, παραμένουν πολλές ευκαιρίες για να χτυπήσετε τις διασυνδέσεις συνομιλίας του μέλλοντος.

  • Πώς να σχεδιάσετε μια εμπειρία Chatbot

Μερικές φορές παίρνουν μια κακή φήμη, αλλά οι Chatbots μπορούν να είναι χρήσιμοι. Δεν χρειάζεται να αισθάνονται σαν μια βασική αντικατάσταση για μια τυπική φόρμα ιστού, όπου ο χρήστης γεμίζει τα πεδία εισόδου και περιμένει την επικύρωση - μπορούν να παρέχουν μια εμπειρία συνομιλίας.

Ουσιαστικά ενισχύουμε το εμπειρία χρήστη Για να αισθανθείτε πιο φυσικά, όπως η συνομιλία με έναν εμπειρογνώμονα ή έναν φίλο, αντί για το Web Browser Point-and-Clicks ή στις κινητές χειρονομίες. Ο στόχος είναι ότι παρέχοντας συμπαθητικές, συμφραζόμενες απαντήσεις, αυτή η τεχνολογία θα ενσωματωθεί απευθείας στις ζωές των ανθρώπων.

Παρακολουθήστε το βίντεο παρακάτω ή διαβάστε για να ανακαλύψετε έναν πρακτικό τρόπο για να σχεδιάσετε και να δημιουργήσετε ένα chatbot, βασισμένο σε μια πραγματική εφαρμογή πρόσληψης έργου σε μια πρακτική σχεδιασμού υπηρεσιών.

01. Ορίστε μια προσωπικότητα

It’s important to ensure the chatbot’s personality reflects the company it’s representing

Είναι σημαντικό να διασφαλιστεί ότι η προσωπικότητα του Chatbot αντικατοπτρίζει την εταιρεία που αντιπροσωπεύει

Καθώς αυτή η πρακτική εξυπηρετεί πάνω από 110.000 μέλη παγκοσμίως, ο στόχος ήταν να παρασχεθεί μια γρήγορη, βολική και φυσική διεπαφή μέσω των οποίων οι εσωτερικοί ενδιαφερόμενοι θα μπορούσαν να ζητήσουν αποτελεσματικές ψηφιακές υπηρεσίες, αντί να χρειαστεί να συμπληρώσουν σύγχυση.

Το πρώτο βήμα ήταν να δημιουργηθεί η προσωπικότητα του Chatbot, καθώς αυτό θα αντιπροσωπεύει τη φωνή της ομάδας σχεδιασμού υπηρεσιών στους ενδιαφερόμενους φορείς της. Χτίσαμε το σπερματικό έργο του Aarron Walter στο Σχεδιασμός Personas . Αυτό βοήθησε σημαντικά την ομάδα μας να αναπτύξει τα χαρακτηριστικά της προσωπικότητας του Bot, η οποία στη συνέχεια καθορίστηκε τα μηνύματα για χαιρετισμούς, λάθη και σχόλια χρηστών.

Πρόκειται για ένα λεπτό στάδιο, καθώς επηρεάζει τον τρόπο με τον οποίο γίνεται αντιληπτός ο οργανισμός. Για να βεβαιωθούμε όσο το δυνατόν περισσότερες πληροφορίες, δημιουργήσαμε αμέσως εργαστήρια των ενδιαφερομένων για να καρφώσουμε την κατάλληλη προσωπικότητα, χρώμα, τυπογραφία, εικόνες και ροή του χρήστη όταν εμπλέκονται με το bot.

Αφού κέρδισα όλες τις απαραίτητες εγκρίσεις - συμπεριλαμβανομένης της αναζήτησης νομικών συμβούλων - θέσαμε να μετατρέψαμε τις αρχειακές αρχές της Αρχαϊκής Αίτησης σε μια σειρά από ερωτήσεις προς τα εμπρός και προς τα εμπρός που μιμούνται μια συνομιλία μεταξύ των ενδιαφερομένων και ενός αντιπροσώπου της ομάδας σχεδιασμού μας υπηρεσιών.

02. Χρησιμοποιήστε το Rivescript

This simple scripting language provides everything you need to design and build a chatbot POC

Αυτή η απλή γλώσσα scripting παρέχει όλα όσα χρειάζεστε για να σχεδιάσετε και να δημιουργήσετε ένα chatbot poc

Γνωρίζαμε ότι δεν θέλαμε να πάρα πολύ βαθιά στη γλώσσα σήμανσης AI για το τμήμα επεξεργασίας - απλά χρειαζόμασταν αρκετά για να πηδήσουμε - ξεκινήστε την εμπειρία.

Το Rivescript είναι ένα απλό chatbot API που είναι αρκετά εύκολο να μάθει και αρκεί για τις ανάγκες μας. Μέσα σε λίγες μέρες, είχαμε τη λογική προς τα κάτω για την πρόσληψη αίτησης έργου από το bot, και να την αναλύσουμε με αρκετή επιχειρηματική λογική για να επικυρώσετε και να ταξινομήσετε έτσι ώστε να μπορέσει να το στείλετε μέσω υπηρεσιών ανάπαυσης JSON στην κατάλληλη ουρά εφαρμογής εσωτερικού έργου.

Για να πάρετε αυτό το βασικό chatbot που εργάζονται, κατευθυνθείτε προς το Rivescript repo , κλώνησε και εγκαταστήστε όλες τις εξαρτήσεις των τυπικών κόμβων. Στο repo μπορείτε επίσης να αποκτήσετε μια γεύση των αλληλεπιδράσεων που μπορείτε να προσθέσετε με τα διάφορα αποσπάσματα του παραδείγματος.

Στη συνέχεια, εκτελέστε το φάκελο Web-Client, το οποίο μετατρέπει το bot σε μια ιστοσελίδα εκτελώντας ένα βασικό διακομιστή Grunt. Σε αυτό το σημείο μπορείτε να βελτιώσετε την εμπειρία ανάλογα με τις ανάγκες σας.

03. Δημιουργήστε τον εγκέφαλο του bot σας

Το επόμενο βήμα είναι να δημιουργήσετε τον «εγκέφαλο» του bot μας. Αυτό καθορίζεται στα αρχεία με την επέκταση της προσβάλεσης και ευτυχώς Rivescript έρχεται ήδη με τις βασικές αλληλεπιδράσεις έξω από το κουτί (για παράδειγμα, ερωτήσεις όπως το "ποιο είναι το όνομά σας;", Πόσων ετών είστε; αγαπημένο χρώμα?').

Όταν ξεκινάτε την εφαρμογή Web-Client χρησιμοποιώντας την κατάλληλη εντολή κόμβου, το αρχείο HTML έχει εντολή να τα φορτώσει .ΞΕΚΟΛΛΩ αρχεία.

Στη συνέχεια πρέπει να δημιουργήσουμε το μέρος του εγκεφάλου του Chatbot που θα ασχοληθεί με τα αιτήματα έργου. Ο κύριος στόχος μας είναι να μετατρέψουμε μια επιλογή ερωτήσεων για την εισαγωγή έργων σε μια τακτική συνομιλία.

Έτσι, για παράδειγμα:

  • Γεια σας, πώς μπορούμε να βοηθήσουμε;
  • Μεγάλη, πόσο σύντομα πρέπει να ξεκινήσουμε;
  • Μπορείτε να μου δώσετε μια δύσκολη ιδέα του προϋπολογισμού σας;
  • Πείτε μου περισσότερα για το έργο σας ...
  • Πως άκουσες για εμάς;

Μια τυπική προσπελάσιμη φόρμα ιστού θα μοιάζει με αυτό:

 & lt; form action = "" & gt;
& lt; flusset & gt;
& lt; Legend & GT; Τύπος αιτήματος: & LT; / Legend & GT;
& lt; id id = "επιλογή-ένα" τύπου = "radio" όνομα = "τιμή αίτησης" τιμή = "επιλογή-ένα" & gt;
& lt; ετικέτα για = "επιλογή-ένα" & gt; επιλογή 1 & lt; / label & gt; & lt; br & gt;
& lt; id id = "επιλογή-δύο" τύπου = "radio" όνομα = "τιμή αίτησης" τιμή = "επιλογή-δύο" & gt;
& lt; ετικέτα για = "επιλογή-δύο" & gt; option 2 & lt; / label & gt; & lt; br & gt;
& lt; ID εισόδου = "Επιλογή τριών" τύπου = "Radio" Name = "Τιμή Αίτησης" Τιμή = "Επιλογή-Τρία" & GT;
& lt; ετικέτα για = "επιλογή-τρία" & gt; option 3 & lt; / label & gt; & lt; br & gt;
& lt; / fieldset & gt;
& lt; flusset & gt;
& lt; Legend & GT; Timeline: & LT; / Legend & GT;
& lt; id = id = "ένα μήνα" τύπος = "ραδιόφωνο" όνομα = "request-timeline" τιμή = "ένα μήνα" & gt;
& lt; ετικέτα για = "ένα μήνα" & gt; 1 μήνα & lt; / label & gt; & lt; br & gt;
& lt · ID εισόδου id = "τύπος τριών μηνών" τύπου = "repaxe" τιμή = "request-timeine" τιμή = "1-τρίμους" & gt;
& lt; ετικέτα για = "ένα μήνα" & gt; 1-3 μήνες & lt; / label & gt; & lt; br & gt;
& LT; ID εισόδου = "Τύπος τεσσάρων μηνών" τύπου = "RABLE" NAME = "Αίτηση-Χρονοδιάγραμμα" Αξία = "Τέσσερις συν-μήνες" & GT;
& lt; ετικέτα για = "τέσσερις μήνες" & gt; 4+ μήνες & lt; / label & gt; & lt; br & gt; & lt; / fieldset & gt;
& lt; br & gt;
& lt; ετικέτα για = "αίτημα-προϋπολογισμός" & gt; πληροφορίες προϋπολογισμού & lt; / label & gt; & lt; br & gt; & lt; textarea id = "αίτημα-προϋπολογισμός" όνομα = "αίτημα-προϋπολογισμό-κείμενο" rows = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
& lt; ετικέτα = "αίτημα-περιγραφή" & GT; Περιγραφή έργου & LT; / Label & GT; & LT; BR & GT;
& lt; textarea id = "αίτημα-περιγραφή" όνομα = "αίτηση - κείμενο-κείμενο" σειρές = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
& lt; ετικέτα για = "αίτημα-αναφορά" & gt; / lt. / label & gt; & lt; br & gt; & lt; textarea id = "όνομα αναφοράς" όνομα = "αίτημα-κείμενο- κείμενο" σειρές = "10" cols = "30" & gt; & lt; / textarea & gt;
 & lt; br & gt;
 & LT; Τύπος εισόδου = "Υποβολή" Value = "Υποβολή" & GT;
& lt; / form & gt; 

Με τις φόρμες Web, είμαστε πολύ εξοικειωμένοι με ορισμένα πρότυπα: Κάντε κλικ στο κουμπί Υποβολή, όλα τα δεδομένα φόρμας αποστέλλονται σε άλλη σελίδα όπου η αίτηση επεξεργάζεται και στη συνέχεια πιθανότατα μια μαγευτική σελίδα που σας ευχαριστεί.

Με Chatbots, μπορούμε να λάβουμε την αλληλεπίδραση της υποβολής αιτήματος και να το καταστήσουμε πιο νόημα.

04. Σχεδιάστε μια φωνή

Για να μετατρέψετε αυτή τη φόρμα σε μια συνομιλητική διεπαφή χρήστη που εξυπηρετείται στο Web Client Web του Rivescript, πρέπει να μετατρέψουμε την αρχιτεκτονική πληροφοριών από το άκαμπτο στο υγρό. ή ετικέτες πεδίου σε χορδές UI.

Ας εξετάσουμε κάποιες προσβάσιμες ετικέτες πεδίου και ο σχετικός τόνος ερωτήματός τους:

  • Αίτηση: Πώς μπορούμε να βοηθήσουμε? Δεν είστε σίγουροι; Σας νοιάζει αν θέσω μερικές ερωτήσεις;
  • Χρονοδιάγραμμα: Πόσο σύντομα πρέπει να ξεκινήσουμε;
  • Πληροφορίες προϋπολογισμού: Μπορείτε να μου δώσετε μια δύσκολη ιδέα του προϋπολογισμού σας;
  • Περιγραφή Έργου: Εντάξει, μπορείτε να μου πείτε μια περίληψη του προβλήματος που πρέπει να λυθεί;
  • Αναφορά: Επίσης, ο οποίος μας ανέφερε σε εμάς;

Στη συνέχεια πρέπει να μετατρέψουμε τον κώδικα της φόρμας του Web στο Script AI, ακολουθώντας την πολύ μαθητή Λογική επεξεργασίας Για αμφίδρομες συνομιλίες:

- Πώς μπορούμε να βοηθήσουμε?

+ *
% πώς μπορούμε να βοηθήσουμε
- & lt; set περιοχές = & lt; var & gt; & gt, σας πειράζει αν θέσω μερικές ερωτήσεις;

+ *
% σίγουρος ότι σας πειράζει αν θέσω μερικές ερωτήσεις - πόσο σύντομα πρέπει να ξεκινήσω αυτό το αίτημα;

+ *
% Πόσο σύντομα πρέπει να ξεκινήσω αυτό το αίτημα
- "Ορίστε όταν = & lt; var & gt; & gt; μπορείτε να μου δώσετε ακατέργαστη ιδέα του προϋπολογισμού σας;

+ *
% Μπορείτε να μου δώσετε ακατέργαστη ιδέα του προϋπολογισμού σας
- & lt; ορίστε τον προϋπολογισμό = & lt; var & gt; & gt; ok, μπορείτε να μου πείτε μια περίληψη του προβλήματος που πρέπει να λυθεί, τα εξαρτήματα και τα περιβάλλοντα που επηρεάζονται ή μια συνολική περιγραφή;

+ *
% Εντάξει μπορείτε να μου πείτε μια περίληψη του προβλήματος που πρέπει να λύσετε εξαρτήματα και περιβάλλοντα που επηρεάζονται ή μια συνολική περιγραφή
- & LT; SET PROJECT = & LT; VAR & GT; επίσης, ποιος μας ανέφερε σε εμάς;

+ *
% Επίσης, ο οποίος σας ανέφερε σε εμάς
- & LT; SET APPREAL = & LT; VAR & GT; & GT; Μεγάλη εδώ είναι αυτό που έχω μέχρι στιγμής: \ n υπηρεσίες που χρειάζονται: & lt; Λάβετε περιοχές & GT; \ n πρέπει να ξεκινήσετε: & lt; να πάρετε πότε & gt; \ n ακατέργαστο προϋπολογισμό: & lt; λαμβάνοντας προϋπολογισμό & gt; \ n Σχετικά με το έργο σας: & LT; Get Project & GT; \ n Αναφερόμενοι από: & LT; Πάρτε παραπομπή & GT; \ n και θα έρθει σε επαφή σύντομα υπάρχει κάτι άλλο που μπορώ να σας βοηθήσω σήμερα; & lt; call & gt; get parts & gt; & lt; να πάρετε πότε και gt; & lt; να πάρει προϋπολογισμό & gt; & lt; get project & gt; & LT; Get Repair & GT; / Call & GT; 

05. Αίτηση υποβολής

Σε αντίθεση με τις μεταβλητές τυποποιημένων μορφών που αποστέλλονται σε άλλη σελίδα ή υπηρεσία σε επεξεργασία, οι Chatbots μπορούν να επικυρώσουν και να υποβάλουν πληροφορίες που εισάγονται από τον χρήστη σε ένα παράθυρο συνομιλίας (ή να μιλήσουν) αμέσως, πράγμα που σημαίνει ότι οι χρήστες μπορούν επίσης να επανεξετάσουν τις τιμές που εισάγονται εύκολα.

Χρειαζόμασταν να στείλουμε το αίτημα του χρήστη που εισάγεται στο Chatbot UI μέσω του API REST JSON σε ένα εξωτερικό διακομιστή εργασιών.

Σε Rivescript-js Είμαστε ελεύθεροι να χρησιμοποιήσουμε ένα Xmlhttprequest Αντικείμενο για να υποβάλετε το αίτημα σχεδόν ταυτόχρονα, καθώς τα δεδομένα εισάγονται από τον χρήστη:

 & GT; Αντικείμενο εισαγωγής JavaScript
 var http = νέος 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 = "περιοχές =" + A + "& amp; όταν =" + + "& amp; + + +" + d + "& amp;
 console.log (παράμετρο);

 http.open ("post", διεύθυνση URL, αλήθεια).

 http.setrequestheader ("τύπος περιεχομένου", "εφαρμογή / x- www-form-urleencoded");
 http.setrequestheader ("σύνδεση", "κλείσιμο");
 http.onreadystatechange = λειτουργία () {// καλέστε μια λειτουργία όταν αλλάξει η κατάσταση.
  Εάν (http.ReadyState == 4 & amp; & amp; http.status == 200) {
    Ειδοποίηση (http.responsetext);
  }
 }
 http.send (παραμέτρους);

& lt; αντικείμενο 

06. Μην φοβάστε το chatbot

Σύντομα, οι τρέχοντες τρόποι αλληλεπίδρασης με τους υπολογιστές για την απόκτηση πληροφοριών θα δώσουν στην τεχνολογία που βασίζεται στην AI όπως οι Chatbots, όπου οι άνθρωποι κάνουν απλές φωνητικές εντολές, όπως είδαμε με τεχνολογία, όπως η Echo Amazon και το Google Home.

Η κοινότητα σχεδιασμού ιστοσελίδων δεν χρειάζεται φόβο - θα πρέπει όλοι να αγκαλιάζουμε την προστιθέμενη αξία αυτής της νέας τεχνολογίας.

Θα μπορούσε να είναι ένας μετατροπέας παιχνιδιών για τις εταιρείες που λειτουργεί, προσφέροντας πλήρως κλιμακωτή εξυπηρέτηση πελατών και βελτιωμένη νοημοσύνη των πελατών.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό , Το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Εγγραφείτε εδώ .

Σχετικά Άρθρα:

  • Πώς οι Chatbots μαθαίνουν - συνέντευξη με τον Giles Colborne
  • Πώς ο έξυπνος ιστός θα αλλάξει τις αλληλεπιδράσεις μας
  • Πώς οι διασυνδέσεις συνομιλίας είναι καινοτομία τραπεζών

πως να - Τα πιο δημοφιλή άρθρα

Πώς να επιταχύνετε την επανατροπολογία στη Μάγια

πως να Sep 12, 2025

(Πιστωτική εικόνα: Αντώνη) Η ικανότητα να εκτελέσει την επανατρο..


Πώς να επιτύχετε κλίμακα στους πίνακές σας

πως να Sep 12, 2025

Σε αυτό το σεμινάριο θα πάμε σε μερικές βασικές αρχές που θα βοηθήσουν στην επικοινωνία της ιδέας μεγάλη..


Δημιουργήστε ένα λαμπερό αποτέλεσμα κειμένου νέον

πως να Sep 12, 2025

Συχνά, είναι τα πιο απλά αποτελέσματα που φαίνονται τα πιο εντυπωσιακά..


Ισχύς ένα blog χρησιμοποιώντας το API WordPress

πως να Sep 12, 2025

Τα τελευταία χρόνια, η ανάπτυξη ενός υπόλοιπου API για το WordPress έχει ανοί..


Αναβαθμίστε τις υφές σας σε σχεδιαστές ουσίας

πως να Sep 12, 2025

Bungie Lead Environment Artist Daniel Thiger μας τρέχει μέσα από τις τεχνικές του για την π�..


Πώς να ξεκινήσετε με τη Sass

πως να Sep 12, 2025

Σάλτσα Είναι ένα ισχυρό εργαλείο που φέρνει πολλά χαρακτηριστι�..


Βάλτε ένα πορτρέτο όπως οι παλιούς κύριους

πως να Sep 12, 2025

Για αυτό το σεμινάριο θα λάβουμε μια σε βάθος ματιά στα οφέλη της αντιγ..


Πάρτε δημιουργικό με πορτρέτα και ευαισθητοποίηση στο πρόσωπο υγροποιημένο

πως να Sep 12, 2025

Έχουμε όλοι ένα παιχνίδι με το εργαλείο υγροποίησης στο Photoshop, αλλά με �..


Κατηγορίες