Le bloc Gen UI (Generative UI) est l’un des outils les plus puissants de SendBot. Il vous permet de restituer des composants d’interface personnalisés et interactifs directement dans la conversation, allant bien au-delà des bulles de texte standard. Ce bloc peut être utilisé de deux manières : Manuelle (configurée par vous dans le Studio) ou Générative (générée dynamiquement par une IA).

​
Qu’est-ce que Gen UI ?

Contrairement à une bulle de texte ou d’image, Gen UI est un “conteneur” pour les composants React. Cela signifie que vous pouvez afficher n’importe quoi, d’un calendrier de réservation à un graphique financier complexe, à condition que le composant soit enregistré dans votre package webchat.

​
Comment configurer manuellement

Dans le Studio, lorsque vous ajoutez un bloc Gen UI, vous trouverez deux champs principaux :
  1. Nom du composant : L’identifiant unique du composant React à restituer (ex : booking-calendar, sales-chart, product-card).
  2. Données (JSON) : Un objet JSON contenant les informations dont le composant a besoin pour fonctionner. Vous pouvez utiliser les variables SendBot ici en utilisant la syntaxe {{ma_variable}}.

​
Exemple de configuration

  • Nom : product-card
  • Données :

​
Scénarios d’utilisation manuelle

L’utilisation manuelle est idéale pour les situations où vous avez besoin de prévisibilité et de performance.

​
1. Widgets de réservation

Si vous avez déjà un composant de calendrier, vous pouvez forcer son affichage après que l’utilisateur a choisi un service.
  • Scénario : “Parfait, maintenant choisissez le meilleur moment dans le calendrier ci-dessous.”
  • Avantage : Déterministe et rapide, sans dépendre de l’IA pour décider du format.

​
2. Tableaux de bord et graphiques

Si votre bot interroge une API externe, vous pouvez transmettre le résultat à un composant de graphique.
  • Scénario : Afficher le relevé des points de fidélité de l’utilisateur.
  • Avantage : Visualisation riche des données qui serait impossible avec du texte seul.

​
3. Expériences ludiques

Affichez des roues de réduction, des cartes à gratter numériques ou des sélecteurs d’avatar.
  • Avantage : Augmente l’engagement de l’utilisateur avec une interface qui “vit” à l’intérieur du chat.

​
Scénarios d’utilisation avec l’IA (Agent AI)

Lorsqu’il est utilisé en conjonction avec le bloc Agent AI, Gen UI devient véritablement “génératif”. L’IA peut décider, en fonction du contexte de la conversation, quel composant afficher et quelles données y renseigner.
  • Exemple : L’utilisateur dit “Je cherche une table à manger en bois”. L’IA comprend l’intention et, au lieu de simplement lister des liens, elle émet un composant product-carousel avec les meubles filtrés.

​
Bonnes pratiques

  • Validation JSON : Assurez-vous que le JSON saisi est valide. L’éditeur Studio vous avertira s’il y a des erreurs de syntaxe.
  • Solutions de repli : N’oubliez pas que le composant doit être disponible dans votre package Webchat pour être correctement restitué pour l’utilisateur final.
  • Variables : Utilisez des variables pour rendre les composants dynamiques en fonction des réponses précédentes de l’utilisateur.