Creating a fully functional WhatsApp chatbot or multi-platform chatbot for Facebook or Telegram or Web can become a task of a few minutes.

But what if the text or even the options that we are going to show to our users are dynamic? What if the choices we’re going to display depend on some kind of dynamic data?

Keep on reading: we’re going to see exactly how we can do that with Xenioo.

Preparing Dynamic Data

For our example, we’re going to need some kind of data that can change outside of the chatbot design. The typical source would be some backend that feeds data to your chatbot conversation and to simulate that, we’re going to publish some dynamic data online.

The fastest way to do that is to use Sheetlabs: this service can quickly turn tabular data (such as a typical Excel file) into an online data source you can read and update using APIs.

A basic account is free and perfectly fine for our example.

In my example, I’ve created a new table with just a color id and color name. You can go of course much further and make the table as complex as you like.

Just remember, after uploading your data, to enable API access and take note of the endpoint that has been created for you.

Retrieving Information

Now that our data is ready, we can switch to Xenioo to create our chatbot and the first thing we need to do is, of course, adding a generic API Call Action.

We will use our API URL as a source, and push all the data into a Xenioo variable. If you are not sure about how the data is returned, go ahead and use a standard text output to check what the API call returns.

Once the data is available to Xenioo, all there is to do is parse it and transform it into dynamic contents. To do this, as we did in other situations, we will be using Xenioo Cloud Scripting Action.

We will be retrieving our variable data value, transform it into a real object and create content on the fly.

You can see the full code below:

What we are doing in our code is using every entry of colors (which is every color in our table) and join that into a text that will be dynamically added to our chat by the method AddReplyPart of the conversation object.

After the code executes, you will see the result in your chat.

The message bubble listing all colors wasn’t in our chatbot design: we just created that on the fly. Different users may see different options because of different other variables and flows: the possibilities are endless!

Picking an Option

Now that we can display our options to the user all is left to do is to let him pick one and react to the choice.

We are going to need a Generic Input Action but how can we make sure that our user chooses only the dynamic options we’ve just created?

To do this, we’re going to slightly change our Cloud Scripting Action like below:

As you see,  while creating the text output we are also creating a simple expression based on id and color. The resulting variable will contain something like this: (A|Red|B|Blue|C|Yellow|D|Green|E|Purple).

Since Xenioo allows the use of variables in every part of any action, we will pass the expression directly as the Control Expression value of our Generic Input Action.

Let’s just add a final text for checking our use reply and its done! A fully dynamic chatbot content ready for WhatsApp prime-time

What About Buttons?

WhatsApp currently does not support buttons as you can very well see by the hints and helps that Xenioo will supply while designing your chatbot.

If your platform of choice allows them, you’re more than welcome to adapt our little example accordingly.

We have prepared some interesting variations for you on our GitHub free source repository.

The post Creating a WhatsApp Dynamic Chatbot appeared first on 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.

The post Come creare un chatbot dinamico per Whatsapp appeared first on Xenioo.

Today we are going to take our very first steps, and following this lesson, you’ll be able to create your first chatbot with some standard chat text and buttons.

A very simple chat flow to introduce you to the very basics.

You can follow our lesson directly from the video below. At the end of the post, you will find a Xenioo bot file that simply restores the example bot into your account for playback and testing. Let’s start!

Creating a Chatbot

Right after login, you’ll be in your account dashboard.

It’s a little empty so we can start by creating our first chatbot. Just click on the Add New Chatbot button to create a brand new chatbot.

Xenioo chatbots are organized in three simple concepts: Behaviours, Interactions and Actions.

From the bottom going up, an Action is a specific element like a text or a button. Everything is performed by either the user or the chatbot.

Multiple actions are grouped into a single Interaction.

Multiple interactions define specific bot Behaviour.

For example, a Behaviour may be a “Support And Feedback”, an interaction may be “Ask about a problem” and may contain actions like “Ask for input”, “Evaluate Input” and any flow decisions.

Using standard Text Actions

Our very first chatbot already contains a behaviour called ‘New Behaviour’ with a single interaction called ‘Bot Interaction’.

Our interaction contains a single action: a Text Action. This is one of the simplest actions you can add to your chatbot and represents a simple chat text bubble.

Although very simple, this is already a working chatbot and can already be previewed. You can activate the preview panel on the right side of the window and click on the “Refresh Preview” button to see your chatbot in action.

Remember: anything you do in the designer window can be immediately tested thorugh the preview panel.

Now click on the interaction text: the panel on the right will switch to the action properties section. Go ahead and change the text to whatever you like. Once you’re done, click on the Save button to apply your changes.

If you get back to the preview panel, you can test your update right away.

Xenioo employs a draft/publish approach to every chatbot as a whole.

Feel free to change everything , as you can rest assured that the published version of the chatbot, the one your contacts are using, remains unaffected.

Creating a simple flow

A typical example of a standard chatbot flow is to present one or more buttons that can move the conversation to other interactions.

What we want to do now is create a simple button that once clicked will move the user to another interaction.

First of all we need to create a new Interaction that will be our next step in the chat flow. To do so, we can click on any free spot of the designer area: this will show the current behavior details in the properties panel.

On the panel, we can click on the ‘Add Interaction’ button. A new interaction will appear in the designer. Let’s click on the new Interaction and change the default Text Action text.

Each new Interaction will contain a Text Action by default. You can easily delete it if you wish to build it differently.

Now that we’ve created a new Interaction, we want to connect the first one to this one with a simple quick button. To do so, let’s click on the interaction header: the interaction property panel will display the interaction data.

Click on the “Add Action” button to display the available actions dialog. This dialog will display all the actions that can be added to the current interaction.

For this first chatbot, we are going to use a Quick Reply button. Move to the “Content” tab of the actions dialog and select “Quick Reply”.

Once the new action has been added to the interaction click it on to display the details.

A Quick button has a button text (that is displayed to the user) and a default Operation that moves the conversation to another flow on the user click.

Operations are smart tech used by Xenioo to heavily personalize each component and we will see a lot more of them in the upcoming lessons.

For now, let’s select the target behavior and interaction in the “Go To Operation”, below the Quick Reply Action data. Select “New Behavior” as behavior and “New Interaction #3” as interaction. Click save to confirm everything.

As you see, Xenioo is now displaying an arrow representing the flow connection between the two interactions.

The more complicated your bot becomes, the more this diagram will be fundamental to understanding the chat flow experienced by the user.

Let’s go back to the preview panel to give a spin to our chatbot.

As you can see now you have a button in your chat: click it and the chat flow will be moved to the new interaction. That’s it!

Wrapping up

In this first lesson we’ve learned the fundamentals of every Xenioo chatbot: Behaviours, Interactions and Actions and we’ve created a very simple chat flow.

In the next lesson we will see how to ask a question to the user and react to the answer!

As with all our lessons, you can find the chatbot sample in your Xenioo account so that you can import it to further experiment and learn.

The post TUTORIAL #1: Creating your very first chatbot appeared first on Xenioo.