> For the complete documentation index, see [llms.txt](https://library.zoom.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://library.zoom.com/technical-library/fr/affaires-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md).

# Créez votre expérience de chat

Les outils de Zoom facilitent la personnalisation et le lancement de votre expérience de chat avec peu ou pas de code.

### Fenêtre d’engagement du chat

La fenêtre d’engagement du chat est la façon dont vos utilisateurs envoient des messages à votre agent virtuel ou à votre agent humain. Avec les outils de Zoom, vous pouvez créer une fenêtre de chat facile à voir et à utiliser, et qui correspond à l’image de marque de votre entreprise.

Pour créer ou modifier votre fenêtre d’engagement du chat, accédez à l’admin Web de Zoom.

À partir de là, cliquez sur **+Ajouter une campagne** ou ouvrez le brouillon d’une campagne existante. Faites défiler jusqu’à la **Fenêtre d’engagement du chat** section pour créer ou modifier votre fenêtre.

#### <mark style="color:bleu;">Taille de la fenêtre et expérience mobile</mark>

La fenêtre d’engagement du chat de Zoom est responsive, ce qui signifie qu’elle adapte automatiquement sa mise en page si votre utilisateur accède à votre site depuis son ordinateur ou son smartphone.

Sur les appareils mobiles, la fenêtre de chat s’ouvre en plein écran afin de maximiser l’espace d’écran limité et d’assurer une expérience propre et lisible.

<figure><img src="/files/acfcbcd0f64725578716ecfd4a7a2cc97a357764" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

<figure><img src="/files/19f7b00b9749bb5179379211a8f064149636c8c8" alt="" width="375"><figcaption></figcaption></figure>

Pour les utilisateurs qui accèdent à votre chat sur des appareils de bureau, vous pouvez choisir parmi trois options de taille pour la hauteur de la fenêtre :

* **S :** 540 pixels
* **M :** 650 pixels, **par défaut**
* **L :** 780 pixels

{% hint style="info" %}
**Remarque**

La largeur est toujours fixée à 420 pixels pour garantir la lisibilité.
{% endhint %}

<figure><img src="/files/a9b2463bf63d28c09300138d2dd2fc388e2494a2" alt="Image of desktop Zoom Virtual Agent window, opened in the lower right corner of the window."><figcaption></figcaption></figure>

#### <mark style="color:bleu;">Barre d’en-tête</mark>

Le **la barre d’en-tête du chat** est un élément clé de la conception de votre chat. Lorsqu’elle est conçue de manière réfléchie, elle donne aux utilisateurs le contexte de ce à quoi s’attendre de leur expérience d’Assistance et renforce leur confiance dans la conversation. Vous pouvez utiliser l’en-tête pour partager des informations sur votre équipe d’Assistance et/ou ajouter le logo ou les couleurs de votre marque.

Zoom CX propose plusieurs options de conception d’en-tête parmi lesquelles vous pouvez choisir.

**Image d’en-tête complète**

Ajoutez une image de 426 pixels sur 95 pixels qui remplit tout l’espace de l’en-tête, idéale pour des conceptions personnalisées.

<figure><img src="/files/4d3020122537ad5d5cec7352f1adbda5b7d529d2" alt="This image shows a chat window with a blue gradient header that says Zoom Virtual Agent. The image fills the header space." width="375"><figcaption></figcaption></figure>

**Taille de l’image d’avatar**

Ajoutez une image de 40 sur 40 pixels pour qu’elle apparaisse dans la barre d’en-tête, seule ou à côté du texte de l’en-tête.

{% columns %}
{% column %}

<figure><img src="/files/cda19761e1262a8714907831878568a5dee56f63" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/19f7b00b9749bb5179379211a8f064149636c8c8" alt="Image of a chat screen with Zoom logo and header text in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

**Texte d’en-tête uniquement**

Partagez une brève note sur n’importe quel sujet, comme le nom de votre équipe, la disponibilité ou les horaires d’Assistance. Contrôlez la taille du texte de l’en-tête en utilisant les tailles H1, H2, H3 ou paragraphe.

<figure><img src="/files/6664bb0e7f064a223d29a12d71af86e54aa915a7" alt="Image of a chat screen with header text only in the header bar." width="375"><figcaption></figcaption></figure>

Pour un design épuré et minimaliste, vous pouvez choisir de **le laisser vide**, en concentrant l’attention de vos utilisateurs sur le chat.

<figure><img src="/files/a13626c2c06bec88e4c275264c094da3866921d6" alt="Image of a chat screen with nothing in the header bar." width="375"><figcaption></figcaption></figure>

Vous pouvez **sélectionnez n’importe quelle couleur pour l’arrière-plan et les icônes de l’en-tête**, ce qui est utile pour harmoniser la conception de votre chat avec votre site web.

{% hint style="warning" %}
**Attention**

Si vous changez la couleur d’arrière-plan, assurez-vous de toujours pouvoir voir les icônes de réduction et de menu. Vous devrez peut-être aussi changer la couleur des icônes.

<img src="/files/13903a8136d1b16128f24b423f0d2ac49570eb9b" alt="Image of a chat screen with a blue header bar, with no logo or text." data-size="original">
{% endhint %}

#### <mark style="color:bleu;">Couleurs pour votre bulle de chat, le texte, les icônes et plus encore</mark>

Le générateur de fenêtre d’engagement vous permet de choisir les couleurs exactes que vous souhaitez pour votre chat. Vous saisirez des codes hexadécimaux pour chaque partie de la fenêtre et examinerez l’aperçu pour voir son apparence.

Zoom fournit un modèle pour commencer. Pour conserver une belle apparence (et une bonne lisibilité), restez fidèle aux couleurs de votre marque et assurez-vous qu’il y a suffisamment de contraste entre les couleurs du texte et de l’arrière-plan.

<figure><img src="/files/deab4fb0096934a40c5b28d7d5b8ff7c65672edf" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

#### <mark style="color:bleu;">Écran de bienvenue</mark>

Le **Écran de bienvenue** dans Zoom centre de contact et Zoom Virtual Agent est un écran d’introduction Optionnel qui apparaît avant le début du chat, vous donnant la possibilité de saluer vos Clients, de recueillir des informations auprès d’eux et d’adapter l’expérience à votre marque.

Ceci est Disponible pour l’expérience de chat web. Pour configurez, cliquez sur la **fenêtre d’engagement du chat** puis sur l’ **Écran de bienvenue** onglet.

***

### Conception de l’invitation

L’invitation est ce qui lancera l’expérience d’Assistance sur votre site web. Il est le plus courant d’utiliser le [**Fixe** type d'invitation](/technical-library/fr/affaires-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts), qui est une icône flottante qui apparaît sur votre site web. Lorsque vos utilisateurs cliquent dessus, la fenêtre de chat s'ouvrira et lancera leur expérience.

Pour créer ou modifier une invitation, allez dans l'admin Web de Zoom.

À partir de là, cliquez sur **+Ajouter une campagne** ou ouvrez le brouillon d’une campagne existante. Faites défiler jusqu’à la **Invitation** section pour créer une nouvelle invitation.

<figure><img src="/files/1e33b5a0b63c54ce9d91f7d03127672044974ba3" alt="Image of a Zoom Support window that says &#x22;Hello! How can we help?&#x22;" width="375"><figcaption></figcaption></figure>

Vous pouvez configurez les Paramètres suivants pour votre **Invitation collante** icône :

* **Taille du bouton :** La taille de votre icône d'invitation de chat doit être suffisamment grande pour être facilement repérée et cliquée ou touchée, mais pas trop grande au point de perturber l'expérience utilisateur ou de couvrir du contenu important. Zoom propose trois tailles d'invitation :
  * **S :** 40 pixels
  * **M :** 56 pixels, **par défaut**
  * **L :** 72 pixels
* **Couleur du bouton :** Choisissez une couleur de bouton qui présente un fort contraste avec l'arrière-plan de votre site web. Nous recommandons de suivre [les directives WCAG 2.1](https://www.w3.org/TR/WCAG21/#contrast-minimum), qui exigent un rapport de contraste minimum de 3:1 pour les composants de l'interface utilisateur (UI), comme les icônes et les boutons, par rapport à leur arrière-plan.
* **Icône :** Une icône peut aider vos utilisateurs à se faire une idée de ce à quoi ils peuvent s'attendre lorsqu'ils appuient sur le bouton. Zoom propose certains modèles par défaut à choisir pour indiquer le début d'un chat. Vous pouvez également ajout votre propre icône personnalisée à l'aide d'un fichier SVG. Les fichiers SVG doivent faire moins de 10 Mo.
* **Rayon des coins :** À quel point voulez-vous que l’icône d’invitation soit arrondie ou carrée ? Regardez votre site pour voir s’il existe un modèle de présentation des boutons, ou demandez à votre équipe de marque si elle a une préférence. Un rayon des coins plus faible, comme 8 pixels, rendra votre invitation plus carrée. Un rayon des coins plus élevé, comme 28 pixels, rendra votre invitation plus ronde.
* **Ajout de texte à votre invitation :** Ajouter une étiquette de texte à un bouton d’invitation le rend plus clair et plus invitant. Les utilisateurs comprennent instantanément l’objectif du bouton, donc il n’y a pas à deviner ce que signifie l’icône. En revanche, cela prend aussi plus de place et peut encombrer l’écran, surtout sur mobile. Veillez à tenir compte de votre public et des appareils qu’il utilise le plus souvent. Si vous ajoutez une police, vous pouvez choisir parmi les options de police prédéfinies Arial, Georgia, Tahoma ou Verdana ; ou téléverser votre propre police personnalisée à l’aide d’un fichier TTF.

#### <mark style="color:bleu;">**Emplacement de l’invitation sur la page**</mark>

L’emplacement le plus populaire pour une icône d’invitation d’Assistance est le coin inférieur droit, avec un décalage de 20 pixels par rapport au bas et au côté. C’est généralement facile à repérer sans bloquer le contenu clé.

Nous vous recommandons d’examiner votre propre site sur ordinateur et sur mobile. Si votre site comporte déjà une bannière ou un bouton à cet emplacement, cela pourrait nuire à la facilité d’utilisation pour votre client ou perturber les parcours utilisateur.

Si vous avez déjà un élément (comme une bannière de cookies, une barre de navigation ou un autre widget) au même endroit que votre icône d’invitation de chat, envisagez de modifier l’alignement vers la gauche ou la droite, ou d’ajuster le décalage par rapport au bas ou aux côtés.

{% hint style="success" %}
**Exemple**

Si vous constatez que votre bouton d’invitation de chat masque un lien critique en bas de votre page sur des appareils mobiles, augmentez le décalage jusqu’à ce que l’icône d’invitation ne couvre plus cet élément.
{% endhint %}

Vous pouvez également « Activer les consommateurs à faire glisser et déplacer l’invitation » pour offrir à vos utilisateurs encore plus de flexibilité afin de déplacer l’icône sur la page.

#### <mark style="color:bleu;">Question fréquente</mark>

L’icône d’invitation du chat bloque ou distrait les utilisateurs sur une page particulière sur les appareils mobiles. Quelles sont mes options ?

**Réponse :**

Il existe plusieurs façons d’y parvenir.

* **Option 1 :** changez la position de l’icône d’invitation sur la page. Vous pouvez déplacer l’emplacement de l’invitation sur la page en utilisant les options de décalage et de position. Cela est configuré en modifiant l’invitation.
* **Option 2 :** Afficher ou Masquer l’icône de chat en fonction de l’Emplacement de la page. Si vous souhaitez supprimer entièrement l’invitation de chat pour toutes les pages de paiement, modifiez l’Emplacement pour exclure les pages de paiement. Par exemple, vous pouvez exclure toutes les pages contenant « paiement » dans l’URL.
* **Option 3 :** Configurez le ciblage par Appareil. Si vous ne voulez pas que l’icône d’invitation apparaisse sur les sites mobiles, décochez l’option « téléphone mobile » sous Ciblage de campagne. Pour configurer cela, cliquez sur **Campagne**, **Ciblage**.

Zoom Campaigns propose une [**invitation intégrée**](/technical-library/fr/affaires-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) option si vous ne souhaitez pas utiliser l’icône collante par défaut pour lancer le chat. Cela vous permet de transformer n’importe quel élément de votre site Web, comme un bouton dans votre menu ou un lien sur une page, en déclencheur pour ouvrir la fenêtre de chat.

Pour ce faire, vous créez l’élément dans le HTML de votre site et utilisez le SDK de campagne Zoom pour le connecter au chat. Lorsqu’un utilisateur clique sur cet élément, cela lance la fenêtre de chat et démarre l’expérience de campagne. Vous pouvez également utiliser le HTML existant sur votre site Web pour déclencher la fenêtre de chat si vous le préférez.

<figure><img src="/files/c9e0c66ccf8ae05583de64257bc2b367b3d521ce" alt="Image of the Create Embedded Invitation screen." width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**Attention**

Vous voulez à la fois une icône d’invitation persistante et déclencher l’ouverture du chat via un clic sur un bouton de votre site Web ?

Créez une campagne à l’aide de l’option invitation persistante, puis utilisez [le SDK de campagne de Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) pour déclencher l'ouverture du chat.
{% endhint %}

***

### Messagerie proactive

Et si vous vouliez une manière plus Actif d’attirer l’attention de votre utilisateur afin qu’il chat avec votre équipe ou votre agent virtuel ? La Fonctionnalités de messagerie proactive de Zoom vous permet de configurez permet aux entreprises d’initier des conversations avec les visiteurs, plutôt que d’attendre que le client démarre le chat en cliquant sur l’invitation.

#### <mark style="color:bleu;">Comment cela aide</mark>

* **Meilleur engagement :** Vous pouvez capter l’attention des gens et offrir votre aide au bon moment.
* **Plus de prospects :** Des messages et des boutons personnalisés peuvent encourager les gens à En savoir plus en discutant avec un agent, ou à partager leurs informations pour un appel de suivi.
* **Assistance plus rapide :** Connectez rapidement les visiteurs à un bot ou à un agent en direct, afin qu'ils obtiennent des réponses sans délai.

Lorsqu’un utilisateur arrive sur une page où la messagerie proactive est activée, il recevra un message et pourra cliquer sur des boutons pour démarrer un flux spécifique.

#### <mark style="color:bleu;">Où le configurer</mark>

Cette Fonctionnalités est configurée sous **Campagnes**, et est Disponible pour les campagnes de chat sur des pages web qui utilisent le **Fixe** type d’invitation.

#### <mark style="color:bleu;">Ciblez vos utilisateurs</mark>

Vous pouvez définir un délai pour votre message proactif, afin qu’il n’apparaisse que pour les utilisateurs qui sont sur cette page depuis une durée spécifique. Vous pouvez aussi choisir si vous voulez que l’utilisateur voie le message une seule fois sur une période de 24 heures, ou si vous voulez que le message proactif réapparaisse si l’utilisateur actualise la page ou visite une autre page correspondante.

<figure><img src="/files/5560db881ba40895773668fac2740f571049d042" alt="Image of a Zoom Campaign window that asks &#x22;How can I help&#x22;." width="191"><figcaption></figcaption></figure>

#### <mark style="color:bleu;">Question fréquente</mark>

Je veux avoir une icône d’invitation pour que mes utilisateurs puissent démarrer un chat à tout moment, mais je veux aussi envoyer à mes Clients un message proactif sur une page spécifique (par exemple, la page des tarifs de mon entreprise). Comment puis-je configurer cela ?

**Réponse**

Vous voudrez créer deux campagnes : une pour votre invitation standard sur l’ensemble de votre site web (« Campagne A »), et une autre campagne (« Campagne B ») pour la page où vous souhaitez afficher un message proactif.

Pour chaque campagne, vous devrez définir les Emplacements de campagne afin qu’ils ne se chevauchent pas.

{% hint style="success" %}
**Exemple**

L’Emplacement de la Campagne A doit exclure « zoom.us/pricing » et l’Emplacement de la Campagne B doit contenir « zoom.us/pricing. » Ainsi, les utilisateurs visitant toute URL contenant « zoom.us » verront l’invitation normale, mais les utilisateurs qui arrivent sur la page spécifique « zoom.us/pricing » verront apparaître le message proactif.
{% endhint %}

***

### Avatars

Un avatar est l’image qui apparaît à côté des messages dans le chat web. Il contribue à apporter de la personnalité et de la Personnalisation à la conversation.

<figure><img src="/files/9085efbcfe685d589937ab68bf1d63cadee74a0a" alt="Image of the Zoom Virtual Agent avatar, including a picture of a woman with dark hair and a headset." width="375"><figcaption></figcaption></figure>

Pour les messages envoyés avant qu’un utilisateur se connecte avec un agent (par exemple, un message de bienvenue ou un Agent virtuel), vous pouvez définir un seul avatar par défaut pour toutes vos expériences, ou vous pouvez définir un avatar unique pour chaque flux de chat individuel. Cela vous donne la flexibilité de garder une cohérence ou d’adapter l’expérience à différentes marques ou cas d’utilisation.

Si vous utilisez **Zoom centre de contact**, cliquez sur ce qui suit :

1. Préférences
2. Expérience du client
3. Avatar et nom du flux par défaut.

Si vous utilisez **Zoom Virtual Agent uniquement**, cliquez sur ce qui suit :

1. AI Studio
2. Agents virtuels
3. chatbots
4. Paramètres

<figure><img src="/files/cd79c922b33d42d1e97fd95e99b0d49d479b418f" alt="Side-by-side image of the Customize Name and Avatar screen and a rendering of the settings."><figcaption></figcaption></figure>

Lorsque votre client passe du bot à un agent en direct dans Zoom centre de contact, vous pouvez également contrôler la façon dont l’avatar de l’agent apparaît. Vous pouvez choisir d’Afficher la photo de profil de l’agent depuis le centre de contact, ses initiales ou une image d’avatar définie.

Pour configurer, cliquez sur ce qui suit :

1. Préférences
2. Expérience du client
3. Afficher l’image

***

### Paramètres de configuration supplémentaires du chat

#### <mark style="color:bleu;">Contrôlez la fenêtre de chat Web avec Zoom Campaign SDK</mark>

Zoom Centre de contact (ZCC) et Zoom Virtual Agent (ZVA) Campaign SDK offre aux développeurs davantage de contrôle sur le comportement du chat Web et son interaction avec votre site Web. Il vous permet d’ouvrir, de fermer et de contrôler le comportement du chat de manière programmatique en fonction des actions de l’utilisateur, du contexte de la page ou d’une logique personnalisée.

Par exemple, vous pouvez faire en sorte que votre fenêtre de chat s’ouvre automatiquement lorsque vos utilisateurs sont sur la page depuis un certain nombre de secondes ou cliquent sur un bouton particulier.

Voir [Référence SDK de la documentation développeur Zoom](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) pour plus de détails.

#### <mark style="color:bleu;">Persistance du chat à l’échelle du site</mark>

La persistance du chat contrôle si la session de chat d’un utilisateur se poursuit lorsqu’il passe d’une page à une autre sur votre site Web.

* **Lorsque la persistance est&#x20;*****activée*****&#x20;(par défaut) :** Le même chat reste ouvert d’une page à l’autre, afin que l’utilisateur puisse continuer leur conversation sans interruption.
* **Lorsque la persistance est&#x20;*****désactivé*****:** Le chat ne se poursuit pas lorsque l’utilisateur navigue vers une nouvelle page, sauf si cette page fait explicitement partie de l’Emplacement défini de la première campagne.

Ce changez rend plus facile pour les entreprises ayant plusieurs marques ou services sur le même domaine de garder les campagnes de chat séparées. Cela empêche les utilisateurs de տեղափոխer un chat entre des pages sans lien et réduit le besoin de configuration manuelle.

Trouvez ce paramètre sous **Zoom centre de contact** et **Préférences de Zoom Virtual Agent**.

#### <mark style="color:bleu;">Notification Audio</mark>

Par défaut, lorsque votre agent ou agent virtuel envoie un message dans le chat web, les consommateurs entendent un son Audio de Notification. Si les sons par défaut semblent perturber l’expérience de votre marque, vous pouvez les désactiver sous **Zoom centre de contact** ou **Préférences de Zoom Virtual Agent**.

Les consommateurs auront toujours la possibilité de les réactiver dans le menu de chat, s’ils le préfèrent.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://library.zoom.com/technical-library/fr/affaires-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.