Concepteur de widget
Habillez le widget d'un agent sur votre site, chat ou appel : mise en page, avatar, libellés et couleurs, avec aperçu en direct et neuf préréglages.
La section Widget du workspace de l’agent, à l’adresse /agents/edit/<id>/widget,
constitue le Widget Configurator (configurateur de widget) : un formulaire à gauche, un aperçu en direct à droite, et
une colonne de préréglages à côté. Ce que vous enregistrez ici correspond à ce que le
code d’intégration affiche sur votre site.
Le widget suit la modalité de l’agent. Le widget d’un agent textuel est un panneau de chat. Le widget d’un agent vocal s’ouvre sous forme d’appel : le visiteur le lance, parle à l’agent et peut suivre la transcription. Les agents vocaux et textuels partagent le même concepteur, et les sections s’adaptent en conséquence.
Préréglages
Choisissez-en un pour définir toutes les couleurs d’un seul coup : Obsidian, Snowfall, Deep Blue, Emerald, Rosewood, Honeycomb, Amethyst, Aurora ou Verdant. Modifier ensuite une couleur fait basculer le libellé sur Custom (personnalisé). Reset (réinitialiser) rétablit l’ensemble du formulaire à ses valeurs par défaut.
Sections
Le formulaire est organisé en sections repliables. Les deux types d’agent disposent de Layout (mise en page), Avatar et Colors (couleurs). Un agent textuel ajoute Text (textes), Text Labels (libellés de texte) et Features (fonctionnalités) ; un agent vocal ajoute à la place Call (appel) et Call Labels (libellés d’appel).
Mise en page
| Champ | Valeur par défaut | Remarques |
|---|---|---|
| Placement | Bottom Right |
Le coin de la page dans lequel se place le lanceur. |
| Width | 540px |
Taille du panneau ouvert. |
| Height | 780px |
|
| Dismissible | Activé | Les visiteurs peuvent fermer le panneau. |
| Default Expanded | Désactivé | Activé : le panneau s’ouvre dès le chargement de la page. |
Avatar
| Champ | Valeur par défaut | Remarques |
|---|---|---|
| Type | Orb (WebGL) |
L’orbe animé, ou Image avec une Image URL (URL de l’image). |
| Orb Hue | Un curseur qui teinte l’orbe. | |
| Bubble Text | Chat with us, ou Talk to us pour un agent vocal |
Le message affiché à côté du lanceur. |
| Show Avatar | Activé | Désactivé, l’avatar est masqué à l’intérieur du panneau. |
Textes
Agents textuels uniquement.
| Champ | Valeur par défaut |
|---|---|
| Heading | What can I help with? |
| Subheading | Vide |
| Placeholder | Ask anything… |
Libellés de texte
Agents textuels uniquement. Les mots affichés sur les boutons et les états du widget, pour la traduction ou le ton :
Approve, Deny, Send, Stop, New Chat (New chat), Thinking
(Thinking…) et Error (Something went wrong). Approve et Deny
désignent les boutons qu’un visiteur voit lorsqu’un appel d’outil demande une confirmation.
Appel
Agents vocaux uniquement.
| Champ | Valeur par défaut |
|---|---|
| Agent Name | AI Assistant |
| Heading | Talk to us |
| Subheading | Une ligne indiquant au visiteur qu’il va parler avec un assistant IA |
Libellés d’appel
Agents vocaux uniquement. Les mots affichés sur les boutons et les états de l’appel : Start Call
(Start call), End Call (End call), Mute, Unmute, Transcript,
Connecting (Connecting…), Mic Denied (Allow microphone access to start a call.) et Call Error (Couldn't connect.).
Couleurs
Chaque couleur est une valeur hexadécimale avec un commutateur default (par défaut) : Primary,
Background, Foreground, Muted, Muted Text, Border,
Accent, User Bubble et, pour un agent textuel, AI Bubble. User Bubble
colore également les répliques de l’appelant dans la transcription d’un agent vocal. Radius définit l’arrondi
des coins (0.625rem par défaut).
Fonctionnalités
Agents textuels uniquement. Cinq commutateurs, tous activés par défaut :
| Commutateur | Affiche |
|---|---|
| Tool Calls | Les outils que l’agent appelle, intégrés dans la conversation. |
| Reasoning | L’état de réflexion de l’agent pendant son travail. |
| Attachments | Une commande permettant au visiteur de joindre des fichiers. |
| Voice | Un bouton pour dicter un message au lieu de le saisir. |
| Suggestions | Des réponses suggérées sous les messages de l’agent. |
Enregistrement et aperçu
L’aperçu se met à jour à mesure que vous saisissez ; Collapse (réduire), dans l’aperçu, affiche le lanceur tel qu’un visiteur le voit en premier. Choisissez Save (enregistrer) pour enregistrer le design sur l’agent. Le design fait partie de l’agent, il est donc versionné avec lui ; Embed Code (code d’intégration) fournit l’extrait qui affiche le design enregistré.
Vérification
- Rechargez la section : vos valeurs sont conservées et le libellé du préréglage correspond à ce que vous avez laissé.
- Sur une page où le widget est intégré, rechargez-la. Les modifications apparaissent sans toucher au code d’intégration.
Dépannage
- L’aperçu affiche les anciennes couleurs après Save. L’aperçu suit le formulaire ; le site suit le design enregistré. Forcez le rechargement de la page du site.
- Le widget ouvre un chat pour un agent vocal. L’extrait a été modifié à la main
ou copié depuis une ancienne page. Copiez-le à nouveau : l’extrait d’un agent vocal contient
voice-agent-id. - Les appels depuis le widget sont refusés. L’agent est privé. La section Widget l’indique au-dessus du formulaire ; rendez-le public sous Share agent (partager l’agent).