Créez un chatbot Viber avec NativeChat

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 Viber avec NativeChat.

Au cours de la dernière décennie, le paradigme des communications a changé. Nous avions 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 tels que 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 proposer différents moyens de communication à leurs clients et à leurs employés.

C'est là que les chatbots sont utiles. Les chatbots peuvent fonctionner 24h / 24, 7j / 7, sont excellents 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 examinerons la construction d'un chatbot Viber avec NativeChat .

Tout d'abord, nous allons passer par la configuration requise, puis nous ajouterons la gestion des questions et réponses simples, et enfin, nous allons créer une conversation étape par étape qui guidera un

Configuration

Présentation

Pour commencer à travailler avec NativeChat et Viber, nous devons configurer notre environnement de développement en procédant comme suit:

1. Créer un nouveau projet NativeChat
2. Obtenir un proxy Commande
3. Ajouter un canal proxy NativeChat à Viber
4. Exécutez la commande Proxy

Étape 1: NativeChat — Créer un projet

Inscription

Si vous ne l'avez pas un compte NativeChat, vous devez créez un compte d'essai gratuit .

Créer un projet

Depuis la console NativeChat créez un nouveau projet de chatbot.
Choisissez Blank Bot définissez le nom sur ACME Ride et appuyez sur le bouton Create bot .

Étape 2: NativeChat —Get Proxy Command

Une fois le projet créé, vous arriverez au tableau de bord .

Sur le côté droit, vous trouverez la Test Window où se trouve vous pouvez tester votre chatbot au fur et à mesure.

L'une des premières choses que vous verrez est une Proxy Command que nous pouvons utiliser pour tester notre chatbot en dehors de NativeChat, comme avec Viber, Facebook Messenger et Amazon Alexa.

Prenez note de la Proxy Command vous allez l'utiliser dans un instant.

Étape 3: Viber — Ajouter un proxy NativeChat Canal

Vous devez maintenant ajouter le canal proxy NativeChat dans l'application Viber. Le canal proxy s'occupe de la communication entre votre chatbot NativeChat et Viber.

Sur votre appareil mobile, ouvrez l'application Viber accédez à Plus (1) et démarrez le Scanner de code QR (2).

Puis scannez le Code QR .

Remarque, vous pouvez trouver le code QR à l'adresse le canal NativeChat pour la page Viber .

Appuyez sur le bouton Ouvrir maintenant .

Appuyez sur le message .

Étape 4: Viber — Connectez-vous à votre projet

Maintenant que vous avez le canal proxy Viber, vous besoin de le connecter à votre projet NativeChat.

Ceci est fait avec la Proxy Command que vous avez vue à l'étape 2.

Copiez la Proxy Command et exécutez-la dans le Viber Proxy Channel . [19659003]

Remarque n ° 1, vous devrez peut-être vous envoyer par e-mail la commande proxy pour pouvoir y accéder sur votre téléphone mobile, ou vous pouvez utiliser Viber pour Desktop .

Remarque n ° 2, vous ne pouvez avoir qu'un seul projet actif connecté au canal proxy, si vous exécutez une commande proxy à partir d'un autre projet, alors le canal proxy se déconnecte du projet actuel et se connecte au nouveau.

Premier test

Allez à Viber et dites "Salut". En réponse, vous devriez obtenir quelque chose comme ceci:

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

Le scénario – Taxi Service

Maintenant que nous avons une configuration fonctionnelle, il est temps pour nous de faire 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 des questions sur les services offerts, et de les emmener dans une conversation pour réserver une course en taxi. Pour réserver un trajet en taxi, le chatbot posera à l'utilisateur quelques questions – comme les lieux de prise en charge et de dépose, la date / heure et le type de service dont il a besoin – et enfin, il enverra la demande de réservation à un serveur. [19659006] Ajouter un exemple de questions-réponses

Chaque chatbot doit ê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 offrons:
Régulier (4 passagers, 2 valises)
TaxiXL (6 passagers, 4 valises)
VIP (3 passagers, 3 valises, grand confort)

Ce sont toujours des interactions en deux étapes:

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

Formation d'un chatbot à répondre aux questions est assez simple.
Tout est fait à partir de la page Réponse aux questions .

Vous pouvez trouver la page Réponse aux questions de deux manières:

• Depuis le Tableau de bord accédez à Réponse à une question
• Sélectionnez l'onglet Formation puis sélectionnez Réponse à une question

Instructions

Ouvrez le Page de réponse aux questions .
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é voitures?
• Nom du groupe: voitures-électriques
• Réponse: Notre société est soucieuse de l'environnement. Toutes nos voitures sont électriques ou hybrides.

Remarque, le nom du groupe est utilisé comme nom pour chaque question et réponse, ce qui est utile lorsque nous devons vérifier les journaux pour voir quel QnA a été identifié 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'appeler ce QnA.

Vous pouvez également 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 façons.

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

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

Et Enregistrer les modifications .

Test in Viber

Enfin, nous pouvons tester nos questions.

Dans Viber, 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.

Essayons. Allez dans 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 devrait répondre avec une réponse pertinente.

Que pouvons-nous envoyer / recevoir via Viber

Avant de nous lancer dans la construction d'un step-by -step conversation pour permettre à un utilisateur de réserver une course, nous devrions passer en revue les possibilités et les limites d'un chatbot basé sur Viber.

L'utilisateur peut envoyer via Viber:

• Text – celui-ci est assez évidente
• Dates et heure —chatbot peut extraire la date / heure de l'entrée utilisateur, il peut gérer de nombreux formats comme: 20-juin-2020 Demain ou en 30 minutes
• Fichiers —tout document ou image, le chatbot peut même valider le contenu d'une image (c'est-à-dire qu'il pourrait vérifier k si l'image ressemble à un reçu)
• Emplacement actuel – l'utilisateur peut envoyer sa position actuelle, mais cela ne fonctionnera pas avec l'emplacement en direct

Le chatbot en retour peut envoyer: [19659055] Texte

Viber ne peut pas afficher les éléments d'interface utilisateur conversationnels, comme:

• Carrousels —au lieu d'afficher un sélecteur de liste
• Sélecteur de dates [19659118] Ajouter une conversation de réservation

  Amusons-nous maintenant et construisons une conversation étape par étape qui aidera nos utilisateurs à réserver un taxi.

  Le chatbot devrait demander à l'utilisateur:

  • pick-up and drop – hors des lieux
  • jour et 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 – on suppose que le paiement doit être effectué w avec le chauffeur, et le chauffeur doit avoir un terminal de carte fonctionnel 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 un nouveau Conversation

  Chaque fois que j'ai besoin d'ajouter une nouvelle conversation, j'aime commencer par créer une nouvelle conversation avec un message simple comme "Bonjour du nom de la conversation." De cette façon, je peux connecter rapidement tous les parties importantes et vérifiez que la conversation se déclenche comme prévu. Ensuite, une fois que j'en suis satisfait, 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), IntelliSense contextuel (appuyez sur CTRL + Espace et vous verrez une liste des propriétés pertinentes et des extraits de code) mise en forme automatique (chaque fois que vous enregistrez votre code, cela corrigera la mise en forme et l'indentation), les erreurs de syntaxe en surbrillance et la plupart des fonctionnalités que vous attendez d'un IDE comme Visual Studio Code (surlignez un mot, appuyez sur CMD + D ou CTRL + D à quelques reprises et vous pouvez utiliser la fonction d'édition multiple).

  L'ensemble de la structure JSON est divisée en trois paramètres:

  • conversations —C'est ici que nous définissons les conversations étape par étape
  • settings —global settings for the chatbot
  • commands —utilisé pour définir les expressions que les utilisateurs doivent dire pour se déplacer à la page suivante ou redémarrer 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" ).
  Le moyen le plus simple de le faire est d'aller à la ligne deux et d'appuyer sur CTRL + Entrée (sous Windows) ou CMD + Entrée (sous 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 book-ride." 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 book-ride." Le début de votre code JSON devrait ressembler à ceci:

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

  Comment – Vidéo

  Voici comment procéder:

  

  Déclencheur de conversation [19659003] Ensuite, nous devons indiquer au chatbot quand 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 book-ride .

  1. Accédez à l'onglet Training puis à Conversation triggers .

  2. Appuyez sur le bouton [+ Add new]

  3. Réglez Nom de la conversation sur book-ride

  4. Ajouter Expressions de déclenchement :

     1. Book ride
     2. Book taxi
     3. Order taxi
     4. Need ride

  5. Enregistrer les modifications

  Le déclencheur de conversation doit ressembler à ceci:

  

  Test

  Nous pouvons maintenant 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 pouvoir réagir aux expressions ci-dessus et démarrer la conversation book-ride pour aider les utilisateurs à réserver leur taxi . L'ensemble des expressions de déclenchement est quelque chose qui devrait évoluer avec le temps.

  Au fur et à mesure que votre chatbot mûrit, 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. Comprendre ces concepts vous aidera à créer des chatbots avec une meilleure compréhension des entrées utilisateur. Vous pouvez commencer avec les deux articles suivants:

  Implémentation du 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 un lieu de prise en charge (adresse de)

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

  Pour ce faire, nous devrons utiliser une question étape et souvenez-vous de la réponse de l'utilisateur comme entité address-from . Ce sont des espaces réservés pour que le chatbot se souvienne des valeurs fournies.

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

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

  Depuis l'intérieur du tableau steps commencez à taper stq et sélectionnez step-question ]. Vous devriez obtenir l'extrait de code suivant:

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

  Définissez les champs suivants sur:

  • entity to address-from – le chatbot stockera la réponse ici
  • entity-type au Texte —nous disons au chatbot que nous nous attendons à ce que adresse-de soit un texte libre
  • messages à Où avez-vous besoin du taxi from? —c'est le message d'invite 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 address-from mais il ne dira rien une fois qu'il aura reçu l'adresse. Comme ceci:

  

  Demander le 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 address-to .

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

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

  • entity to address-to [19659010] type d'entité à Texte
  • messages à Où allez-vous?

  Et enregistrez le code. [19659003] Code

  La conversation book-ride devrait ressembler à ceci maintenant:

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

  Test

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

  

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

  Ensuite, nous devrions demander à l'utilisateur quand il souhaite prendre le taxi.
  Afin d'organiser un ramassage, le chatbot doit demander à la fois la date et l'heure.

  Ajoutez une nouvelle étape de question pour demander la date, et mémorisez la réponse dans pick-up -date avec les champs suivants:

  • entity to pick-up-date
  • entity-type to Date
  • messages à Quand avez-vous besoin du trajet?

  Ensuite, ajoutez 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 nos Types d'entités . Qui sont conçus pour gérer les formats de date et d'heure d'une manière que nous parlons. Vous pouvez donc indiquer la date en disant "14-juillet" ou "Demain" ou même "Vendredi de la semaine prochaine" et pour l'heure, vous pouvez dire "at 3PM" ou "midnight."

  Et enregistrez le code.

  Code

  Les deux étapes supplémentaires de questions devraient ressembler à ceci:

   {
        "type": "question",
        "entity": "pick-up-date",
        "entity-type": "Date",
        "messages": [
          "When do you need the ride for?"
        ]
      },
      {
        "type": "question",
        "entity": "heure de prise en charge",
        "entity-type": "Heure",
        "messages": [
          "What time?"
        ]
      }
  

  Le flux date / heure

  La chose intéressante à propos de l'utilisation de la date et de l'heure est que le chatbot peut extraire leurs valeurs du milieu d'une phrase.
  Ainsi, lorsque l'utilisateur dit "Ramassez-moi au quart d'heure", le chatbot extraira l'heure et la formatera en 12:15 .

  De plus, en utilisant la date et l'heure ensemble signifie que selon ce que dit l'utilisateur, le chatbot peut gérer la demande de date / 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 pick-up-date et pick-up time 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:

  

  User Time Zone

  Chaque fois que nous avons besoin de demander l'heure à l'utilisateur, nous devons configurer notre chatbot pour utiliser l'heure de l'utilisateur

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

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

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

  Débogage du flux

  Maintenant que nous avons un chatbot fonctionnel 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 y a deux façons de vérifier ce qui se passe:

  • Tester le débogage du chatbot
  • Étape du message temporaire

  Tester le débogage du chatbot

  La fenêtre de test NativeChat intégrée a un onglet Debug . 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 heures du matin", puis passez au Debug ] et développez sur Underestanding —vous devriez voir quelque chose comme ceci:

  

  De là, nous pouvons voir:

  (1) —le chatbot reconnu:

  • conversation
  • heure de prise en charge – avec Heure qui lui a été attribuée
  • date de prise en charge – avec Date qui lui a été attribuée

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

  (3) —l'heure est 07:00

  (4) —la Date est 17.06.2020

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

  Vidéo

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

  Étape de message temporaire

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

  Dans le Flux cognitif lorsque vous commencez à taper stme et que vous 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, ce qui nous permet de fournir plusieurs façons dont le chatbot peut 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"
  ]
  

  On peut s'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.

  Aller à la fin de la conversation book-ride ajouter une nouvelle étape de message (vous pouvez utiliser ] stme => stem-message code snippet), 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 de message sera affichée chaque fois que le chatbot atteindra / 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 fournit une nouvelle entrée.

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

  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 questions, nous devrions parler de Types d'entités .

  Prêt à l'emploi, NativeChat peut gérer les types d'entités 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 l'attribuer automatiquement à un Number entity .

  Pour aider notre chatbot à mieux comprendre nos utilisateurs, nous pouvons créer nos propres Entity Types —qui sont pertinents pour notre chatbot.

  Payment Method

  Par exemple, notre chatbot devrait être capable de comprendre que lorsque nos utilisateurs disent "Cash" ou "Card", ils lui fournissent le moyen de paiement .

  Pour créer un nouveau type d'entité :

  • allez dans l'onglet Training puis sélectionnez Entities .
  • appuyez sur la touche + Ajouter un nouveau bouton
  • définir le nom de l'entité sur PaymentMethod
  • conserver la source de données de formation comme Statique – puisque nous n'avons que deux valeurs que nous voulons utiliser, nous pouvons les fournir manuellement
  • appuyez sur le bouton Créer

  Maintenant, nous devons fournir les valeurs d'entité .

  • appuyez sur le bouton + Ajouter nouveau – pour ajouter la première valeur
  • définissez la valeur sur Cash
  • Save changes
  • add another value
  • définissez la valeur sur Carte
  • définissez le synonyme sur Crédit
  • Enregistrer les modifications

  Et juste comme ça, vous avez créé un nouveau type ( PaymentMethod ), que le chatbot devrait être capable de reconnaître – lorsque l'utilisateur dit "Cash" ou "Card".

  Les synonymes nous permettent de fournir d'autres moyens de reconnaître le même valeur d'entité.

  Dans notre exemple, dire Card ou Credit correspondra tous les deux à la valeur Card .

  Test

  Vous pouvez tester le nouveau type à partir de la fenêtre de test NativeChat intégrée.

  Passez simplement à l'onglet Comprendre et tapez "J'ai une carte et de l'argent liquide" qui devrait mettre en évidence Card et Cast avec PaymentMethod à côté de chacun d'eux.

  Vidéo

  Voici comment faire le tout en une seule fois:

  

  Service Type

  Ensuite, nous devrions ajouter un type d'entité pour permettre à l'utilisateur de sélectionner un type de

  Cependant, cette fois au lieu de taper toutes les valeurs manuellement, nous allons extraire toutes les valeurs de https://demoapis.com/sample/taxi/service-types qui renvoie 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 a button for each available value. 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 a list with 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

  • title to Show Quotes—the name for a button that will display the list of values 

  • button-text to Select—this name for a button used to confirm the selected option

  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:

  

  And when you tap on the Show Services button, you will be presented with options 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 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 a Viber 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"
      ]
    }
  }