Par
Timothé PORTERIE
03/2023
•
8 minutes
Les chatbots sont une excellente solution pour les entreprises qui souhaitent améliorer leur communication avec les clients. Ils peuvent aider les clients à résoudre leurs problèmes rapidement et facilement, et ils sont disponibles 24 heures sur 24 et 7 jours sur 7. Dans cet article, nous allons vous montrer comment créer un chatbot avec Bubble et ChatGPT en utilisant l'outil No-Code Bubble et l'API d'OpenAI.
Bubble est une plateforme de développement No-Code qui permet de créer des applications web et mobiles sans avoir (ou très peu) à écrire de code. Bubble offre de nombreuses fonctionnalités, telles que la création de bases de données, la mise en page et la conception d'interfaces utilisateur. OpenAI est une entreprise de recherche en intelligence artificielle qui a développé un modèle de traitement du langage naturel appelé ChatGPT (Generative Pre-trained Transformer) qui peut être utilisé pour créer des chatbots.
Nous allons nous placer dans le cas où le ChatBot sera intégré en iFrame dans une page d'un site vitrine, en Webflow par exemple. Dans ce cas, la version gratuite de Bubble fera largement l'affaire. Le badge "Built on Bubble" ne s'affiche pas dans une iFrame (😉). Une fois que vous avez créé un compte et un projet, vous pouvez commencer à concevoir votre chatbot.
La prochaine étape consiste à concevoir une interface utilisateur pour votre chatbot.
Voici comment j'ai procédé :
Petite subtilité, il y a une condition importante, sur le "Group Answer", pour bien formater les questions/réponses :
Cette condition indique au groupe qu'un élément texte sur deux est une question (donc un input de l'utilisateur). Dans ce cas, la couleur de fond du groupe change, et il est aligné à droite. Les deux éléments "Border roundness" servent à rendre les bords arrondis ou pas pour donner l'impression que la question vient bien de l'utilisateur.
Pour les workflows, il nous en faut simplement deux :
Lorsqu'on clique sur l'icône pour envoyer un message, l'input de la question et l'icône d'envoi sont "disable", ensuite, on ajoute la question de l'utilisateur au state pour qu'il s'affiche dans le repeating group, on efface l'input, on scroll vers la dernière entrée du state, on demande une réponse à ChatGPT, on l'ajoute au state pour l'afficher dans le repeating group également, on scroll vers cette nouvelle réponse, puis on met le focus de la souris sur l'input pour inciter à envoyer une autre requête, et enfin, on libère l'input et l'icône d'envoi.
Il faut ensuite ajouter l'API d'OpenAI à votre projet Bubble. Pour cela, vous devez créer un compte sur le site web d'OpenAI et générer une clé API. Ensuite, vous pouvez utiliser cette clé pour appeler l'API d'OpenAI dans votre projet Bubble. Pour configurer l'API, rendez-vous dans la section "Plugins" et activez le plugin "API Connector". Avec le workflow précédent, l'envoi d'un message appellera l'API d'OpenAI chaque fois qu'un utilisateur enverra un message à votre chatbot.
L'API est à configurer comme ceci :
Voici la description des éléments :
Chaque élément fléché est un indicateur pour faire attention d'appliquer la bonne configuration.
Quant au "Body" et aux "Body parameters", voici comment les remplir :
La requête doit être formatée de cette manière, où <systemContext> est une variable qui va indiquer le contexte du ChatBot, et <userPrompt> est la question de l'utilisateur :
Le systemContext est indiqué comme "private" pour que son contenu reste figé, contrairement au userPrompt qui sera dynamique et renseigné par le contenu de l'input "Input Question".
Le contexte du ChatBot est très important, car il servira à limiter les réponses du ChatBot pour qu'il ne réponde qu'aux questions concernant votre entreprise, projet, etc.
Voici une partie du contexte, formater en JSON-Safe, que j'ai indiqué au ChatBot du site STARTUPP.fr :
Vous pouvez maintenant tester votre ChatBot, ou tester celui qui se trouve en bas à droite de la page d'accueil du site STARTUPP.fr
En résumé, il est possible de créer facilement un chatbot en utilisant Bubble et ChatGPT, même sans compétences en programmation. Cette solution offre de nombreux avantages pour les entreprises qui cherchent à améliorer leur communication avec leurs clients, notamment en permettant une réponse rapide et disponible 24/7. N'hésitez pas à tester cette solution pour améliorer votre communication avec vos clients et améliorer votre expérience utilisateur.
Vous pouvez toujours l'améliorer en proposant qu'un agent soit notifié pour discuter directement avec l'utilisateur, si la question est précise par exemple, ou encore en stockant chaque conversation dans une base de données Bubble/AirTable/Xano/Google Sheet. Les possibilités sont infinies si vous connaissez votre besoin 🚀
Si vous ne le connaissez pas, il est urgent de prendre contact avec nous pour démarrer votre projet ! 😉
Et ça se passe par ici → Par mail : hello@startupp.fr ou par Calendly : Calendly STARTUPP
Programmez un rendez-vous téléphonique ou présentiel pour parler de votre besoin, de votre idée, de votre projet ou démarrer une estimation !
Consultez nos autres articles