Jak zbudować interfejs Chatbot

Sep 15, 2025
Jak

W połowie 2000 r. Wirtualni agenci i obsługa klienta Chatbots otrzymali dużo wspólnego, mimo że nie były bardzo konwersacyjne, a pod okapem są one po prostu składa się tylko z wymiany danych z serwerami internetowymi.

Obecnie, mimo że istnieje ogromna liczba przykładów "słabych AI" (w tym Siri, Alexa, wyszukiwarek internetowych, zautomatyzowanych tłumaczy i rozpoznawania twarzy) oraz innych tematów, takich jak Responsive Web Design. Wleczają w centrum uwagi, chatbots wciąż powodują mieszanie. Z poważnymi inwestycjami z dużych firm pozostaje mnóstwo możliwości do hakowania konwersacyjnych interfejsów przyszłości.

  • Jak zaprojektować doświadczenie chatbot

Czasami otrzymują złą reputację, ale chatbots mogą być przydatne. Nie muszą czuć się jak podstawowa wymiana dla standardowej formularza internetowego, gdzie użytkownik wypełnia pola wejściowe i czeka walidację - mogą zapewnić doświadczenie konwersacyjne.

Zasadniczo wzmacniamy doświadczenie użytkownika Czuć się bardziej naturalnym, jak rozmowa z ekspertem lub przyjacielem, zamiast przeglądarki internetowej punktów i gestów mobilnych. Celem jest zapewnienie empatycznymi, kontekstowymi odpowiedziami, technologia ta zostanie osadzona bezpośrednio w życiu ludzi.

Obejrzyj wideo poniżej lub przeczytaj, aby odkryć praktyczny sposób zaprojektowania i zbudowania chatbota, na podstawie prawdziwej aplikacji wlotowej w praktyce projektowania usług.

01. Ustaw osobowość

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

Ważne jest, aby osobowość Chatbota odzwierciedla firmę, którą reprezentuje

Ponieważ ta praktyka służy ponad 110 000 członków na całym świecie, celem była zapewnienie szybkiego, wygodnego i naturalnego interfejsu, przez które wewnętrzne interesariusze mogłyby zażądać skutecznych usług cyfrowych, zamiast konieczności wypełnienia mylących formularzy.

Pierwszym krokiem było ustanowienie osobowości Chatbota, ponieważ stanowiłoby to głos zespołu projektowania usług do swoich interesariuszy. Zbudowaliśmy na półprzestrzenionej pracy aarron Waltera Design Personas. . To znacznie pomogło naszemu zespołowi rozwijać cechy osobowości bota, które następnie określały wiadomości na pozdrowienia, błędy i informacje zwrotne użytkownika.

Jest to delikatny etap, ponieważ wpływa na to, w jaki sposób organizacja jest postrzegana. Aby upewnić się, że mieliśmy jak najwięcej informacji, natychmiast skonfigurować warsztaty interesariuszy, aby paznokieć odpowiednią osobowość, kolor, typografię, obrazy i przepływy użytkownika podczas angażowania się z botem.

Po zdobyciu wszystkich niezbędnych zatwierdzeń - w tym poszukiwania radcy prawnych - wyruszyliśmy do konwersji wniosków Archaicznych formularzy do serii pytań wstecznych, które naśladowały rozmowę między zainteresowanymi stronami a przedstawicielem naszego zespołu usług projektowych.

02. Użyj Riverscript.

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

Ten prosty język skryptowy zapewnia wszystko, czego potrzebujesz, aby zaprojektować i zbudować Chatbot Poc

Wiedzieliśmy, że nie chcemy zbyt głęboko w języku znacznika AI dla części przetwarzania - po prostu potrzebowaliśmy wystarczająco dużo, aby skakać - rozpocząć doświadczenie.

Rivescript to prosty interfejs API Chatbot, który jest wystarczająco łatwy do nauki i wystawy dla naszych potrzeb. W ciągu kilku dni mieliśmy logikę w dół, aby spożywać żądanie projektu z bota, i przeanalizowaliśmy go wystarczającą logiką biznesową, aby je zatwierdzić i kategoryzować, aby można było go wysłać przez usługi JSON REST do odpowiedniej kolejki zadania wewnętrznego projektu.

Aby uzyskać tę podstawową pracę chatbot, udaj się do Riverscript Repo. , Klonuj go i zainstaluj wszystkie standardowe zależności węzłów. W repo możesz również uzyskać smak interakcji, które możesz dodać do różnych przykładowych fragmentów.

Następnie uruchom folder Web-Client, który zamienia bota na stronę internetową, uruchamiając podstawowy serwer Grunt. W tym momencie możesz zwiększyć doświadczenie dostosowane do Twoich potrzeb.

03. Wygeneruj mózg bota

Następnym krokiem jest wygenerowanie "mózgu" naszego bota. Jest to określone w plikach z rozszerzeniem .rive, a na szczęście Rivecript jest już wyposażony w podstawowe interakcje z pudełka (na przykład pytania takie jak "Jak masz na imię?", "Ile masz lat?" I "Co to jest twoje ulubiony kolor?').

Po zainicjowaniu aplikacji internetowej za pomocą właściwego polecenia węzła, plik HTML jest poinstruowany, aby je załadować .ROZŁUPAĆ akta.

Następnie musimy wygenerować część mózgu naszego Chatbota, który zajmie się żądaniami projektu. Naszym głównym celem jest przekonięcie wyboru pytań dotyczących zadań projektowych do regularnej rozmowy.

Tak więc na przykład:

  • Cześć, jak możemy pomóc?
  • Świetnie, jak szybko musimy zacząć?
  • Czy możesz dać mi szorstki pomysł na Twój budżet?
  • Opowiedz mi więcej o swoim projekcie ...
  • Jak o nas usłyszałeś?

Typowy dostępny formularz internetowy wyglądałby tak: 

 Action Action = "" & GT;
& lt; Fieldet & GT;
& LT; Legend & GT; Typ żądania: & Legend & GT;
& LT; Input Id = "Option-One" Type = "Radio" Nazwa = "Wartość żądania" = "Opcja-One" & GT;
& LT; Etykieta dla = "Opcja-One" & GT; Opcja 1 ° C. LT; BR & GT;
& LT; Input ID = "Option-Two" Type = "Radio" Nazwa = "Wartość żądania" wartość = "Opcja-Two" & GT;
& LT; Etykieta dla = "Opcja-Two" i GT; Opcja 2 ° C. LT; BR & GT;
& lt; wejście ID = "Opcja-Trzy" Type = "Radio" Nazwa = "Wartość żądania" wartość = "Opcja-Trzy" & GT;
& LT; Etykieta dla = "Opcja-Trzy" i GT; Opcja 3 ° C. LT; BR & GT;
& LT; / Fieldet & GT;
& lt; Fieldet & GT;
& LT; Legend & GT; Limeline: & LT; / Legend & GT;
& LT; INPUT ID = "Jeden miesiąc" Type = "Radio" Nazwa = "Warto" Wartość = "Miesiąc" & GT;
& LT; Etykieta dla = "Miesiąc" & GT; 1 miesiąc's / Label & GT; & LT;
& LT; INPUT ID = "Jeden trzy miesiące" Type = "Radio" Nazwa = "Wartość" Wartość = "Jeden trzy miesiące" & GT;
& LT; Etykieta dla = "Jeden miesiąc" i GT; 1-3 miesiące i LT; BR & GT;
& LT; Input Id = "Four-Plus-miesiące" Type = "Radio" Nazwa = "Żądanie-osi czasu" Wartość = "cztery plus miesięcy" & GT;
& LT; Etykieta dla = "Cztery plus miesięcy" & GT; 4+ miesiące i LT; / GT; & LT; / Fieldet & GT;
& lt; br & gt;
& LT; Etykieta dla = "Wniosek-Budget" & GT; Informacje budżetowe

W przypadku formularzy internetowych jesteśmy bardzo zaznajomieni z pewnymi wzorami: Klikasz przycisk przesyłania, wszystkie dane formularzowe są wysyłane na inną stronę, w której prośba jest przetwarzana, a następnie najprawdopodobniej pojawia się bezczelna strona dziękuję.

Z Chatbotami jesteśmy w stanie podjąć interakcję złożenia wniosku i uczynić go bardziej znaczącym.

04. Zaprojektuj głos

Aby przekonwertować ten formularz do interfejsu użytkownika konwersacyjnego serwowanego w kliencie WWW Chatbot Rivescript, musimy przekształcić architekturę informacji ze sztywnego do płynu; lub etykiety terenowe w struny UI.

Rozważmy niektóre dostępne etykiety terenowe, a ich związane pytanie:

  • Żądanie: Jak możemy pomóc? Niepewny? Czy masz coś przeciwko, jeśli zadam kilka pytań?
  • Oś czasu: Jak szybko musimy zacząć?
  • Informacje o budżecie: Czy możesz dać mi szorstki pomysł na Twój budżet?
  • Opis Projektu: OK, czy możesz mi powiedzieć podsumowanie problemu, który ma zostać rozwiązany?
  • Odniesienie: Również, kto cię do nas skierował?

Następnie musimy konwertować kod formularza WWW do skryptu AI, zgodnie z bardzo dywermentowym RiveScript Logika przetwarzania W przypadku dwukierunkowych rozmów: 

- Jak możemy pomóc?

+ *
% jak możemy pomóc
- Jasne, czy jesteś pewien, czy masz coś przeciwko, jeśli zadaję kilka pytań?

+ *
% pewny masz nic przeciwko, jeśli zadaję kilka pytań - jak szybko muszę rozpocząć tę prośbę?

+ *
% Jak szybko muszę rozpocząć tę prośbę
- Set, gdy = & lt; var & gt; & gt; możesz dać mi szorstki pomysł na budżet?

+ *
% Czy możesz dać mi szorstki pomysł na Twój budżet
- & LT; Set Budget = & LT; OK, możesz powiedzieć mi podsumowanie problemu, który ma zostać rozwiązany, komponenty i środowiska, lub ogólny opis?

+ *
% OK Czy możesz powiedzieć mi podsumowanie problemu, które należy rozwiązać elementy i środowiska lub ogólny opis
- & LT; Set Project = & Lt; Var & GT; i, który również cię przekazywał?

+ *
%, który również cię skierował
- & LT; Set Rezerwat = Świetnie tutaj, jest to, co do tej pory miałem,: n Usługi potrzebne: Dostajcie obszary & GT; N potrzeba rozpoczęcia: & Get, gdy & GT; n Correct Budget: & LT; uzyskaj budżet i GT; N o projekcie: Get Project & GT; N, odnosi się do: ów, uzyskuj skierowanie i GT; N i wkrótce skontaktujemy się z nim, czy mogę ci coś jeszcze pomóc? & LT; Call & GT; Pobierz tereny i GT; & lt; Get Kiedy & GT; & lt; uzyskać budżet i GT; & lt; Get Project & GT; & LT; otrzymaj referencje, Call & GT;

05. Włóż wniosek

W przeciwieństwie do standardowych zmiennych formularzy wysyłanych na inną stronę lub usługę do procesu, Chatocki mogą sprawdzać i przesyłać informacje wprowadzone przez użytkownika w oknie czatu (lub mówionego) natychmiast, co oznacza, że ​​użytkownicy mogą również łatwo odwrócić wcześniej wprowadzone wartości.

Musieliśmy wysłać żądanie użytkownika wprowadzone do CatBot UI za pośrednictwem API JSON Reszta na zewnętrzny serwer zadaniowy projektu.

W Rivescript-js. Mamy swobodę korzystać z XMLHTTPREQUEQUEST. Obiekt, aby przesłać żądanie prawie jednocześnie, ponieważ dane są wprowadzane przez użytkownika: 

 & GT; Object Wlot JavaScript.
 var http = nowy xmlhttprequest ();

 var a = rs.ggetuservar (Rs.currentuser (), "obszary");
 var b = rs.ggetuservar (Rs.currentuser (), "kiedy");
 var c = rs.ggetuservar (Rs.currentuser (), "budżet");
 var d = Rs.ggetuservar (Rs.currentuser (), "Projekt");
 var e = rs.ggetuservar (Rs.Currentuser (), "Rezerwat");

 var URL = "http: // localhost: 3000 / Wyślij";

 var params = "Obszary =" + A + "& AMP; Gdy =" + B + "& AMP; Budżet =" + C + "& AMP; PRO JECT =" + D + "& AMP; Rezerwat =" + E;
 konsola.log (params);

 http.open ("post", adres URL, prawda);

 http.setrequestHeader ("Typ treści", "Zastosowanie / X-WWW-FORM-URLENCNODED");
 http.setrequesteHester ("połączenie", "zamknij");
 http.onreadystatechange = Funkcja () {// Zadzwoń do funkcji, gdy zmienia się stan.
  Jeśli (http.readystate == 4 & amp; & amp; http.status == 200) {
    alert (http.responsetekst);
  }
 }
 http.send (params);

& lt; Obiekt

06. Nie bój się chatbota

Wkrótce, obecne sposoby interakcji z komputerami w celu uzyskania informacji, dają technologii opartej na AI jak chatbots, gdzie ludzie po prostu robią proste polecenia głosowe, jak widzieliśmy z techniką, taką jak Amazon Echo i Google Home.

Społeczność projektowania stron internetowych nie musi się obawiać - wszyscy powinniśmy obejmować wartość dodaną tej nowej technologii.

Może to być zmieniacz gry dla firm, dla których działa, oferując w pełni skalowalną obsługę klienta i ulepszoną inteligencję klientów.

Ten artykuł był pierwotnie w magazyn netto. , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Subskrybuj tutaj .

Powiązane artykuły:

  • Jak nauczają się chatbots - wywiad z Giles Colborne
  • Jak inteligentna sieć zmieni nasze interakcje
  • Jak interfejsy konwersacyjne są innowacyjne bankowości

Jak - Najpopularniejsze artykuły

21 kroków do super szybkiego javascript

Jak Sep 15, 2025

(Kredyt obrazu: Pexels.com) Na pierwszy rzut oka przetwarzanie równoległe brzmi jak zaproszenie do swobodnego lunch..

Zbuduj sterowany głosem UI

Jak Sep 15, 2025

Widzieliśmy wiele nowych interfejsów API dodanych do Internetu w ciągu ostatnich kilku lat, które naprawdę umożliwiły treści internetowej, aby mieć ten sam rodzaj funkcjonalności, j..

Krok po kroku: Jak naśladować farbę olejową w Corel Malarz

Jak Sep 15, 2025

Czuje tylko wczoraj, kiedy byłem wczoraj, gdy byłem grającym z przyjaciółmi szkół średnich w Fantasy Worlds pełni rycerzy, czarodzieje, barbarzyńców i skarbów ukrytych w lochach. ..

Jak tworzyć niestandardowe elementy sterujące w Majowie

Jak Sep 15, 2025

To TUTORIAL MAYA. pokaże ci, jak zbudować niestandardowe platformy. Najlepsze platformy są intuicyjne i proste ..

Jak zaprojektować responsywne i agnostyczne formy

Jak Sep 15, 2025

Niezależnie od tego, czy jest to przepływ rejestracyjny, czy wielostronne stepper, formularze są jednym z najważniejszych ele..

Jak zaprojektować okładkę książki w InDesign

Jak Sep 15, 2025

Powiedzenie może być: "Nie oceniaj książki po okładce", ale projekt okładki może w rzeczywistości zrobić lub przełamać sukces książki. Jeśli jesteś taki jak ja, deska przedniej..

Stitch i kompozyt 360 materiału

Jak Sep 15, 2025

Z dodatkiem Wtyczka Cara VR Do Nuke, mamy teraz potężne narzędzie do naszej dyspozycji do szycia i komponowanie naszego 360 materiału. W tym samouczku pokaż..

11 Wskazówki dotyczące tworzenia wodnistego krajobrazu w 3D

Jak Sep 15, 2025

Clarisse. jest stosunkowo nową aplikacją, a to więcej niż tylko silnik renderowany, układ lub wygląd narzędzia rozwój. Clarisse uwalnia artystów z ograniczeń władzy kom..

Kategorie