Créez un chatbot SMS avec NativeChat et Twilio

Un bon chatbot peut gérer avec élégance une grande partie de la communication avec vos utilisateurs. Dans ce tutoriel, nous allons construire un chatbot avec NativeChat, Twilio et SMS.

Au cours de la dernière décennie, le paradigme des communications a changé. Nous avons l'habitude de nous parler face à face ou au téléphone, alors que ces derniers temps nous avons tendance à communiquer de plus en plus par SMS. De plus, nous trouvons de plus en plus confortable de communiquer via des canaux comme SMS, WhatsApp ou Viber, chacun plus ou moins populaire selon l'endroit où vous vous trouvez dans le monde. En conséquence, les entreprises doivent s'adapter et fournir différents moyens de communication pour leurs clients et leurs employés.

C'est là que les chatbots sont utiles. Les chatbots peuvent fonctionner 24h / 24 et 7j / 7, sont parfaits pour gérer les tâches répétitives et peuvent fournir une forme de communication sans file d'attente. Un chatbot bien conçu peut gérer une grande partie de la communication avec vos utilisateurs tout en laissant vos employés formés gérer des scénarios plus complexes ou uniques.

Dans cet article, nous allons étudier la construction d'un chatbot avec NativeChat Twilio et SMS. Nous commencerons par un aperçu de la façon dont tout cela fonctionne, passons par la configuration requise, puis nous ajouterons la gestion des questions et réponses simples, et enfin, nous créerons une conversation étape par étape qui guidera un utilisateur pour terminer un

Explication: Fonctionnement

NativeChat est utilisé pour définir un chatbot – le type de questions et réponses qu'il doit traiter et pour créer tous les flux de conversation étape par étape. [19659003] Twilio est utilisé comme connecteur qui transfère les messages de / vers SMS vers / de NativeChat .

Plus en détail:
Lorsqu'un utilisateur envoie un message SMS (1), Twilio transfère ce message à NativeChat (2). NativeChat analyse ensuite le message, prépare une réponse et envoie la réponse (3) à l'utilisateur via Twilio (4).

Configuration

Présentation

] Pour configurer le workflow ci-dessus, nous devons effectuer une configuration à la fois dans Twilio et NativeChat.
Pour ce faire, procédez comme suit: Ste

1. Twilio — Configuration du service de messagerie
2. NativeChat — Création d'un projet et préparation de la publication
3. Twilio — Configuration du Webhook

Étape 1: Twilio — Configuration du service de messagerie

Inscription

Si vous n'avez pas de compte Twilio, vous devez d'abord vous inscrire à votre compte d'essai Twilio gratuit . Twilio vous donnera une petite balance préchargée pour tester la fonctionnalité de Twilio.

Tableau de bord

Ensuite, vous devez vous rendre sur votre Console Dashboard qui est votre lieu de recherche pour trouver les numéros de téléphone Twilio ou leur utilisation. vos informations d'identification Twilio, vérifier votre utilisation, obtenir un numéro de téléphone et plus encore.

Dans le tableau de bord de la console, vous devez prendre note de SID DE COMPTE et AUTH TOKEN .
Vous pouvez utiliser les boutons de copie SMS programmables => Services .

Pour ajouter un nouveau service, appuyez sur le gros bouton bleu plus.

Ensuite, donnez votre nouveau service un nom comme NativeChat Chatbot Service .
Définissez ensuite le cas d'utilisation sur Chat Bot / Interactive 2-Way .

Create New Messaging Service  » title= »create-new-messaging-service » class= »img-border »/>

Enfin, vous devez vous diriger vers le service de messagerie -> Numéros et ajouter un numéro Twilio compatible SMS .

Si vous n'avez pas encore de numéro Twilio compatible SMS, vous pouvez appuyer sur le bouton plus bleu et sélectionner Acheter un numéro .

Une fois que vous avez un numéro Twilio compatible SMS, cliquez sur le lien Ajouter un numéro existant et sélectionnez le numéro que vous souhaitez utiliser.

Faites une copie de votre numéro SMS Twilio , car vous en aurez besoin pour configurer votre projet NativeChat.

Étape 2: NativeChat — Projet et publication

Inscrivez-vous

Si vous ne le faites pas ' t avoir un compte NativeChat, vous devez créer un compte d'essai gratuit .

Créer un projet

À partir de la console NativeChat créez un nouveau projet de chatbot.
Choisissez Bot vide définissez le nom sur ACME Ride et appuyez sur Créer un bot .

Publication des comptes d'essai

Si vous utilisez un compte d'essai il est fort probable que la fonctionnalité Twilio ne sera pas activée pour vous dès la sortie de la boîte.

Mais ne vous inquiétez pas, cela peut être activé assez facilement.
Accédez à l'onglet Publication et appuyez sur le lien Contactez-nous .

Ceci vous amènera à notre page Contactez-nous .

Remplissez-en quelques-uns détails et dites-nous que vous souhaitez utiliser le canal Twilio et qu'un membre de notre équipe le permettra pour vous.

Publier

Une fois que le Twilio Channel aura été activé pour vous, accédez à l'onglet Publication et appuyez sur Publier dans le segment Twilio .

Saisissez le SID du compte et le AUTH TOKEN de Tableau de bord de la console Twilio .
Ensuite, pour le numéro de téléphone indiquez votre numéro SMS Twilio à partir de votre service de messagerie Twilio, puis appuyez sur le bouton Mise à jour .

URL de Webhook

Enfin, copiez l'URL de Webhook fournie .

Étape 3: Twilio — Configuration de Webhook [19659012] URL du webhook

Retournez à la console Twilio.

1. Accédez à la page Paramètres du service de messagerie
2. Sélectionnez ENVOYER UN WEBHOOK INCOMING_MESSAGE WEBHOOK .
3. Collez le WebhookUrl dans DEMANDER UNE URL
4. Enregistrez

Premier test

Sur votre téléphone portable, ouvrez votre application SMS et dites "Salut" sur votre numéro SMS Twilio. En réponse, vous devriez obtenir quelque chose comme ceci:

Et juste comme ça, nous avons réussi à configurer à la fois NativeChat et Twilio pour permettre à l'utilisateur de communiquer avec notre chatbot via SMS.

Le Scénario — Service de taxi

Maintenant que nous avons une configuration qui fonctionne, il est temps pour nous de faire quelque chose d'utile à notre chatbot.

Dans le cadre de cet article, nous allons construire un chatbot pour une compagnie de taxi. Il permettra aux utilisateurs de poser quelques questions sur les services offerts et de les accompagner dans une conversation pour réserver un taxi. Pour réserver un trajet en taxi, le chatbot posera quelques questions à l'utilisateur – comme les lieux de prise en charge et de restitution, la date / l'heure et le type de service dont il a besoin – et enfin, il enverra la demande de réservation à un serveur. [19659005] Ajouter un exemple de Q&R

Chaque chatbot devrait être capable de répondre à des questions utiles. Tels que:

 Q: Avez-vous des voitures électriques?
R: Notre entreprise est soucieuse de l'environnement. Toutes nos voitures sont électriques ou hybrides.

 Q: Quel type de voitures proposez-vous?
R: Nous vous proposons:
Régulier (4 passagers, 2 valises)
TaxiXL (6 passagers, 4 valises)
VIP (3 passagers, 3 valises, grand confort)

Il s'agit toujours d'interactions en deux étapes:

• (1) L'utilisateur pose une question
• (2) Le chatbot répond par une réponse
• (-) Aucun suivi requis

Former un chatbot à répondre aux questions est assez simple.
Tout cela se fait à partir de la page Répondre à la question .

Vous pouvez trouver la page Répondre à la question de deux manières:

• À partir du Tableau de bord accédez à Réponse aux questions
• Sélectionnez l'onglet Formation puis sélectionnez Réponse aux questions

Instructions

Ouvrez le Page de réponse à la question .
Tout d'abord, nous devons créer une nouvelle catégorie pour contenir toutes nos questions et réponses.
Appuyez sur le bouton + Ajouter une catégorie définissez le nom de la catégorie sur QnA et appuyez sur le bouton Créer une catégorie .

Maintenant, nous pouvons ajouter nos questions et réponse dans la catégorie QnA .

Appuyez sur le bouton + Ajouter une question et définissez les champs suivants sur:

• Question: Avez-vous de l'électricité
• Nom du groupe: voitures électriques
• Réponse: Notre entreprise est soucieuse de l'environnement. Toutes nos voitures sont électriques ou hybrides.

Remarque, le nom de groupe est utilisé comme nom pour chaque question et réponse, ce qui est utile lorsque nous devons vérifier les journaux pour voir quelle QnA a été identifiée par le chatbot.

Puis Enregistrer les modifications .

Comme ceci:

Notez que vous pouvez fournir plusieurs expressions pour la question. Cela indique au chatbot qu'il existe de nombreuses façons d'invoquer ce QnA.

De plus, vous pouvez fournir plusieurs réponses. Dans ce cas, le chatbot choisira au hasard l'une des réponses et la renverra à l'utilisateur. De cette façon, le chatbot pourrait répondre à la même question de plusieurs manières.

Ensuite, vous pouvez ajouter une deuxième question, avec les champs suivants:

• Question # 1: Quels services offrez-vous?
• Question n ° 2: Quelles voitures proposez-vous?
• Nom du groupe: service-types
• Réponse: Nous vous proposons:
  Régulier (4 passagers, 2 valises)
  TaxiXL (6 passagers, 4 valises)
  VIP (3 passagers, 3 valises, grand confort)

Et Enregistrer les modifications .

Test

Enfin, nous pouvons tester nos questions. [19659003] Ouvrez votre client SMS et demandez:

• utilisez-vous des voitures électriques?
• quel type de services offrez-vous?

Test avec NativeChat

Vous pouvez également tester votre chatbot dans le portail NativeChat, avec la fenêtre de test intégrée.

Notez que la partie visuelle du chatbot peut être légèrement différent, car il est utilisé pour tester les chatbots basés sur le Web. Par exemple, un chatbot basé sur le Web peut afficher des boutons cliquables, tandis que votre client SMS ne peut afficher que des boutons sous forme de texte brut.
Cependant, cela devrait être parfaitement bien pour tester que le flux fonctionne comme prévu.

Essayons. Accédez à la fenêtre de test qui se trouve sur le côté droit et envoyez des messages comme:

• Quels types de voitures avez-vous?
• Avez-vous des voitures électriques?

Et le chatbot doit répondre avec une réponse pertinente.

Que pouvons-nous envoyer / recevoir par SMS

Avant de passer à la création d'une étape par étape une conversation en plusieurs étapes pour permettre à un utilisateur de réserver un trajet, nous devrions passer en revue les possibilités et les limites d'un chatbot basé sur SMS.

L'utilisateur peut envoyer par SMS:

• Texte – celui-ci est plutôt évident
• Dates et heures – le chatbot peut extraire la date / l'heure de l'entrée utilisateur, il peut gérer de nombreux formats comme: 20-juin-2020 demain ou en 30 minutes
• Fichiers – tous les documents ou images, le chatbot peut même valider le contenu d'une image (c'est-à-dire qu'il pourrait vérifier si t il ressemble à un reçu)
• Emplacement actuel – l'utilisateur peut envoyer son emplacement actuel, mais cela ne fonctionnera pas avec l'emplacement en direct

Le chatbot en retour peut envoyer:

• Texte
• Images – sous forme d'images / sous forme de liens
• Fichiers – sous forme de liens

Les clients SMS ne peuvent pas afficher d'éléments d'interface utilisateur conversationnels, comme: [19659074] Boutons

Ajouter une conversation de réservation

Maintenant, amusons-nous et construisons une conversation étape par étape cela aidera nos utilisateurs à réserver un taxi.

Le chatbot doit demander à l'utilisateur:

• les lieux de prise en charge et de restitution
• le jour et l'heure de la prise en charge
• un type de voiture qu'ils veulent
• comment ils ont l'intention de payer: en espèces ou par carte – l'hypothèse est que le paiement doit être effectué avec le conducteur, et que le conducteur devrait avoir un terminal de carte de travail pour les paiements par carte .

Enfin, le chatbot doit envoyer la réservation au serveur et fournir à l'utilisateur un numéro de confirmation.

Créer et configurer une nouvelle conversation

Chaque fois que j'ai besoin d'ajouter une nouvelle conversation, j'aime commencez par créer une nouvelle conversation avec un message simple comme «Bonjour du nom de la conversation». De cette façon, je peux rapidement câbler toutes les parties importantes et tester que la conversation se déclenche comme prévu. Une fois que je suis satisfait de cela, je peux revenir à la conversation et commencer à travailler sur le flux de conversation.

Créer une conversation

Les conversations étape par étape sont définies dans JSON sur lequel nous pouvons travailler sur la page Cognitive Flow .

La page Cognitive Flow est livrée avec un éditeur Monaco intégré, qui est comme tout autre IDE puissant. Vous avez accès à des extraits de code intégrés (commencez simplement à taper conv et l'éditeur vous montrera une liste d'options), basé sur le contexte IntelliSense (appuyez sur CTRL + Espace et vous verrez une liste des propriétés pertinentes et extraits de code) mise en forme automatique (chaque fois que vous enregistrez votre code, cela corrigera la mise en forme et l'indentation), les faits saillants des erreurs de syntaxe et la plupart des fonctionnalités que vous attendez d'un IDE comme Visual Studio Code (mettez un mot en surbrillance, appuyez sur CMD + D ou CTRL + D plusieurs fois et vous pouvez utiliser la fonction d'édition multiple.)

La structure entière JSON est divisée en trois paramètres:

• conversations —C'est ici que nous définissons les conversations étape par étape
• paramètres —paramètres globaux pour le chatbot
• commandes —utilisés pour définir les expressions que les utilisateurs doivent dire pour se déplacer à la page suivante ou redémarrez la conversation

Ajoutons une nouvelle conversation à "conversations" que nous appellerons "book-ride" .
Pour ce faire, nous devons créer une nouvelle ligne après la ligne deux (c'est ici que nous commençons à définir la propriété "conversations" ).
La façon la plus simple de le faire est d'aller à la ligne deux et d'appuyer sur CTRL + Entrée (sous Windows) ou CMD + Entrée (sur macOS).

Ensuite, nous devons ajouter le code de notre nouvelle conversation. Commencez à taper conv – cela affichera un certain nombre d'extraits de code – et sélectionnez conversation-goal et appuyez sur Entrée. Cela générera l'extrait de code suivant pour vous:

 "conversation-name": {
  "type": "objectif",
  "étapes": [
    
  ]
}

Maintenant, changez simplement "conversation-name" en "book-ride" et ajoutez une virgule à la fin de cet extrait de code. Comme ceci:

 "book-ride": {
  "type": "objectif",
  "étapes": [
    
  ]
},

Ensuite, nous devons ajouter une étape de message qui dira "Bonjour de la librairie." Allez dans le tableau des étapes et commencez à taper stme et sélectionnez step- message . Ensuite, définissez le texte du message sur "Bonjour de la librairie". Le début de votre code JSON devrait ressembler à ceci:

 {
  "conversations": {
    "tour de livre": {
      "type": "objectif",
      "étapes": [
        {
          "type": "message",
          "messages": [
            "Hello from book-ride"
          ]
        }
      ]
    },
    "Bienvenue": {
... 

Comment – Vidéo

Voici comment je fais cela:

Déclencheur de conversation [19659003] Ensuite, nous devons indiquer au chatbot à quel moment déclencher la conversation book-ride .
Pour ce faire, nous devons configurer Déclencheurs de conversation qui sont un ensemble d'expressions, comme "J'ai besoin d'un taxi" ou "Réserver un trajet" – qui sont liés à la conversation du livre-tour .

1. Accédez à l'onglet Formation puis à Déclencheurs de conversation

2. Appuyez sur le bouton [+ Add new]

3. Réglez Nom de la conversation sur tour du livre

4. Ajouter Expressions de déclenchement :

   1. Promenade en livre
   2. Taxi en taxi
   3. Commander un taxi
   4. Besoin de rouler

5. Enregistrer les modifications

Le déclencheur de conversation devrait ressembler à ceci:

Test

Maintenant, nous pouvons tester le chatbot avec des expressions comme:

• Réserver un trajet
• Je veux commander un taxi
• J'ai besoin d'un trajet

Améliorer la compréhension du chatbot

À ce stade, le chatbot devrait être en mesure de réagir aux expressions ci-dessus et de démarrer la conversation book-ride pour aider les utilisateurs à réserver leur taxi . L'ensemble d'expressions déclenchantes devrait évoluer avec le temps.

À mesure que votre chatbot évolue, vous devez continuer à les mettre à jour pour vous assurer que votre chatbot peut gérer la plupart des expressions de l'utilisateur.

Il est important de comprendre ce que La PNL est, comment cela fonctionne et comment optimiser votre formation de chatbot. La compréhension de ces concepts vous aidera à créer des chatbots avec une meilleure compréhension de la saisie des utilisateurs. Vous pouvez commencer avec les deux articles suivants:

Implémenter le flux de conversation

Génial, maintenant que le chatbot sait quand démarrer la conversation book-ride il est temps pour nous de lui dire comment pour gérer cette conversation.

Demander le lieu de prise en charge (adresse de)

Le chatbot doit d'abord demander le lieu de prise en charge.

Pour ce faire, nous devons utiliser une question étape et souvenez-vous de la réponse de l'utilisateur en tant qu'entité adresse de .

Les entités sont comme des variables. Ce sont des espaces réservés pour que le chatbot se souvienne des valeurs qui ont été fournies.

Votre chatbot ne demandera que les entités pour lesquelles il n'a pas les valeurs.

Retournez au Flux cognitif page et supprimez l'étape de message de book-ride .

De l'intérieur du tableau étapes commencez à taper stq et sélectionnez étape-question ]. Vous devez obtenir l'extrait de code suivant:

 {
  "type": "question",
  "entité": "nom-entité",
  "type d'entité": "",
  "messages": [
    "How to ask for entity?"
  ]
}

Définissez les champs suivants sur:

• entité à adresse-de – le chatbot stockera la réponse ici
• type d'entité à Texte – nous disons au chatbot que nous nous attendons à ce que l'adresse de soit un texte libre
• messages à Où avez-vous besoin du taxi – c'est le message que le chatbot affichera à l'utilisateur

Enregistrez le code.

Code

La conversation book-ride devrait ressemble à ceci maintenant:

 "book-ride": {
  "type": "objectif",
  "étapes": [
    {
      "type": "question",
      "entity": "address-from",
      "entity-type": "Text",
      "messages": [
        "Where do you need the taxi from?"
      ]
    }
  ]
},

Comment – Vidéo

Voici comment je l'ai fait étape par étape:

Test [19659003] Maintenant, lorsque vous testez la conversation mise à jour, le chatbot devrait vous poser la question d'adresse de mais il ne dira rien une fois qu'il aura reçu l'adresse. Comme ceci:

Demander un lieu de dépôt (adresse à)

Maintenant, nous devons ajouter une autre étape de question pour demander le lieu de dépôt, et nous devons nous en souvenir dans une entité appelée adresse à .

Pour ce faire, accédez à la parenthèse fermante de la première étape, ajoutez une virgule et commencez à taper stq et sélectionnez étape-question .

Définissez ensuite les propriétés suivantes sur:

• entité sur adresse-adresse
• ] type d'entité à Texte
• messages à Où allez-vous?

Et enregistrez le code. [19659003] Code

La conversation de livre-tour devrait ressembler à ceci maintenant:

 "livre-tour": {
  "type": "objectif",
  "étapes": [
    {
      "type": "question",
      "entity": "address-from",
      "entity-type": "Text",
      "messages": [
        "Where do you need the taxi from?"
      ]
    },
    {
      "type": "question",
      "entité": "adresse à",
      "type d'entité": "Texte",
      "messages": [
        "Where are you going to?"
      ]
    }
  ]
},

Test

Maintenant, lorsque nous testons book-ride le chatbot vous demandera d'abord l'adresse de puis la adresse à . Comme ceci:

Demander la date et l'heure de la prise en charge

Ensuite, nous devons demander à l'utilisateur quand il souhaite prendre le taxi.
Pour organiser une collecte, le chatbot doit demander la date et l'heure.

Ajoutez une nouvelle étape de question pour demander la date et rappelez-vous la réponse dans la collecte -date avec les champs suivants:

• entité à date de prise en charge
• type d'entité à Date
• messages à Quand avez-vous besoin de la balade?

Ajoutez ensuite une autre étape de question pour demander l'heure, et rappelez-vous la réponse en heure de prise en charge en utilisant les champs suivants:

• entité à heure de prise en charge
• entité- tapez à Heure
• messages à Quelle heure?

Notez que cette fois, nous utilisons Date et Heure comme notre Types d'entité . Qui sont conçus pour gérer les formats de date et d'heure d'une manière que nous parlons. Vous pouvez donc fournir la date en disant «14 juillet» ou «Demain» ou même «La semaine prochaine vendredi», et pour le temps, vous pouvez dire "à 15 heures" ou "minuit".

Et enregistrez le code.

Code

Les deux étapes supplémentaires doivent ressembler à ceci:

 {
      "type": "question",
      "entité": "date de retrait",
      "type d'entité": "Date",
      "messages": [
        "When do you need the ride for?"
      ]
    },
    {
      "type": "question",
      "entité": "heure de prise en charge",
      "type d'entité": "Heure",
      "messages": [
        "What time?"
      ]
    }

Le flux date / heure

Ce qu'il y a de bien avec l'utilisation de la date et de l'heure, c'est que le chatbot peut extraire ses valeurs du milieu d'une phrase.
Ainsi, lorsque l'utilisateur dit "Reprenez-moi au quart d'heure", le chatbot extraira l'heure et la formatera 12:15 .

De plus, en utilisant la date et l'heure ensemble signifie qu'en fonction de ce que dit l'utilisateur, le chatbot peut gérer la date / l'heure de prise en charge en une ou deux étapes.

Par exemple, si l'utilisateur dit: "Je veux un taxi pour demain" – alors le chatbot doit poser une question de suivi pour obtenir l'heure.

Cependant, lorsque l'utilisateur dit quelque chose comme: "Ce vendredi à 15 heures" ou "Dans une demi-heure" – alors il n'y a pas besoin de la question de suivi, car le chatbot peut extraire les deux date de prise en charge et heure de prise en charge en une seule étape.

Test

Maintenant, vous devriez pouvoir tester la conversation mise à jour, et le chatbot devrait vous demander la date et l'heure de la réservation. Comme ceci:

Fuseau horaire utilisateur

Chaque fois que nous devons demander du temps à l'utilisateur, nous devons configurer notre chatbot pour utiliser le temps de notre utilisateur

Cela peut être fait en ajoutant les paramètres "use-user-timezone": true à .
Vous pouvez trouver les paramètres au bas de la Cognitive Flow json .

Mettez à jour les paramètres pour qu'ils ressemblent à ceci:

 "paramètres": {
  "invalides-réponses": [
    "I am not sure I understood what you said."
  ],
  "échec général": [
    "We are experiencing technical difficulties at this moment."
  ],
  "messages-de-conversation-antérieurs": [
    "I am going back to the {{ conversationDisplayName }} now."
  ],
  "use-user-timezone": true
}, 

Débogage du flux

Maintenant que nous avons un chatbot qui fonctionne avec quatre questions, vous vous demandez probablement comment vous assurer que nous obtenons les bonnes données et que le chatbot comprend ce que nous pensons qu'il devrait. [19659003] Il existe deux façons de vérifier ce qui se passe:

• Test du débogage Chatbot
• Étape du message temporaire

Test du débogage Chatbot

La fenêtre de test NativeChat intégrée possède un onglet Débogage . Il vous permet de voir ce que l'utilisateur a dit et ce que le chatbot a compris.

Par exemple, si vous dites: «Commandez un taxi demain à 7 h», puis passez au débogage ] onglet et développez Compréhension – vous devriez voir quelque chose comme ceci:

D'ici, nous pouvons voir:

(1) – le chatbot reconnu:

• conversation
• heure de prise en charge – avec Heure qui lui est attribuée
• date de prise en charge —Avec Date qui lui est attribuée

(2) —la Conversation est book-ride avec 66% de confiance

(3) —L'heure est 07:00

(4) —La date est est 2020.06.17

L'onglet Débogage donne beaucoup d'informations, ce qui nous aide à comprendre ce que le chatbot comprend et quelles entités sont mises à jour. Vous devriez vérifier cette page chaque fois que vous travaillez avec de nouveaux types d'entités.

Vidéo

Voici un bref enregistrement de moi utilisant le chatbot et vérifiant la compréhension du chatbot pour chaque étape. [19659003]

Étape de message temporaire

Nous pouvons également afficher les valeurs d'entité dans une étape de message.

Dans Flux cognitif lorsque vous commencez à taper stme et choisissez step-message vous devriez obtenir l'extrait de code suivant:

 {
  "type": "message",
  "messages": [
    "Your message"
  ]
}

Vous pouvez fournir votre propre message dans la propriété messages . Ainsi, l'étape ci-dessus dirait "Votre message", chaque fois que le chatbot arriverait à ce stade.

Si nous voulons afficher la valeur d'une entité, nous devons utiliser { {}} interpolation. Pour afficher l'heure de prise en charge nous avons besoin de quelque chose comme ceci:

 {
  "type": "message",
  "messages": [
    "Pick up Time: {{pick-up-time}}"
  ]
}

Notez que messages est un tableau qui nous permet de fournir de multiples façons au chatbot de répondre.
La façon dont le chatbot utilise chaque chaîne peut vous surprendre. Par exemple, si nous avons un message comme:

 "messages": [
	"One", "Two", "Three"
]

Vous pourriez vous attendre à ce qu'il dise: (Un) (Deux) (Trois) .
Alors que le chatbot choisira au hasard l'une des chaînes et l'affichera à l'utilisateur. Par exemple, vous pouvez obtenir: (Two)

Pour que le chatbot affiche chaque chaîne, nous devons utiliser un tableau de tableaux, comme ceci:

 "messages": [
  [
		"One", "Two", "Three"
  ]
]

De cette façon, le chatbot comprendra qu'il doit afficher toutes les chaînes.

Accédez à la fin de la conversation book-ride ajoutez une nouvelle étape de message (vous pouvez utiliser stme => stem-message extrait de code) et mettez à jour les messages pour qu'ils ressemblent à ceci:

 {
  "type": "message",
  "messages": [
    [
      "Address From: {{address-from}}",
      "Address To: {{address-to}}",
      "Pick up Date: {{pick-up-date}}",
      "Pick up Time: {{pick-up-time}}"
    ]
  ]
}

Enregistrez le code.

Notez que l'étape du message sera affichée chaque fois que le chatbot atteindra / dépassera cette étape.
Donc, si nous avons encore 2-3 étapes dans cette conversation, le chatbot affichera le même message chaque fois que l'utilisateur fournira une nouvelle entrée.

Vous pouvez en savoir plus sur le flux de conversation et comment le contourner à partir de le didacticiel .

Test

Testons la conversation mise à jour.

Une fois que vous avez atteint la fin de la conversation, vous devriez voir quelque chose comme ceci:

Entités

Avant de créer les deux prochaines étapes de question, nous devons parler de Types d'entité .

Par défaut, NativeChat peut gérer les types d'entité suivants . : Texte Date Heure Numéro Fichier Emplacement ] et Confirmation . Cela signifie que lorsqu'un chatbot voit quelque chose qui ressemble à un numéro – par exemple lorsque l'utilisateur dit: "J'ai besoin de 3 sièges" – il peut automatiquement l'attribuer à un Number entity.

To help our chatbot understand our users better, we can create our own Entity Types—that are relevant to our chatbot.

Payment Method

For example, our chatbot should be able to understand that when our users say "Cash" or "Card," they are providing it with the payment method.

To create a new Entity Type:

• go to the Training tab, then select Entities
• press the + Add new button
• set the name of the entity to PaymentMethod
• keep the Training data source as Static—since we only have two values that we want to use, we can provide them manually
• press the Create button

Now, we need to provide the entity values.

• press the + Add new button—to add the first value
• set the value to Cash
• Save changes
• add another value
• set the value to Card
• set the synonym to Credit
• Save changes

And just like that you've created a new type (PaymentMethod), which the chatbot should be able to recognize—when the user says "Cash" or "Card."

Synonyms allow us to provide other ways to recognise the same entity value.

In our example, saying Card or Credit will both match to Card value.

Test

You can test the new type from the built-in NativeChat test window.

Just switch to the Understanding taband type "I have a card and some cash," which should highlight Card and Cast with PaymentMethod next to each of them.

Video

Here is how you can do the whole thing in one go:

Service Type

Next, we should add an Entity Type to let the user select a type of service they want.

However, this time instead of typing all the values manually, we will pull all the values from https://demoapis.com/sample/taxi/service-typeswhich returns the following values:

[
  {
    "name": "Standard",
    "alt": "Regular",
    "rate": 1.5
  },
  {
    "name": "TaxiXL",
    "alt": "Minivan",
    "rate": 3.2
  },
  {
    "name": "VIP",
    "alt": "Limo",
    "rate": 9.9
  }
]

To do that:

• go to the Entities page
• add new entity
• set the name to ServiceType
• change the Training data source as Dynamic—as we want to dynamically load all the values
• set Endpoint URL to https://demoapis.com/sample/taxi/service-types
• set Value template to {{name}}—this is how we tell NativeChat that it should use the name property for the training
• set Synonym templates to {{alt}}—this is how we tell NativeChat that it should use the alt property for the synonyms training
• press the Create button

The Request configuration should look like this:

The ServiceType should display Entity values—StandardTaxiXLand VIP—and the Metadata for each item, like this:

Test

Now, you should be able to test ServiceType with Understanding by saying: I am interested in Minivan or VIP.
As a result Minivanand VIP should be matched, while Minivan should be linked to TaxiXL. Like this:

How to Pay

Great!!! We are only two questions away from booking a taxi for our customers.

Let's start with the easy one, and ask our users how they would like to pay.

Just like in the previous steps, we need to add a new question stepbut this time we will use a custom entity type PaymentMethodand then instruct the chatbot to display the available options.

Create a new question step at the end of the conversation, and set the following properties:

• entity to payment-method
• entity-type to PaymentMethod
• messages to How would you like to pay?

Display Available Payment Methods

Now, to instruct our chatbot to automatically display available payment methods, we need to add the display property with type set to quick-reply.

Go to the closing ] from messagesadd a , and start typing di and choose display.
Then start typing ty and select type.
Finally, start typing qu and choose quick-reply.

Code

The Payment Method question step should look like this:

{
  "type": "question",
  "entity": "payment-method",
  "entity-type": "PaymentMethod",
  "messages": [
    "How would you like to pay?"
  ],
  "display": {
    "type": "quick-reply"
  }
}

Test

Now, when we test the chatbot again, the chatbot asks the user for the preferred payment method and also displays the available values—Card and Cash. Like this:

Get Quotes + What Type of Service

For the final question, we should ask our customers to pick the type of service they need.

In order for the customer to make an informed decision, the chatbot should request quotes from the server, and use the carousel display type, to show each available service with the price.

Quotes Service

To get the quotes, we can call demoapis.com/sample/taxi/quotes service, provide from and to query params: https://demoapis.com/sample/taxi/quotes?from=home&to=officeand we should get a response like this:

// https://demoapis.com/sample/taxi/quotes?from=home&to=office
[
  {
    "name": "Standard",
    "quote": 6.9
  },
  {
    "name": "TaxiXL",
    "quote": 14.72
  },
  {
    "name": "VIP",
    "quote": 45.54
  }
]

Question Step

First, add a new question step with the following fields set to:

• entity to service-type
• entity-type to ServiceType
• messages to What type of service would you like?

Next, we need to add display with the configuration for a Carousel with data coming from a web service, like this:

"display": {
  "type": "carousel",
  "data-source": {
    "endpoint": "https://demoapis.com/sample/taxi/quotes?from={{$encodeURI address-from}}&to={{&encodeURI address-to}}"
  },
  "template": {
    "title": "{{name}}",
    "subtitle": "{{$currency quote 'EUR'}}"
  },
  "button-text": "Select",
  "title": "Show Services"
}

If you are curious, here is a quick explanation of each property:

• data-source—used to provide the parameters to call our service

  • Note that we interpolate the value of address-from and address-to
  • Additionally, we use $encodeURI to convert the address text to a URI-safe format

• template—used to pinpoint the properties used to display each item

  • title—the main text field value
  • subtitle—the supporting text field value

• button-text to Select—this property is used for web-based chatbots to display a select button under each item

• title to Show Quotes—this property is used for web-based chatbots when carousel cannot be displayed, but a list picker is available

Code

The Service Type question step should look like this:

{
  "type": "question",
  "entity": "service-type",
  "entity-type": "ServiceType",
  "messages": [
    "What type of service would you like?"
  ],
  "display": {
    "type": "carousel",
    "data-source": {
      "endpoint": "https://demoapis.com/sample/taxi/quotes?from={{$encodeURI address-from}}&to={{&encodeURI address-to}}"
    },
    "template": {
      "title": "{{name}}",
      "subtitle": "{{$currency quote 'EUR'}}"
    },
    "button-text": "Select",
    "title": "Show Services"
  }
},

Save your code and test.

Test

This time, the chatbot asks the user for the type of service, and presents three quotes for each type. Like this:

Web

If you try the same step in the web client, the chatbot will display the carousel like this:

Send Booking Request to the Server

Now that the chatbot collected all the entities from the user, all we have left is to send the request to the backend, book the service, and respond with a booking confirmation.

Book Service

To do that, we need to make a POST request to https://demoapis.com/sample/taxi/book with Body properties:

• from—to be provided by address-from
• to—to be provided by address-to
• type—to be provided by service-type
• payment—to be provided by payment-method
• date—to be provided by pick-up-date
• time—to be provided by pick-up-time

In response, the service will return a JSON object like this:

{
  "bookingRef": "S01575",
  "from": "home",
  "to": "office",
  "service": "Standard",  
  "quote": 10.5,
  "payment": "Card",
  "date": "19-Jun-2020",
  "time": "09:16 PM"
}

Webhook Step

To make such a request, we need to use a Webhook step.

At the end of the conversation, start typing stwe and pick step-webhook.
You should be presented with the following code snippet:

{
  "type": "webhook",
  "data-source": {
    "endpoint": "https://",
    "method": "POST",
    "headers": {
      "header name": "header value"
    },
    "payload": {
      "key": "value"
    }
  }
}

First, let's configure the data-sourceto call the book service.
Update the following properties:

• set endpoint to https://demoapis.com/sample/taxi/book

• remove headers

• update payload to include all the entities the chatbot collected from the user:

  "payload": {
    "from": "{{address-from}}",
    "to": "{{address-to}}",
    "type": "{{service-type}}",
    "payment": "{{payment-method}}",
    "date": "{{pick-up-date}}",
    "time": "{{pick-up-time}}"
  }
  

Next, we need to provide a response to the user.
To do that we need to:

• capture the result in an entity—after the line with "type": "webhook", add a new line with:
  "entity": "book-response",
  this instructs the chatbot to save the result of the POST request in book-response.

• display a confirmation message— after the closing } for data-sourceadd a , and then a messages property like this:

  "messages": [
    [
    "OK, the {{service-type}} service is booked for you. Your reference number is {{book-response.bookingRef}}",
    "The estimated price of {{$currency book-response.quote 'EUR'}} to be paid directly to the driver by {{payment-method}}.",
    "Your driver will pick you up on {{$date pick-up-date pick-up-time 'DD-MMM [at] h:mm A'}}"
    ]
  ]

Code

The Webhook step should look like this:

{
  "type": "webhook",
  "entity": "book-response",
  "data-source": {
    "endpoint": "https://demoapis.com/sample/taxi/book",
    "method": "POST",
    "payload": {
      "from": "{{address-from}}",
      "to": "{{address-to}}",
      "type": "{{service-type}}",
      "payment": "{{payment-method}}",
      "date": "{{pick-up-date}}",
      "time": "{{pick-up-time}}"
    }
  },
  "messages": [
    [
      "OK, the {{service-type}} service is booked for you. Your reference number is {{book-response.bookingRef}}",
      "The estimated price of {{$currency book-response.quote 'EUR'}} to be paid directly to the driver by {{payment-method}}.",
      "Your driver will pick you up on {{$date book-response.date book-response.time 'DD-MMM [at] h:mm A'}}"
    ]
  ]
}

Save your code and test.

Test

Finally, when the user provides the chatbot with all the necessary information, the chatbot should book the taxi, and display a confirmation message. Like this:

Final Word

And just like that, we were able to build an SMS chatbot.

The chatbot is capable of handling a couple of FAQs and also guide a user through a taxi booking service.

Next Steps

There is a lot more that we could do with this service, like make use of user location to provide a pick-up location, respond with acknowledgements to user input, or implement input validation.

You can learn more about building chatbots from our comprehensive NativeChat Tutorial.

(Bonus)—Geolocation

As reward for making it all the way to the end of this tutorial, I will show you how to make use of the user location to find a nearby address.

This can be done in two steps, which should be added to the beginning of the whole conversation.

Step 1

First, I use the following Question step:

{
  "type": "question",
  "entity": "location",
  "entity-type": "Location",
  "conditions": [
    "{{$has location}}"
  ]
},

Note the following:

• the entity-type is set to Location—this means that when chatbot receives a location object, it will save it in the location entity
• there is no messages property, as this question step is not meant to be displayed to the user—I mean, we could actively ask the user to provide the location, but we don't have to
• we use a conditions property that makes sure that this step is never shown to the user

Step 2

The second step is a Webhook step—which will only be triggered when the chatbot receives a location—which uses Google Maps Geolocation service.

{
  "type": "webhook",
  "entity": "address-from",
  "data-source": {
    "endpoint": "https://maps.googleapis.com/maps/api/geocode/json?latlng={{location.latitude}},{{location.longitude}}&key=YOUR_API_KEY",
    "selector": "$.results[:1].formatted_address"
  },
  "conditions": [
    "{{$has location}}"
  ],
  "messages": [
    "We can send a taxi to {{address-from}}"
  ]
},

Note the following:

• the service uses location.latitude and location.longitude received in the previous step
• the key is not provided. If you want to make this step work, you will need to sign up to Google Maps Geolocation service
• the selector is used to drill down to the first formatted_address returned from the geolocation service
• the conditions property ensures that this webhook step will only be triggered when we receive a location
• the "entity": "address-from" tells the chatbot to save the formatted_address in the address-from entity.
  It is important that this whole step is placed before the question step that asks the user for the pick-up location. Because if the chatbot already has the address-from then this webhook will not be executed

The Whole Code

Here is the whole code for this chatbot:

{
  "conversations": {
    "book-ride": {
      "type": "goal",
      "steps": [
        {
          "type": "question",
          "entity": "address-from",
          "entity-type": "Text",
          "messages": [
            "Where do you need the taxi from?"
          ]
        },
        {
          "type": "question",
          "entity": "address-to",
          "entity-type": "Text",
          "messages": [
            "Where are you going to?"
          ]
        },
        {
          "type": "question",
          "entity": "pick-up-date",
          "entity-type": "Date",
          "messages": [
            "When do you need the ride for?"
          ],
          "reactions": {
            "acknowledgements": [
              "Sure, we can arrange something for {{#if ($has pick-up-time)}} {{$date pick-up-date pick-up-time 'DD-MMM [at] h:mm A'}} {{else}} {{$date pick-up-date 'DD-MMM'}} {{/if~}}"
            ]
          }
        },
        {
          "type": "question",
          "entity": "pick-up-time",
          "entity-type": "Time",
          "messages": [
            "What time?"
          ]
        },
        {
          "type": "question",
          "entity": "payment-method",
          "entity-type": "PaymentMethod",
          "messages": [
            "How would you like to pay?"
          ],
          "display": {
            "type": "quick-reply"
          }
        },
        {
          "type": "question",
          "entity": "service-type",
          "entity-type": "ServiceType",
          "messages": [
            "What type of service would you like?"
          ],
          "display": {
            "type": "carousel",
            "data-source": {
              "endpoint": "https://demoapis.com/sample/taxi/quotes?from={{$encodeURI address-from}}&to={{&encodeURI address-to}}"
            },
            "template": {
              "title": "{{name}}",
              "subtitle": "{{$currency quote 'EUR'}}"
            },
            "button-text": "Select",
            "title": "Show Services"
          }
        },
        {
          "type": "webhook",
          "entity": "book-response",
          "data-source": {
            "endpoint": "https://demoapis.com/sample/taxi/book",
            "method": "POST",
            "payload": {
              "from": "{{address-from}}",
              "to": "{{address-to}}",
              "type": "{{service-type}}",
              "payment": "{{payment-method}}",
              "date": "{{pick-up-date}}",
              "time": "{{pick-up-time}}"
            }
          },
          "messages": [
            [
              "OK, the {{service-type}} service is booked for you. Your reference number is {{book-response.bookingRef}}",
              "The estimated price of {{$currency book-response.quote 'EUR'}} to be paid directly to the driver by {{payment-method}}.",
              "Your driver will pick you up on {{$date pick-up-date pick-up-time 'DD-MMM [at] h:mm A'}}"
            ]
          ]
        }
      ]
    },
    "welcome": {
      "type": "support",
      "steps": [
        {
          "type": "message",
          "messages": [
            "This is a welcome conversation for your chatbot."
          ]
        },
        {
          "type": "conversation",
          "conversation": "help",
          "conditions": [
            "{{$not ($has conversation) }}"
          ]
        }
      ]
    },
    "help": {
      "type": "support",
      "steps": [
        {
          "type": "message",
          "messages": [
            [
              "If you get stuck, you can always restart our conversation by typing 'restart'"
            ]
          ]
        }
      ]
    },
    "restart": {
      "type": "support",
      "steps": [
        {
          "type": "message",
          "messages": [
            "Your conversation is restarted."
          ]
        },
        {
          "type": "conversation",
          "conversation": "welcome"
        }
      ]
    }
  },
  "settings": {
    "invalid-replies": [
      "I am not sure I understood what you said."
    ],
    "general-failure": [
      "We are experiencing technical difficulties at this moment."
    ],
    "previous-conversation-messages": [
      "I am going back to the {{ conversationDisplayName }} now."
    ],
    "use-user-timezone": true
  },
  "commands": {
    "NEXT-PAGE": [
      "Next 5"
    ],
    "RESTART": [
      "restart"
    ]
  }
}