Ajouter une bulle de chat sur toutes vos pages
Votre bot fonctionne : il a sa route d'API, il répond aux messages. Mais il vit sur une seule page. Le visiteur qui se promène ailleurs sur votre site ne le voit jamais, et la conversation s'arrête là où la page s'arrête. Vous voulez cette petite bulle flottante, présente partout, qui suit le visiteur de page en page. Et vous sentez que la recoder à chaque page serait une erreur.
Cette masterclass vous donne la méthode du widget de chat flottant : les six comportements à décider avant le code, la séparation entre le cerveau (la logique de chat) et l'habillage (le bouton et la fenêtre), et le prompt qui construit le composant React complet, posé une seule fois et présent sur toutes vos pages.
Ce que cet exercice ne peut pas casser
Tout commence sur une feuille : six lignes, une par comportement. Le code arrive ensuite, dans un composant unique et autonome, que vous pouvez retirer aussi facilement que vous l'avez posé. Votre bot existant n'est pas touché. Et si une règle vous manque, le prompt vous pose la question au lieu d'inventer à votre place.
Ce que vous saurez faire à la fin
- Décrire votre widget en six comportements sur une feuille, avant la moindre ligne de code.
- Exiger la séparation entre la logique de chat et l'habillage, et savoir en une phrase pourquoi elle vous servira plus tard.
- Poser le composant au bon endroit de votre application pour qu'il survive aux changements de page.
- Tester votre bulle comme un visiteur : ordinateur, mobile, changement de page, clavier ouvert.
- Niveau membre· le prompt prêt à coller qui construit le widget complet à partir de votre cahier des charges, ou vous interviewe comportement par comportement si vous partez de zéro.
- Niveau Pro· je pose le widget avec vous sur votre site, je branche votre bot et nous testons les six comportements en direct.
Six décisions à poser avant le code : votre cahier des charges tient sur une feuille.
Six comportements, un cerveau, un habillage
Une bulle de chat paraît simple : un bouton, une fenêtre. En réalité, elle a six comportements, et chacun cache une décision. Tant que ces décisions ne sont pas posées noir sur blanc, l'IA comble les trous par des suppositions, et vous découvrez les mauvaises au pire moment : en production, sur le téléphone d'un visiteur. La méthode tient en deux gestes : remplir le cahier des charges des six comportements, puis exiger une architecture qui sépare le cerveau de l'habillage.
1Remplissez la feuille des six comportementsdoute : « par où je commence ? »
État fermé, état ouvert, transition, persistance, version mobile, notification : une ligne par comportement, avec ce que vous voulez voir. Si vous êtes encore en réflexion, la méthode prévoit le cas : le prompt passe en mode interview et vous pose les questions une par une, comportement par comportement, sans générer de code tant qu'il n'a pas assez de matière.
2Séparez le cerveau de l'habillagedoute : « pourquoi pas tout dans un seul fichier ? »
Toute la logique de chat (envoi des messages, réception de la réponse, historique) vit dans un module réutilisable à part. Le composant visuel, lui, ne fait que l'afficher : un bouton rond quand c'est fermé, une fenêtre quand c'est ouvert. Cette séparation vous servira plus tard : le jour où vous changez l'habillage, le cerveau ne bouge pas, et inversement.
3Posez le composant au niveau le plus hautdoute : « et s'il disparaît quand on change de page ? »
Le composant se place en position fixe en bas à droite, et il se pose dans le layout racine de l'application, pas dans une page. C'est ce qui le fait survivre aux changements de page : le visiteur navigue, la bulle reste.
4Gérez la persistance sur deux niveauxdoute : « et si l'historique s'efface ? »
L'historique s'affiche instantanément depuis le stockage local du navigateur, puis se synchronise avec votre base de données si vous en avez une. Pas de base ? Le stockage local seul suffit pour commencer, et le prompt vous le dit au lieu de complexifier en silence.
5Traitez le mobile, surtout le clavierdoute : « ça marchera vraiment sur téléphone ? »
Sur mobile, la fenêtre passe en plein écran à l'ouverture. Et surtout, il faut corriger le piège qui revient le plus souvent : le clavier virtuel qui cache le champ de saisie. La parade : écouter le redimensionnement de la zone visible et ajuster la hauteur en conséquence. C'est le premier test à faire avant toute mise en ligne.
6Ajoutez la notificationdoute : « comment le visiteur sait qu'on lui a répondu ? »
Quand la bulle est fermée, une pastille affiche le nombre de messages non lus. Elle disparaît à l'ouverture. C'est le sixième comportement, celui qu'on oublie le plus, et celui qui ramène le visiteur dans la conversation.
À vous de jouer : votre cahier des charges
Prenez une feuille. Le code viendra après, c'est la feuille qui commande.
Le résultat, en 30 secondes
À partir de votre seule feuille, le prompt déroule le widget complet, dans l'ordre annoncé par son format de sortie :
D'abord un récapitulatif en une ligne de chaque comportement retenu, pour validation. Puis le module de logique de chat (le cerveau réutilisable), commenté. Puis le composant visuel (le bouton et la fenêtre), commenté. Puis l'endroit exact où poser le composant dans votre projet, avec la ligne à ajouter. Et enfin la checklist de test : ordinateur, mobile, changement de page, clavier ouvert. Chaque bloc de code est expliqué en une phrase, en français simple, avant d'être donné.
Le prompt prêt à coller
# RÔLE Tu es un développeur React senior, spécialiste des interfaces de chat et des applications Next.js. Tu produis du code clair, commenté, qu'un débutant peut poser sans tout comprendre. Tu ne t'appuies QUE sur ce que je te donne : une règle que je n'ai pas précisée, tu me la demandes, tu ne l'inventes pas. Si une contrainte technique rend une de mes demandes impossible, tu me le dis au lieu de bricoler en silence. # CONTEXTE Je veux ajouter une bulle de chat flottante sur toutes les pages de mon site. J'ai déjà un bot fonctionnel avec sa route d'API (il répond à des messages). Je veux que le widget l'affiche partout, sans le réécrire. Mon cahier des charges (les six comportements de mon widget) :
Le prompt construit votre widget d'un coup : le module de logique réutilisable, le composant visuel commenté, l'endroit exact où le poser dans votre projet et la checklist de test. Si votre cahier est vide, il passe en mode interview et vous questionne comportement par comportement. Laissez votre email, je vous l'envoie.
Vérifiez que c'est à vous
Vous testez votre bulle sur téléphone : la fenêtre s'ouvre bien en plein écran, mais dès que vous tapez un message, le clavier recouvre le champ de saisie. Où est le problème, et où se corrige-t-il ?
D'abord avec vos mots, sans regarder les options :
Expliquez-le pour l'ancrer
En une phrase, à un confrère qui veut ajouter un chat sur son site : pourquoi séparer la logique de chat de l'habillage du widget ? Si vous savez le dire simplement, c'est à vous.
Ce que vous savez faire maintenant
- Décrire un widget de chat en six comportements avant d'écrire la moindre ligne de code.
- Exiger une architecture qui sépare le cerveau (la logique) de l'habillage (le bouton et la fenêtre).
- Tester une bulle de chat comme un visiteur : changement de page, mobile, clavier ouvert, champ de saisie visible.
Le piège qui revient le plus souvent est le clavier sur mobile : testez toujours avec le clavier ouvert, champ de saisie visible.
Continuez seul
Votre bulle est partout. Étape suivante : qu'elle se souvienne du visiteur.
Faire suivre votre chatbot de page en page →Faites-le avec moi
Je pose le widget avec vous sur votre site, je branche votre bot et nous passons la checklist ensemble : ordinateur, mobile, clavier ouvert. Vous repartez avec une bulle en ligne, pas avec une liste de bugs.