In un nostro precedente articolo abbiamo già parlato di come creare in pochi minuti un primo chatbot per Whatsapp attraverso Xenioo.
Abbiamo inoltre più volte raccontato come le funzionalità avanzate del designer di chatbot di Xenioo rendono davvero semplice la creazione di elementi testuali e visuali.
Ma come comportarci quando il testo o le opzioni da visualizzare agli utenti dipendono da dati dinamici che magari dobbiamo recuperare da una qualche fonte online?
Prepariamo i dati dinamici per il chatbot
Per il nostro bot di esempio abbiamo bisogno di una fonte dati, essenzialmente un database, che si trovi al di fuori del chatbot stesso.
La tipica sorgente di una simile fonte dati potrebbe essere un qualsiasi backend dotato di API Restful e quindi in grado di comunicare facilmente con il chatbot.
Il modo più veloce per realizzare il nostro prototipo è quello di utilizzare Sheetlabs. Sheetlabs è un servizio online che consente di creare velocemente tabelle di dati, in modo simile a fogli Excel, e trasformarli in sorgenti dati che possono essere lette ed aggiornate via API.
Potete creare un account base, gratuito e perfettamente funzionante per il nostro scopo.
Creato l’account, andremo a creare una nuova tabella per inserire una lista di colori, identificandoli attraverso la coppia di campi Id e Colore. Si tratta di un esempio molto semplice, per casi reali potrete creare strutture dati più complesse.
Ricordatevi, dopo aver creato e riempito la tabella, di abilitare l’accesso API e prendere nota dell’endpoint(l’URL) che è stato creato appositamente per voi da Sheetlabs.
Leggiamo i dati dal chatbot
Ora che i dati sono pronti, possiamo tornare in Xenioo per creare il chatbot. Il chatbot chiederà all’utente un colore da scegliere da una lista. Questa lista sarà dinamica e caricata dalla sorgente dati precedentemente creata.
La prima azione che dovremo aggiungere sarà ovviamente una generica API Call Action.
Per chi non si ricordasse come funziona, può sempre ripassare quanto scritto nella nostra lezione a riguardo.
Per configurare l’azione, indicheremo nel campo API URL l’endpoint che ci viene fornito da Sheetlabs. I risultati della chiamata all’API verrano inseriti in una apposita variable che creeremo per l’occorrenza. Se non siete sicuri del formato con la quale i dati vengono ritornati da Sheetlabs, è sufficiente usare una Text Action per stampare il risultato come risposta del chatbot.
Ora che i dati sono disponibili in Xenioo, dobbiamo analizzarli e trasformarli in un contenuto dinamico.
Per fare questo dobbiamo scrivere del codice Javascript utilizzando l’azione Cloud Scripting, di cui abbiamo parlato in una delle nostre lezioni iniziali.
In pratica il codice si occuperà di recuperare il valore dalla variabile contenente il risultato della chiamata all’ API, trasformarlo in un oggetto Javascript e creare il contenuto da visualizzare nella chat al volo.
Potete vedere il codice qui sotto:
var colors = JSON.parse( conversation.GetVariableValue( "colors_data" ) );
var txt = "";
var input = "";
for( var i=0; i < colors.length; i++ ){
/* We build the message text */
/* The \r at the end is required for multiline in the bubble */
txt += colors[i].colorid + ") " + colors[i].color + "\r";
input += colors[i].colorid + "|" + colors[i].color + "|";
}
conversation.AddReplyPart(txt);Cosa fa esattamente questa porzione di codice? In pratica, per ogni colore ritornato (e quindi per ogni colore presente nella tabella creata su Sheetlabs) creiamo un testo che verrà aggiunto alla nostra chat grazie al metodo AddReplyPart dell’oggetto globale conversation.
Se proviamo ad eseguire il chatbot in preview, vedremo il risultato come nell’immagine seguente.
La bolla di testo con l’elenco dei colori non è stata creata preventivamente nel chatbot, ma è stata generata in tempo reale.
Utilizzando variabili e dati più compelssi è possibile fare in modo che utenti diversi vedano, per esempio, opzioni differenti, e cosi via. Le possibilità sono infinite!
Come selezionare una delle opzioni
Ora che abbiamo visualizzato dinamicamente le opzioni all’utente, non ci resta altro che gestire come l’utente le possa selezionare e come il bot risponda di conseguenza.
Ci serviremo dell’ azione Generic Input, ma come possiamo essere sicuri che l’utente possa scegliere unicamente tra le opzioni che sono state dinamicamente create?
Per fare questo, dobbiamo modificare leggermente il nostro script, come mostrato qui sotto.
var colors = JSON.parse( conversation.GetVariableValue( "colors_data" ) );
var txt = "";
var input = "";
for( var i=0; i < colors.length; i++ ){
/* We build the message text */
/* The \r at the end is required for multiline in the bubble */
txt += colors[i].colorid + ") " + colors[i].color + "\r";
input += colors[i].colorid + "|" + colors[i].color + "|";
}
conversation.SetVariable ("colors_input", "(" + input + ")");
conversation.AddReplyPart(txt);Come potete vedere, abbiamo aggiunto una riga in più:
conversation.SetVariable ("colors_input", "(" + input + ")");Questa riga di codice crea una nuova variabile, “colors_input”, contenente una semplice espressione regolare basata sull’ ID e nome del colore. Questa variabile conterrà qualcosa di simile a:
(A|Red|B|Blue|C|Yellow|D|Green|E|Purple).
Dal momento che Xenioo permette l’utilizzo di variabili in ogni parte della configurazione di un’azione, useremo questa variabile per passare l’espressione direttamente nel campo Control Expression dell’azione Generic Input.
Aggiungiamo poi un testo finale per la verica della risposta dell’utente ed abbiamo finito!
Abbiamo creato in pochi passi un chatbot a contenuto dinamico per Whatsapp, e non solo. Infatti, questo chatbot di esempio potrebbe essere pubblicato senza modifiche ulteriori su qualsiasi delle altre piattaforme chatbots che Xenioo supporta.
E se volessimo usare dei bottoni?
Whatsapp al momento non supporta la visualizzazione di bottoni nella sua chat, come peraltro è evidenziato dalle icone rosse oppure arancioni visibili nel designer di Xenioo per ogni azione.
Se intendete realizzare un chatbot dinamico per una delle piattaforme che supporta bottoni, come Facebook Messenger, Telegram oppure Siti Web, è sufficiente adattare nel modo adeguato questo esempio.
A tal proposito, potete andare a vedervi una variante che abbiamo preparato per voi e che permette l’aggiunta di bottoni dinamici.
Il chatbot di esempio descritto in questo articolo lo trovate invece qui, pronto da essere ripristinato all’interno del vostro account Xenioo.