# Réponses enrichies : tableaux, cartes et réponses rapides dans le chat

> Permettez à l'agent de répondre avec un tableau pour comparer des options, une rangée de cartes parmi lesquelles choisir, ou des boutons de réponse rapide pour l'étape suivante, en plus de son texte. Découvrez quand il les utilise, les limites, leur aspect dans le widget et où elles apparaissent ailleurs.

Avec **Rich replies** activé, l'agent peut afficher du contenu structuré dans le chat, sous son texte :

- un **tableau**, pour comparer plusieurs éléments sur les mêmes points, comme des offres, des produits ou des horaires d'ouverture ;
- des **cartes**, une rangée d'options parmi lesquelles choisir, chacune avec un titre et, en option, une image, un prix et des boutons ;
- des **réponses rapides**, de courts boutons pour les étapes suivantes évidentes. Toucher l'un d'eux envoie son texte comme message du visiteur.

L'agent rédige toujours aussi une réponse textuelle. Les réponses enrichies se placent en dessous, comme les [fiches produits](/fr/docs/connect-your-store) et les [créneaux de réservation](/fr/docs/booking).

## L'activer ou le désactiver

Ouvrez votre agent, sélectionnez l'onglet **Appearance** et repérez l'interrupteur **Rich replies**, à côté de **Suggest follow-up questions** et de **Show sources under replies**. Il est activé par défaut pour chaque agent. Cliquez sur **Save changes** pour appliquer une modification.

Le **Playground** utilise l'interrupteur tel qu'il apparaît à l'écran : vous pouvez donc l'essayer avant d'enregistrer.

Le désactiver arrête les nouvelles réponses enrichies. Les réponses qui en ont déjà affiché une la conservent dans la conversation.

## Quand l'agent les utilise

L'agent décide pour chaque réponse. Il a pour consigne de n'utiliser les réponses enrichies que lorsqu'elles sont utiles :

| Situation | Ce qu'il affiche |
|---|---|
| Une comparaison de plusieurs éléments sur les mêmes points | Un tableau |
| Plusieurs options entre lesquelles le visiteur peut choisir | Des cartes |
| Des étapes suivantes évidentes parmi lesquelles le visiteur choisirait | Des réponses rapides |

Il a pour consigne de ne pas les utiliser pour un fait isolé, un oui ou un non, une conversation de politesse ou une réponse tenant en un court paragraphe, et de ne les remplir qu'avec des faits issus de vos connaissances, de la conversation ou des résultats de vos [actions](/fr/docs/api-actions), jamais avec des produits, des prix, des liens ou des images inventés. Comme pour toute réponse d'IA, vérifiez les réponses importantes dans le **Playground**, et utilisez vos [instructions](/fr/docs/instructions) pour l'orienter, par exemple « Affiche nos offres sous forme de tableau quand quelqu'un demande les prix. »

Une réponse enrichie fait partie de la même réponse : elle ne consomme donc pas de message supplémentaire, et activer l'interrupteur ne change pas la façon dont la réponse s'affiche en streaming. La réponse enrichie apparaît une fois le texte terminé. Un visiteur qui touche une réponse rapide ou le bouton de réponse d'une carte envoie un message, qui compte comme un message tapé.

## Limites et règles de sécurité

Une réponse affiche au plus un tableau, une rangée de cartes et un ensemble de réponses rapides.

| Type | Limites |
|---|---|
| Tableau | 1 à 8 colonnes et 1 à 20 lignes. Chaque cellule est du texte brut de 200 caractères au maximum, les en-têtes de colonnes 60 au maximum, une légende facultative 100 au maximum. Chaque ligne a une cellule par colonne. |
| Cartes | 1 à 10 cartes. Chacune a un titre de 80 caractères au maximum et, en option, un sous-titre de 200 au maximum, une image, un prix écrit sous forme de texte de 40 au maximum (comme « CHF 49 » ou « à partir de 9 $/mois ») et jusqu'à 2 boutons. Un bouton ouvre un lien ou envoie une réponse de 120 caractères au maximum comme message du visiteur. Les libellés des boutons comptent 40 caractères au maximum. |
| Réponses rapides | 1 à 6 boutons de 40 caractères au maximum chacun. Les doublons ne s'affichent qu'une fois. |

intoCHAT vérifie chaque réponse enrichie avant son affichage :

- Tout est en texte brut. Le HTML est refusé, et les marques Markdown comme `**` sont supprimées.
- Les liens et les images doivent être des adresses `https://` complètes. Les liens `http://`, `javascript:` et `data:`, les adresses contenant un nom d'utilisateur ou un mot de passe, et les adresses sans domaine comme `localhost` sont refusés.
- Les réponses rapides et les boutons de réponse ne peuvent pas contenir de lien, puisque leur texte est envoyé comme message du visiteur.

Un tableau, une rangée de cartes ou un ensemble de réponses rapides qui enfreint une règle n'est pas affiché du tout, jamais en partie. La réponse textuelle et toute autre réponse enrichie valide s'affichent quand même. Quand votre agent dispose aussi d'[actions](/fr/docs/api-actions), de [formulaires de chat](/fr/docs/chat-forms) ou d'autres outils, on lui indique ce qui n'allait pas, et il peut le corriger dans la même réponse.

## Aspect dans le widget

- Les réponses enrichies apparaissent sous le message de l'agent, alignées avec lui, dans le thème clair ou sombre de votre widget. Les boutons de lien et de réponse des cartes utilisent votre couleur **Launcher bubble**.
- Un tableau défile horizontalement sur un écran étroit. Plusieurs cartes forment une rangée qui défile horizontalement, avec des flèches pour les utilisateurs de souris. Une carte seule s'affiche en largeur.
- Les réponses rapides ne s'affichent que sous la dernière réponse et disparaissent dès que le visiteur envoie un message. Tant que des réponses rapides sont affichées, les [questions de suivi](/fr/docs/appearance#questions-de-suivi) ne le sont pas : les deux ne se font donc pas concurrence.
- Les liens des cartes s'ouvrent dans un nouvel onglet. Avec **Keep campaign tags on links** activé (voir [Apparence](/fr/docs/appearance)), ils portent vos balises de campagne comme les autres liens des réponses.
- Tout fonctionne au clavier : les boutons et les liens sont accessibles avec Tab, et le tableau comme la rangée de cartes peuvent recevoir le focus et défiler avec les flèches. Les lecteurs d'écran annoncent la légende du tableau, le nombre de cartes et le groupe de réponses rapides.

Les libellés propres au widget, comme « Plus », « Précédent », « Réponses rapides » et l'indication qu'un lien s'ouvre dans un nouvel onglet, suivent la [langue du widget](/fr/docs/appearance#langue-du-widget). Le texte à l'intérieur d'une réponse enrichie est rédigé par l'agent, dans la langue de sa réponse.

## Où apparaissent aussi les réponses enrichies

| Endroit | Ce que vous voyez |
|---|---|
| Onglet **Conversations** et **Playground** | La réponse enrichie telle que le visiteur l'a vue. Dans l'onglet **Conversations**, ses boutons n'envoient rien. |
| [Boîte de réception Live chat](/fr/docs/live-chat), [e-mail de transfert](/fr/docs/handoff), [tickets helpdesk](/fr/docs/helpdesk-tickets) et [export CSV](/fr/docs/conversations-and-dashboard) | Une version texte : un tableau sous forme de lignes de cellules séparées par `\|`, les cartes sous la forme `• Title — subtitle — price` avec leurs liens, les réponses rapides sous la forme `[Yes] [No]`. |
| Conversations [Slack](/fr/docs/slack-agent) et par [e-mail](/fr/docs/email-agent) | Non proposées : l'agent y écrit du texte brut. |
| [API REST](/fr/docs/rest-api) et [serveur MCP](/fr/docs/mcp-server) | Un champ `ui`, décrit ci-dessous. |

## Dans l'API

[Envoyer un message](/fr/docs/rest-api#envoyer-un-message) (sans streaming) et [Obtenir une conversation](/fr/docs/rest-api#obtenir-une-conversation) ajoutent un champ `ui` à une réponse de l'agent qui a affiché une réponse enrichie. Une réponse sans réponse enrichie n'a pas de champ `ui`. Les outils MCP `chat_with_agent` et `get_conversation` renvoient la même chose. `content` et `reply` restent en texte brut, sans la réponse enrichie.

```json
{
  "id": "MESSAGE_ID",
  "role": "assistant",
  "content": "Here are our two plans.",
  "createdAt": "2026-10-27T10:00:00.000Z",
  "authorName": null,
  "sources": [],
  "ui": [
    {
      "type": "table",
      "title": "Plans",
      "columns": ["Plan", "Price", "Seats"],
      "rows": [["Basic", "CHF 9", "1"], ["Pro", "CHF 29", "5"]]
    },
    {
      "type": "cards",
      "cards": [
        {
          "title": "Pro",
          "subtitle": "For growing teams",
          "image": "https://www.example.com/pro.png",
          "price": "CHF 29 / month",
          "buttons": [
            { "label": "See details", "url": "https://www.example.com/pricing" },
            { "label": "Start a trial", "reply": "I'd like to start a Pro trial" }
          ]
        }
      ]
    },
    { "type": "quick_replies", "replies": ["Compare features", "Talk to sales"] }
  ]
}
```

Chaque élément a un `type` : `table` (avec `columns`, `rows` et un `title` facultatif), `cards` (chaque carte avec `title`, les champs facultatifs `subtitle`, `image` et `price`, et des `buttons` ayant un `label` et soit une `url`, soit une `reply`) ou `quick_replies` (avec `replies`). Les champs facultatifs sont omis quand ils sont vides.

## Étapes suivantes

- [Personnaliser l'apparence du widget](/fr/docs/appearance)
- [Connecter votre boutique](/fr/docs/connect-your-store) pour des fiches produits issues de recherches en direct
- [Rédiger des instructions](/fr/docs/instructions) qui indiquent à l'agent quand comparer dans un tableau