--- title: Concepteur de widget description: >- 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//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](/fr/deploy/widget-and-embed/embed-code) 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. ![Le Widget Configurator avec l'aperçu et les préréglages.](/media/deploy/widget-designer.webp) ## 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. ![La rangée de préréglages.](/media/deploy/widget-presets.webp) ## 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. | ![Les commutateurs Features.](/media/deploy/widget-features.webp) ## 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). ## Ressources associées - [Code d'intégration](/fr/deploy/widget-and-embed/embed-code) - [Lien de partage](/fr/deploy/widget-and-embed/share-link) - [Tests dans le navigateur](/fr/test-and-improve/testing-in-the-browser) - [Versions](/fr/test-and-improve/versions)