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.

In questa lezione cominciamo dalle basi. Faremo i primi passi insieme per realizzare un semplice chatbot che utilizza testi e bottoni per interagire con gli utenti.

Non ci interessa per ora sapere per quale piattaforma dovrà funzionare il nostro chatbot: Xenioo permette di costruire il chatbot in modo del tutto trasparente rispetto al canale di pubblicazione.

Xenioo è una piattaforma in continua evoluzione e ad oggi è possibile creare chatbot per il Facebook Messenger, Whatsapp, Telegram, Siti web, Amazon Alexa, Google Assistant e Slack.

Potrete seguire la lezione direttamente guardando il video seguente. Ricordatevi inoltre che il chatbot di questa lezione lo potrete trovare e riutilizzare per i vostri esperimenti all’interno della sezione Templates del tuo account Xenioo.

Pronti? Non ci resta che cominciare!

Creiamo il chatbot

Dopo il primo accesso in Xenioo, vi troverete nella sezione I miei chatbot. Sarà ovviamente vuota, ma ancora per poco.

Clicchiamo su Create New Bot per creare un chatbot nuovo di zecca.

Prima di continuare è però necessario capire come è strutturato un qualsiasi chatbot Xenioo.

Un chatbot Xenioo è organizzato in tre semplici concetti: Behaviours(comportamenti), Interactions(interazioni) ed Actions(azioni).

Una Action rappresenta uno specifico elemento come un testo oppure un bottone. Si tratta in questo caso di azioni che vengono visualizzate dal chatbot durante l’esecuzione del flusso.
Una Action può anche corrispondere ad elementi non visuali, che devono essere eseguite da Xenioo. Provate per esempio a pensare ad azioni quali switch condizionali, impostazioni di variabili oppure integrazioni con altri servizi.

Multiple azioni sono raggruppate in una singola Interaction.

Multiple interazioni costituiscono un Behaviour.

I Behaviours sono utili per organizzare logicamente il chatbot in moduli indipendenti, ma interconnessi tra di loro.

Per esempio, un Behaviour potrebbe chiamarsi “Supporto”, avere al proprio interno una Interaction “Chiedi il problema” la quale a sua volta potrebbe contenere Actions che chiedono all’utente di inserire il problema, valutano l’input ricevuto e decidono quale direzione dare al flusso.

Aggiungiamo un po di testo

Il bot che abbiamo appena creato conterrà un Behaviour chiamato “New Bot Behaviour”, con una singola Interaction chiamata “Start Interaction”.

Troverete anche una seconda interazione dal nome “Fallback Interaction”. Quest’ultima rappresente il punto in cui la conversazione finirà ogni volta che il chabot non sarà in grado di capire cosa chiede l’utente oppure nel caso si verifichino degli errori imprevisti.

All’interno della Start Interaction si trova la nostra prima azione: una Text Action. Questa è la più semplice delle azioni presenti in Xenioo e rappresenta una semplice bolla di testo che verrà visualizzata in chat.

Sebbene molto semplice, questo è a tutti gli effetti un chatbot finito e funzionante che possiamo provare in anteprima.

E’ infatti possibile attivare la funzionalità di anteprima cliccando sull’icona di Preview nel pannello laterale di destra e cliccando successivamente su “Refresh Preview” per vedere il chatbot in azione.

Ricordatevi: ogni modifica effettuata nel designer può essere immediatamente provata attraverso il pannelo di anteprima.

Ora clicchiamo sul testo all’interno della nostra interazione. Il pannello di destra cambierà opportunamente visualizzando le proprietà disponibili, in questo caso per la Text Action selezionata.
Provate a cambiare il testo, cliccate poi sul bottone “Save” per applicare le modifiche. Tornando sul pannello di anteprima potrete testare le modifiche appena apportate.

Xenioo implementa una modalità Draft/Publish: qalsiasi modifica che viene effettuata al chatbot non viene riportata sulla versione “live”, ossia quella in uso da parte dei vostri utenti, fino alla prossima pubblicazione manuale.

Sviluppiamo un semplice flusso

Un tipico esempio di un flusso standard all’interno di un chatbot è quello di presentare uno o più bottoni che possano muovere la conversazioni in punti diversi, ossia verso altre interazioni o comportamenti.

Quello che faremo ora sarà creare un bottone che una volta cliccato porti l’utente in un altra interazione.

Prima di tutto dobbiamo creare una nuova Interaction, la quale rappresenta lo step successivo nel flusso. Per fare questo clicchiamo in un punto vuoto qualsiasi dell’area di disegno: questo visualizzera le proprietà del Behaviour corrente nel pannello laterale di destra.

In questo pannelo, clicchiamo sul bottone “Add Interaction”. Una nuova interazione comparirà nel designer, clicchiamo sopra di essa e cambiato il testo della Text Action di default.

Ogni nuova interazione contiene sempre una Text Action, che può essere cambiata o rimossa a piacimento.

Adesso che abbiamo creato la nuova interazione, non ci resta che collegarla alla prima utilizzando una nuova azione: Quick Button Action.

Clicchiamo sulla parte alta della Start Interaction (la parte dove c’e’ il nome della interazione): nel pannello di destra verranno visualizzate le proprietà di questa interazione.

Clicchiamo sul bottone “Add Action” per visualizzare la finestra delle azioni disponibili. Infatti questa finestra mostrerà solo le azioni che è possibile aggiungere alla interazione selezionata.

Andremo a selezionare il Quick Reply Button, che troveremo nel tab Content della finestra delle azioni.

Una volta che l’azione è stata aggiunta, clicchiamo sopra di essa in modo da visualizzare come di consueto le sue proprietà nel pannello di destra.

L’azione Quick Reply Button prevede un bottone che sarà visualizzato all’utente ed una Operation(operazione) specifica che si occuperà di muovere la conversazione in un altro punto del flusso a seguito del click sul bottone.

Le operazioni sono elementi intelligenti utilizzati da Xenioo per personalizzare pesantemente ogni componente del chatbot. Nelle prossime lezioni vedremo più in dettaglio quante e quali operazioni utilizzare all’interno dei nostri chatbot.

Per il momento ci basta sapere che l’operazione che ci troviamo già creata è una “Go To Operation”.

In questa operazione andremo a configurare la destinazione del flusso quando l’utente cliccherà sul bottone, selezionando rispettivamente il Behaviour e la nuova Interaction creata precedentemente.
Come al solito, clicchiamo su “Save” per confermare le modifiche effettuate.

Come potrete notare, nel designer verrà visualizzata una freccia che collega le due interazioni e che rappresenta appunto il nuovo percorso di flusso appena creato.

Tornando al pannello di anteprima potremo provare in un attimo le nostre modifiche.

Come potrai vedere, la chat ora visualizzerà il nostro nuovo bottone: cliccandoci sopra il flusso si muoverà verso la nuova interazione. Semplice, no?

Ricapitolando

In questa prima lezione abbiamo imparato i fondamentali di ogni chatbot Xenioo: comportamenti, interazioni ed azioni.

Abbiamo inoltre creato il nostro primo chatbot prendendo dimestichezza con le funzionalità del designer e dell’anteprima.

Nella prossima lezione vedremo come fare domande agli utenti e reagire alle risposte ottenute.

Come al solito per ogni lezione, troverai il chatbot di esempio all’interno della sezione Template del tuo account Xenioo, pronto per essere caricato e modificato a piacimento.

The post LEZIONE #1: creare il primo chatbot con Xenioo appeared first on Xenioo.