Avec l’interface interactive, votre agent IA affiche au contact un formulaire, des boutons, un carrousel ou un média dans le chat, au lieu de poser uniquement des questions en texte brut. À la fin de ce guide, vous disposerez d’une action que votre agent IA utilisera au bon moment : le contact choisit une date dans un calendrier ou appuie sur une réponse, par exemple, et l’agent IA poursuit immédiatement en tenant compte de son choix.
Vous avez besoin d’un agent IA et d’un rôle autorisé à modifier les paramètres de Connect AI : sur la page « Roles », dans l’onglet « Connect AI », la ligne « Administration » doit être définie sur « Edit ». Sans cette autorisation, les boutons « Add » ne s’affichent pas. Vous pouvez également ajouter une action API ou MCP qui fournit des données, comme les créneaux disponibles, ou enregistre les réponses.
À savoir avant de commencer : un formulaire n’apparaît de façon interactive que dans le Website Messenger. Sur les autres canaux textuels, le contact reçoit une question en texte brut ; lors des appels, l’agent IA ne propose pas du tout l’action. Consultez « On which channels does each element appear? ».
Chaque élément interactif constitue une action à part entière, de type « Show interactive element ». Vous trouverez ces actions dans le menu Connect AI, sous Actions > « Interactive UI ». L’interface interactive est disponible uniquement pour les agents IA, et non pour Copilot.
Quels éléments sont disponibles ?
Une action affiche exactement l’un des éléments suivants :
- Formulaire : vous définissez un titre et des champs, par exemple une période, un choix et un champ de texte. Le contact remplit le formulaire et envoie toutes ses réponses en une seule fois.
- Boutons : l’agent IA rédige un message comportant des réponses rapides et des liens sur lesquels le contact peut appuyer. Dans le Website Messenger et, en option, sur WhatsApp, une image ou une vidéo peut s’afficher au-dessus du message.
- Carrousel : l’agent IA présente des options sous forme de cartes que l’on peut faire défiler, avec une image, une description et des boutons.
- Média : l’agent IA partage une image, une vidéo ou un document accompagné d’une légende.
À chaque conversation, l’agent IA rédige lui-même le contenu dans la langue du contact : pour un formulaire, les options, les créneaux horaires et les limites de dates ; pour les autres éléments, tout le texte, y compris les cartes et les boutons. Le champ « How to execute this action » permet de définir les consignes qu’il doit respecter.
Une nouvelle action commence toujours par un formulaire. « + Add element manually » permet d’ajouter des champs de formulaire, mais aussi des boutons, un carrousel ou un média ; le groupe « Interactive elements » de ce menu ne contient que ces trois derniers éléments.
Sur quels canaux chaque élément s’affiche-t-il ?
Les éléments s’affichent de façon interactive sur les canaux suivants : le contact voit et utilise l’élément lui-même. Lorsqu’un élément ne s’affiche pas de façon interactive, le contact reçoit une question en texte brut.
- Formulaire : interactif uniquement dans le Website Messenger ; sur WhatsApp, Facebook et tous les autres canaux textuels, il est remplacé par une question en texte.
- Boutons : interactifs dans le Website Messenger, sur WhatsApp et sur Facebook ; sur les autres canaux textuels, ils sont remplacés par une question en texte.
- Website Messenger : toutes les réponses et tous les liens s’affichent directement dans le message, avec éventuellement une image ou une vidéo au-dessus.
- WhatsApp : jusqu’à trois réponses s’affichent sous forme de boutons ; de quatre à dix réponses, elles apparaissent dans une liste que le contact ouvre à l’aide d’un bouton. Une image ou une vidéo s’affiche au-dessus du message. Les deux premiers liens arrivent sous forme de messages séparés ; les liens suivants sont regroupés dans un seul message texte.
- Facebook : jusqu’à trois réponses s’affichent sous forme de boutons ; au-delà, elles apparaissent comme réponses rapides, c’est-à-dire des suggestions sur lesquelles on peut appuyer dans le message. Il n’y a ni image ni vidéo, et tous les liens arrivent ensemble dans un seul message texte.
- Carrousel et Média : interactifs dans le Website Messenger et sur WhatsApp ; sur Facebook et les autres canaux textuels, ils sont remplacés par une question en texte. Sur WhatsApp, chaque carte doit comporter une image ou une vidéo et le même nombre de réponses rapides, avec un maximum de deux ; si un élément manque, l’agent IA reçoit l’instruction de corriger les cartes. La section « How do I show buttons, a carousel or media? » explique d’où peuvent provenir les images, les vidéos et les fichiers.
Les autres canaux textuels sont Instagram, Telegram, SMS, e-mail, Threema et les canaux personnalisés. Lors des appels, l’agent IA ne propose aucune action de l’interface interactive.
L’agent IA formule lui-même la question en texte afin qu’elle demande les mêmes informations que l’élément. Par exemple, pour un formulaire comprenant une période et un choix de chambre, il envoie un message demandant au contact les dates et la chambre qu’il souhaite réserver. Les images, les vidéos et les boutons sont omis ; pour un média uniquement, le lien vers le fichier est ajouté au texte.
Le contact répond par un message classique ; l’agent IA l’évalue et ne renvoie pas l’élément.
Si WhatsApp ou Facebook ne peut pas afficher un élément, le contact reçoit une question en texte, comme sur les autres canaux. Cela peut se produire, par exemple, lorsque WhatsApp rejette le message ou ne parvient pas à charger un fichier média, ou lorsque les boutons Facebook ne contiennent que des liens, sans réponses.
Sur la page des paramètres de chaque action, une note au-dessus du formulaire ou de l’élément indique comment il sera présenté. Elle répertorie tous les types de canaux, y compris ceux que vous n’avez pas configurés :
- « Interactive on: » répertorie les canaux sur lesquels le contact voit l’élément lui-même. La note désigne le Website Messenger par « Website ».
- « Shown as a text question on: » répertorie les canaux sur lesquels le contact reçoit la question en texte brut.
- « Not offered on: » répertorie les canaux sur lesquels l’agent IA ne propose pas du tout l’action, à savoir « Phone ».
Vérifiez « Interactive on: » avant d’enregistrer l’action, car l’élément ne pourra plus être modifié par la suite. Si l’élément doit s’afficher de façon interactive sur WhatsApp, choisissez des boutons, un carrousel ou un média.
Que faut-il savoir avant d’enregistrer ?
L’élément d’une action est définitif dès que vous enregistrez l’action. Un formulaire ne pourra pas être transformé en carrousel par la suite, et des boutons ne pourront pas devenir un média. Pour utiliser un autre élément, créez une nouvelle action.
Il n’est pas encore possible de combiner des boutons, un carrousel ou un média avec des champs de formulaire. Tant qu’un formulaire contient des champs, le groupe « Interactive elements » du menu est grisé et une note s’affiche en dessous. Avant l’enregistrement, supprimez les champs ; après l’enregistrement, créez une nouvelle action.
Tout le reste reste modifiable : le nom, les champs « When to trigger this action » et « How to execute this action » et, pour un formulaire, le titre et les champs. Vous pouvez également ajouter, renommer, réorganiser et supprimer des champs après l’enregistrement.
Comment créer une action d’interface interactive ?
Dans le menu Connect AI, ouvrez Actions > « Interactive UI » et cliquez sur « Add ». La page des paramètres de la nouvelle action « Show interactive element » s’ouvre immédiatement.
Vous pouvez également créer l’action à partir d’un agent IA : dans l’onglet « Actions » de l’agent, cliquez sur « Add », choisissez la catégorie « Interactive UI » dans la fenêtre « Create a new action », puis la carte « Show interactive element ». La même page de paramètres s’ouvre ; l’action n’est pas activée pour cet agent IA pour autant.
Dans « Action name », donnez à l’action un nom explicite de 64 caractères maximum : c’est ainsi que l’agent IA reconnaît son utilité. Le nom doit commencer par une lettre de a à z, majuscule ou minuscule, et se terminer par une lettre ou un chiffre ; les chiffres, espaces, traits d’union et tirets bas sont également autorisés entre ces caractères, mais pas les trémas, les accents ou d’autres caractères. Sinon, le champ affiche « Only letters, numbers, spaces, hyphens, and underscores are allowed. »
Dans « When to trigger this action », décrivez quand l’agent IA doit afficher l’élément au lieu de poser une question en texte brut, par exemple lorsque le contact doit choisir une date, un créneau horaire ou l’une de plusieurs options.
Si l’agent IA doit travailler avec des données réelles, l’action API ou MCP correspondante doit déjà exister ; les pages API Actions et MCP expliquent comment les créer. Décrivez ensuite dans « How to execute this action » la provenance des données et la destination des réponses : par exemple, une action qui fournit les options ou les créneaux horaires disponibles, et une autre qui enregistre les réponses du contact. Vous pouvez également définir des valeurs fixes et des règles dans « How to execute this action ». Les conseils à droite de la page des paramètres proposent des exemples pour les deux champs.
Si vous n’indiquez aucune source de données, l’agent IA choisit lui-même des limites raisonnables, par exemple un calendrier pour les jours à venir. Il ne connaît alors pas vos disponibilités réelles.
Notez que l’agent IA peut transmettre aux contacts des textes provenant des champs « When to trigger this action » et « How to execute this action » dans ses réponses. Une règle lui demandant de ne proposer que des dates fournies par votre action API est appropriée ; n’y ajoutez pas d’identifiants, de numéros de téléphone internes ou de données concernant des clients individuels.
Comment créer un formulaire ?
En bas de la page des paramètres, sous « Describe what you need and let AI build it for you », décrivez les informations à recueillir et cliquez sur « Generate ». L’interface ne donne pas de nom spécifique à cette zone ; dans ce guide, nous l’appelons le générateur de formulaires par IA. Il vous aide uniquement lors de la configuration de l’action, pas pendant la conversation.
Le générateur de formulaires par IA ajoute les champs correspondants et les marque « AI generated ». Si le titre est encore vide, il en propose également un. Les champs existants sont conservés, et il n’ajoute pas de champs dont le titre figure déjà dans le formulaire.
Si le message « Could not build a form from that description. Try naming the details you want to collect. » s’affiche, précisez davantage les informations que vous souhaitez recueillir.
La note au-dessus des champs indique sur quels canaux le formulaire s’affiche de façon interactive, comme décrit dans « On which channels does each element appear? ».
Pour ajouter vous-même des champs, cliquez sur « + Add element manually » et choisissez un type de champ. Le menu affiche une courte indication à côté de chaque type.
- Dates et heures : « Calendar » pour une date unique, « Date range » pour une date de début et une date de fin, « Time slots » pour choisir un horaire parmi plusieurs créneaux proposés
- Choix : « Single choice » lorsque le contact choisit une option, « Multiple choice » lorsqu’il peut en choisir plusieurs
- Saisie libre : « Text » pour une réponse courte, « Number » pour une valeur comprise dans des limites définies, « Long text » pour une description
Chaque champ affiche un aperçu avec des valeurs d’exemple. Pendant la conversation, l’agent IA renseigne les options réelles, les créneaux horaires, les limites de dates et les bornes, conformément aux indications de « How to execute this action ».
Cliquez sur le titre d’un champ pour le modifier. Un nouveau champ porte d’abord le nom de son type. Donnez un titre différent à chaque champ, car le contact le voit au-dessus du champ et sa réponse apparaît dans le Message Center sous ce titre.
Modifiez l’ordre des champs par glisser-déposer. Supprimez un champ à l’aide de l’icône de corbeille.
Dans « Headline », saisissez le texte que le contact doit voir au-dessus du formulaire. Le titre principal apparaît une fois au-dessus du formulaire ; le titre d’un champ apparaît juste au-dessus de celui-ci.
Le titre principal et les titres des champs s’affichent exactement comme vous les saisissez et ne sont pas traduits pour les contacts parlant d’autres langues. Rédigez-les dans la langue de vos contacts.
Le titre principal et tous les champs sont obligatoires : un champ ne peut pas être facultatif, et le contact ne peut envoyer le formulaire qu’après avoir rempli tous les champs.
Si un élément manque lors de l’enregistrement, la page des paramètres en indique la raison :
- « Add at least one field to save this action. » s’affiche lorsque le formulaire ne contient encore aucun champ.
- « Add a headline to save this action. » s’affiche lorsque le titre principal est vide.
- « Give this field a title to save this action. » s’affiche pour un champ sans titre.
- « Another field already uses this title. Give each field its own title. » s’affiche lorsque deux champs ont le même titre, même si seule la casse diffère.
Comment afficher des boutons, un carrousel ou un média ?
Cliquez sur « + Add element manually » et, dans le groupe « Interactive elements », choisissez « Buttons » (Tap to answer), « Carousel » (Swipeable cards) ou « Media » (Image, video or file).
Cela n’est possible que si le formulaire ne contient aucun champ. Tant qu’il en contient, le groupe est grisé et accompagné de la note « Interactive elements can’t be combined with form fields yet. Create a separate action for them. » Avant l’enregistrement, supprimez les champs avec l’icône de corbeille pour pouvoir sélectionner à nouveau le groupe ; après l’enregistrement, créez plutôt une nouvelle action.
La page des paramètres affiche alors l’élément choisi à la place du formulaire, avec un aperçu composé de contenu d’exemple et la note sur les canaux au-dessus. Tant que l’action n’est pas enregistrée, vous pouvez supprimer l’élément à l’aide de l’icône de corbeille et créer un formulaire à la place.
Dans « How to execute this action », décrivez ce que l’agent IA doit afficher, par exemple les produits que le carrousel doit présenter ou les réponses que les boutons doivent proposer. Un carrousel comporte de 2 à 10 cartes, et les boutons peuvent proposer jusqu’à 10 réponses ou liens.
L’agent IA n’inclut des images, des vidéos et des fichiers qu’au moyen de liens commençant par https, et uniquement à partir des sources suivantes :
- Boutons (image ou vidéo au-dessus du message) : liens figurant dans vos instructions, dans le résultat d’une autre action (par exemple une action API) ou dans la conversation
- Carrousel (image ou vidéo sur chaque carte) : mêmes sources que pour les boutons
- Média (le fichier) : liens figurant dans vos instructions ou dans la conversation ; pour cela, indiquez le lien du fichier dans « How to execute this action »
« Dans la conversation » désigne un lien qu’une personne a envoyé dans le chat.
Comment activer et tester l’action pour mon agent IA ?
Cliquez sur « Save » lorsque le formulaire ou l’élément est prêt. Une nouvelle action n’est activée pour aucun agent IA, même pas pour celui dans l’onglet « Actions » duquel vous l’avez créée.
Si vous avez créé l’action sous Actions > « Interactive UI », vous revenez à la vue d’ensemble. La colonne « Setups » indique quels agents IA utilisent l’action ; ici, les setups sont vos agents IA. Cliquez sur « No setup », puis, dans la fenêtre « Connected setups », sélectionnez les agents IA qui doivent utiliser l’action. La colonne affichera alors, par exemple, « 1 AI Agent ».
Si vous avez créé l’action à partir d’un agent IA, vous revenez à son onglet « Actions ». Activez l’action dans cet onglet, dans la colonne « Status ».
Pour effectuer un test, vous avez besoin d’un widget pour le Website Messenger. Le bouton « Test Agent » apparaît uniquement si l’agent IA dispose d’un chatbot. Une fois l’action activée pour cet agent IA, cliquez sur « Test Agent », à droite des onglets de l’agent, choisissez un widget sous « Widget », puis cliquez sur « Open test conversation ».
Dans la conversation de test, rédigez un message correspondant au texte de « When to trigger this action ». Si l’élément ne s’affiche pas, vérifiez que l’action est activée pour l’agent IA et que le texte de « When to trigger this action » correspond à votre message.
Le test s’effectue dans le Website Messenger. Il ne permet pas de vérifier comment l’élément s’affiche sur WhatsApp ni comment il apparaît sous forme de question en texte.
Que voit le contact dans le Website Messenger ?
Dans le Website Messenger, l’élément apparaît directement dans la conversation. Le contact remplit un formulaire et l’envoie en cliquant sur « Confirm ».
S’il manque une réponse, le formulaire signale le champ en rouge ; le contact ne peut l’envoyer qu’une fois tous les champs remplis.
Après l’envoi, le formulaire affiche les réponses du contact et ne peut plus être modifié.
Si le contact a déjà donné une réponse plus tôt dans la conversation, l’agent IA peut la préremplir dans le formulaire.
Avec les boutons et le carrousel, le contact répond en appuyant sur une réponse.
Lorsque la conversation est terminée, le contact voit toujours l’élément, mais ne peut plus l’utiliser.
Que voit l’opérateur dans le Message Center ?
Dans le Message Center, l’élément apparaît sous la forme d’un message de l’agent IA affichant la question en texte brut, avec le libellé « Interactive element » en dessous. Dès que le contact a répondu au moyen de l’élément, le libellé « Answered » est ajouté.
La réponse du contact apparaît ensuite dans un message distinct ; pour un formulaire, une ligne est affichée par champ, avec le titre et la réponse.
Qu’en est-il de « Show carousel » et « Show media and buttons » ?
Les anciens types d’action « Show carousel » et « Show media and buttons », sous Actions > « System », portent le libellé « LEGACY ». Ils continuent de fonctionner, vous pouvez toujours en créer de nouveaux et aucune conversion n’est effectuée automatiquement.
Pour les nouvelles actions, utilisez ici l’élément « Carousel » à la place de « Show carousel ». À la place de « Show media and buttons », utilisez l’élément « Buttons » ou, pour une image, une vidéo ou un fichier, l’élément « Media » (« Image, video or file »). Lorsque vous survolez le libellé LEGACY, l’infobulle ne mentionne que « Buttons » et « Carousel » ; pour une image, une vidéo ou un fichier, utilisez « Media ».
Les boutons peuvent afficher une image ou une vidéo au-dessus du message, mais pas un fichier. Avec l’interface interactive, l’agent IA n’affiche qu’un seul élément par réponse ; un fichier et des boutons ne peuvent donc jamais arriver dans le même message. Vous devez créer deux actions, l’une avec « Media » et l’autre avec « Buttons ». En revanche, l’ancienne action « Show media and buttons » peut envoyer un fichier avec des boutons dans un seul message et couvre toujours ce cas.
N’activez pas une ancienne action et une nouvelle action pour le même usage.
Pour en savoir plus sur le libellé LEGACY, consultez la page System Actions, section « What does the LEGACY label mean? ».