Faire un chatbot messenger (avec Chatfuel)

Comment faire un chatbot sans coder ?

Dans nos articles précédents, nous t’ avons présenté des applications pour réaliser aisément des chatbots sans code:
Chatfuel présentation
Manychat présentation

Nous allons réaliser un chatbot pour une agence web avec Chatfuel.
Le but est qu’à ton tour tu puisses réaliser des chatobots et que tu connaisses les différents outils de Chatfuel.

A l’issue de ce tutoriel, tu auras un premier chatbot fonctionnel relié à ton site wordpress et ta page Facebook.

Magnifique n’est-ce pas ?

Tu sauras utiliser plusieurs fonction différentes de Chatfuel, dont recevoir des emails grâce un système de Lead Génération.

Nous allons te présenter:

1/ De quoi ai-je besoin pour créer mon chatbot
2/ Présentation du chatbot à réaliser
3/ Définir le scénario de son chatbot
4/ Tuto réalisation
5/ Teste du chatbot d’une agence web
6/ Comment améliorer son chatbot

1/ De quoi ai-je besoin pour créer mon chatbot

Pour commencer il te faudra:
– Une page Facebook
– Des visuels
– Avoir un compte sur Chatfuel

A/ Pourquoi avoir besoin d’une page Facebook ?

Chatfuel est un système de chatbot créé pour messenger, il nécessite d’être relié à une page pour que vous puissiez tester votre bot ou l’implanter sur votre site.

Tu n’as pas de page ? Pas de panique, tu peux en faire une juste pour essayer et suivre ce tutoriel (j’en ai plusieurs pour ça 😉 ).

B/ Les visuels

Notre bot est tourné vers la conversation, cependant pourquoi se priver d’image ?
Pour présenter et mettre en avant tes services, une image est plus agréable.
Si tu as des vidéos c’est encore mieux !

Pas d’image ?

Pas grave, le site Unsplash regorge de visuel que tu peux utiliser.

C/ Avoir un compte Chatfuel.

Pour créer un chatbot sur Chatfuel il faut avoir un compte dessus.
Heureusement la création et l’utilisation sont gratuites et sans engagements.
Tu n’as pas besoin de rentrer une carte de paiement !

Tu devras juste t’inscrire avec Facebook

2/ Présentation du chatbot à réaliser

Pour notre tuto, nous réaliserons un chatbot pour une agence web qui a plusieurs services:
-Création de chatbot messenger
-Réalisation de campagne Facebook

En plus de ces deux services notre chatbot devra:
-Sensibiliser les gens aux chatbots
-Pouvoir générer des leads et nous les envoyer par email
-Donner nos informations de contact
-Si besoin rediriger vers un humain

Grâce à ces différents besoins, nous pourrons découvrir plusieurs fonctions de Chatfuel.
Par la suite nous verrons comment améliorer notre Chatbot avec des fonction plus poussées.
De plus, notre chatbot tournera 24/7 sur notre page et sur notre site.

chatbot-tutoriel-chatfuel

Niveau architecture interne, nous arriverons à ce résultat, nous te détaillons tout par la suite :p

Sur l’image ci-dessus, les groupes de messages “Welcome message” et “Default message” sont tous deux modifiables mais pas supprimables.

Lorsqu’un internaute utilisera pour la première fois votre chatbot, il tombera d’office sur le bloc “ Welcome message”. Une bonne pratique consiste à expliquer dans ce bloc qu’il s’agit d’un bot.

Le bloc “Default message” prendra le relais à chaque fois qu’un utilisateur enverra un message qui sort du scénario que tu as établi.

Actuellement le large public a encore du mal avec des chatbots, pour cette raison nous avons ajouté la partie de sensibilisation “ Chatbot ?”.

Le but est d’expliquer simplement en quoi cela consiste et quelles sont les avantages et inconvénients.

La section portfolio servira par la suite à promouvoir automatiquement les dernières réalisations (cela fonctionne de la même façon pour des articles de blog).

Maintenant places au concret !

3/ Définir le scénario de son Chatbot

Première étape définir un arbre décisionnel afin de d’avoir les différents trajets utilisateur.
Pour cela rien de bien compliqué, il nous faut une feuille de papier et un stylo (ou une application au choix).

Dans un premier temps listons les blocs dont nous avons besoin et organisons les par parti.
Pour cet exemple nous disposons de 9 blocs répartis en 3 partis plus la partie par défaut avec les welcome et le default message.

tuto-faire-chatobot

Maintenant que tout nos bloc sont listés et organisés en groupe, nous allons faire un schéma pour voir comment ils vont communiquer entre eux.

Pour l’image ci-dessus, nous avons utilisé le site Funnelytics qui permet de réaliser simplement des trajets utilisateurs.
Tu peux aussi faire cette partie sur une feuille blanche.

Sur la partie de gauche nous avons une vue globale du chatbot et des différents trajets possibles.
A gauche tu as une vue spécifique du menu.

Pour un projet de cette taille, cette étape n’est pas forcément nécessaire, cela reste une bonne pratique de la mettre en place.

Comme nous le voyons, nos utilisateurs arrive soit par Facebook soit par notre site, notre objectif d’obtenir un devis ou un contact.

Pour ce faire nous présenterons nos services et nos réalisations.

4/ Tuto réalisation

Une fois que notre plan est défini, il ne nous reste plus qu’à l’appliquer.
Pour ce faire, dans un premier temps nous créons d’abord tous. nos groupes et blocs

Dans un second temps nous remplissons les blocs en suivant le trajet utilisateur.
Nous commencerons d’abord par les deux blocs par défaut.
Dernière étape nous testons notre chatbot.

Dans mon cas je suis arrivé à ce résultat, après libre toi d’organiser ton chatbot d’une autre façon.
Pense aussi qu’il devra être assez clair pour que d’autres puisse y travailler et l’améliorer.

chatbot-organisation

C’est parti pour la deuxième étape qui est la plus chronophage !
Il va falloir remplir tous nos blocs avec du texte et les relier entre-eux.

Welcome-bloc
Menu-bloc

Pour faire notre menu, nous avons intégré deux nouveaux éléments:
-Le typing pour simuler un temps d’écriture ( à utiliser avec précaution car il peut-être frustrant à la longue)
-Le carousel ou “Gallery” afin de présenter nos sections de manière plus sympathique.

Dans notre “Welcome message” les utilisateurs sont avertis qu’en tapant “Menu” il serait redirigé vers ce bloc.

Pour ce faire il va falloir configurer cette option grâce à la partie “ Setup AI”, qui se trouve sur la partie de gauche dans l’interface de Chatfuel.

Une fois dessus, nous configurons des mots-clefs pour différents blocs.
Dans notre exemple nous le ferons que pour contact, email et menu.

Nous recommandons fortement d’aller plus loins afin que tes utilisateurs trouvent plus facilements des réponses lorsqu’ils sortent de ton scénario.

Setup-Ai

Comment relier des blocs entre eux ?

lier-blocs

Pour relier des blocs, tu as deux façons de faire:

-En ajoutant des boutons
-En créant des “Quick reply”

Dans les deux cas la logique est la même.
En bleu tu as le nom qui apparaît pour l’utilisateur, et en dessous, en gris, le nom du bloc vers lequel il sera redirigé.

D’un point de vue User experience, les utilisateurs utilisent plus facilement les “Quick reply”.

Après le “Menu”, nous allons réaliser la partie “Contact”.

Pourquoi ?

Simple, c’est le bouton juste en dessous dans notre « Welcome message ».

Chatfuel-contact

Ici, nous avons ajouté le “show typing” qui permet de simuler un temps de réponse.

Ainsi nous rendons notre bot plus humain.

Pour gérer les contacts, nous mettons un texte auquel s’ajoute deux boutons.

Le premier bouton “Appeler” lancera directement un appel vers le numéro enregistré si la personne est sur un téléphone.

Le second redirige vers le bloc “Email” qui s’avère plus technique à la réalisation.

Créer un formulaire de contact dans Chatfuel

lead-generation-1

Pour notre formulaire, nous utilisons plusieurs fonctionnalitées spécifiques.
La première, est le “Save User Input”, il permet de sauvegarder les réponses de l’utilisateurs dans des “Attributs” que nous nommons à droite.

Par la suite grâce à ces attributs, notre bot nous enverra un email avec les réponses de notre utilisateurs.

Côté utilisateur, cette fonction se traduit de la façon suivante:

chatfuel-email-user

Ensuite, nous récupérons l’email do notre utilisateur et nous nous envoyons toutes les infos précédentes par e-mail.

chatfuel-recuperer-email

Pour ce faire, nous employons la fonction “Save User Email” qui renverra l’email avec lequel l’utilisateur a créé son compt Facebook.

Avec “Notify Admin via Email”, notre bot nous envois directement les informations précédemment récoltées.
Tu peux aussi ajouter d’autres information comme le nom et le prénom de la personne.

Comment ?

Astuce pour personnaliser les messages dans Chatfuel:

chatfuel-data-fb

Très simplement, dans le champs qui t’intéresse, commence par mettre deux {{ et tu verras toute une série de données utilisables.

Tu peux aussi créer tes propres attributs pour par exemple connaître les centres d’intérêts de tes utilisateurs 😉

C’est ce que nous avons fait dans notre formulaire d’emailing.

À présent, notre section “Contact” est terminée 🎉

Partie “Chatbot ??”

Pour cette section, nous allons simple rédiger une succession de message avec à la fin une “Galerie” présentant différent article pour aller plus loins dans l’apprentissage.

Par la suite nous verrons comment améliorer cette partie de façon automatique.

Partie “Portfolio”

Pour cette partie, tu as deux choix:
-Refaire une “Galerie” comme pour notre menu avec des liens vers les pages de ton site
-Les proposer un par un en demande à ton utilisateurs si il veut en découvrir plus.

Comme pour la partie précédente, celle-ci pourra être automatisée.
Ici, nous allons te présenter la dernière option.

chatfuel-portfolio-1
chatbot-profolio-2

Pour avoir un visuel, du texte et un lien faire notre réalisation, nous utilisons la “Galerie” en y mettant qu’un seul projet.

chatbot-portfolio-3

Pour filtrer les utilisateurs qui souhaitent continuer de découvrir nos travaux, nous allons utiliser la fonction “Redirect to Block” en ajoutant un attribut pour filtrer les personnes.

Avant notre “Redirect to Block”, nous demandons à Chatfuel de sauvegarder la réponse dans un attribut.

Ensuite nous comparons la valeur via “is”. Le bloc “Menu” ne renvoie pas directement vers le menu pour la simple raison que mettre un lien sur ces réponses entraîne des problèmes avec notre filtre.

Cependant, avec cette méthode demeure un problème, dans Chatfuel, les attributs ne se mettent pas à jour !

Concrètement ça veut dire quoi ?

Ton utilisateur ne pourra faire le trajet qu’une fois car le bot aura enregistré sa réponse et la nouvelle réponse ne sera pas prise en compte.

Oui et ?

La première fois une personne répond “Non”, elle est redirigée vers le “Menu”.
Jusque là c’est bon.

Cette même personne revient quelques temps plus tard et demande à voir un autre projet.
Le bot va quand même la rediriger vers le “Menu” car l’attribut enregistré ne sera pas mis à jour !

Alors comment fait-on ?

Autre méthode plus simple, que nous allons voir maintenant.

chatbot-portfolio-5

Tant que l’utilisateur n’aura pas répondu avec une “Quick reply” ou en écrivant une réponse, le flot de discussion sera en pause.

Ensuite on continu et termine notre chatbot.

chatbot-profolio-2
chatbot-portfolio-4

On ajoute un nouveau projet, puis nous répétons la structure autant de fois que nécessaire.
Puis nous ajoutons un message une fois arrivé à la fin

Notre “Portfolio” et maintenant terminé 🤗

Partie “Services”

Pour présenter nos “Services” nous faisons exactement pareil que pour notre “Portfolio” en utilisant cette fois la “Galerie” avec plusieurs images.

chatbot-services-1
chatbot-services-2

Maintenant que nos “Services” sont en places, nous allons détailler chacun d’eux dans des blocs spécifiques.

“Chatbot” & “Facebook Ad’s”

Pour ces deux blocs, la structure est là même.
Tu as juste à faire une succession de message pas trop long expliquant tes services.
Une fois ton explication terminée, utilise des “Quick reply” pour inviter l’utilisateur à te contacter / demander un devis.

“Lead Generation / Devis”

Nous voici arrivé à la dernière partie !!!

Youhou ! 🎉🎉🎉

Cette partie est la plus importante, elle nous permet de récupérer des infos sur l’utilisateur de façon automatique puis de les recevoir par email afin de le recontacter.

Par quelle magie est-ce possible ?

La réponse en image !

lead-generation-1

Nouvelle fonction le “Save User Input”, il nous permet de poser une série de questions à l’utilisateur de les enregistrer dans des attributs.

Nous réutilisons ces attributs par la suite pour envoyer les informations par e-mail.

lead-generation-2

Une fois que nous connaissons le besoin de la personne, nous lui demandons une estimation du budget qu’il souhaite y consacrer.

Comme pour la fonction précédente, nous enregistrons les informations dans un attribut.

lead-generation-3

Ici, nous employons la fonction “Save User Email” afin de simplifier la tâche des nos utilisateurs.

Cette fonction à l’avantage de proposer en “Quick reply” l’e-mail que la personne à utilisé pour se connecter à Facebook.

Ainsi, la personne gagne du temps et en prime nous évitons les fautes de frappe !!!

lead-generation-4

Une fois que nous avons demandé toutes les informations qui nous intéressent, il ne reste plus qu’à tout envoyer par e-mail !

Tadaaa ton formulaire est terminé enfin presque
Dernier message dans une optique User friendly:

lead-generation-5

Nous prévenons la personne que le processus a été accompli correctement en le remerciant.

Et nous l’invitons éventuellement à poursuivre sa navigation avec deux “Quick reply”.

Dans la grande partie des cas les personnes s’arrêtent à cette étape.

Félicitation tu as réalisé ton premier chatbot. 🎉 🚀🤩

Il ne nous reste plus qu’à le tester pour voir si tout fonctionne correctement et si aucun message n’est trop abrupte.

5/ Teste du chatbot d’une agence web

Avant de tester notre création, il va falloir le connecter à notre page Facebook.

Pour ce faire, nous nous rendons dans la partie configuration (menu sur la gauche).

connect-chatbot-fb-page

Une fois notre chatbot connecté à notre page de test, nous allons nous rendre sur la page Facebook pour créer un bouton nous permettant d’envoyer un message à cette page.

connect-fb-page-1

Pour l’image ci-dessus, nous avons utilisé le site Funnelytics qui permet de réaliser simplement des trajets utilisateurs.
Tu peux aussi faire cette partie sur une feuille blanche.

Sur la partie de gauche nous avons une vue globale du chatbot et des différents trajets possibles.
A gauche tu as une vue spécifique du menu.

Pour un projet de cette taille, cette étape n’est pas forcément nécessaire, cela reste une bonne pratique de la mettre en place.

Comme nous le voyons, nos utilisateurs arrive soit par Facebook soit par notre site, notre objectif d’obtenir un devis ou un contact.

Pour ce faire nous présenterons nos services et nos réalisations.

connect-fb-page-2
connect-fb-page-3

Okay, notre chatbot est relié à notre page.

Pour commencer à communiquer, clique sur le bouton et fait “tester le bouton”.

De la, une fenêtre messenger s’ouvre, tu y verras un bouton “Démarrer”.

Dès qu’un chatbot est implanté sur une page tu trouveras ce bouton la première fois où tu envois un message.

Prends le temps de bien tester ton chatbot avant de le lier à ta page principale.

Si tu as le moindre problème, n’hésite pas nous contacter.

6/ Comment améliorer son chatbot

Dans cet article, tu as découvert les éléments de bases.
Par la suite, nous verrons comment implémenter des fonctions plus avancées.

L’objectif est de rendre notre chatbot plus pertinent, plus fonctionnel et au maximum simple et non frustrant pour nos utilisateurs.

Au programme:
-Zapier
-Api.ai
-Chatbot et IOT
-Etc…

Conclusion

Aujourd’hui, avec toutes les solutions qui existent en ligne, faire un chatbot n’a jamais été aussi simple.

L’important n’est pas la technique, mais votre but et son implémentation.

Au plus tu penseras le processus en amont, au plus ton chatbot sera bien construit.

Pour réaliser un bon chatbot il est primordial de garder l’utilisateur au centre de sa conception et de ne pas faire un simple répondeur.

Related Posts