> 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/services-daffaires/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md).

# Créez votre expérience de chat

Les outils 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 communiquent avec votre agent virtuel ou votre agent humain. Avec les outils Zoom, vous pouvez créer une fenêtre de chat facile à voir et à utiliser, qui correspond à l’image de marque de votre entreprise.

Pour créer ou modifier votre fenêtre d’engagement du chat, rendez-vous dans l’admin Web de Zoom.

| Si vous utilisez... | Puis cliquez...                           |
| ------------------- | ----------------------------------------- |
| centre de contact   | centre de contact, gestion des campagnes. |
| Agent virtuel       | AI Studio, Agents virtuels, Campagnes.    |

De là, cliquez sur **+ajout de 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 adaptative, ce qui signifie que sa mise en page s’ajuste automatiquement si votre utilisateur accède à votre site depuis son ordinateur de bureau 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 claire 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, choisissez 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 afin de 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 **barre d’en-tête du chat** est un élément clé de la conception de votre chat. Bien conçu, il donne aux utilisateurs le contexte de ce à quoi s’attendre de leur expérience d’assistance et de la confiance dans la conversation. Vous pouvez utiliser l’en-tête pour partager des informations sur votre équipe d’assistance et/ou faire l’ajout du logo ou des couleurs de votre marque.

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

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

Ajout d’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**

Ajout d’une image de 40 sur 40 pixels à afficher 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 quoi, comme le nom de votre équipe, sa 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 de 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 opter pour **le laisser vide**, en concentrant 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 utiliser **sélectionnez n’importe quelle couleur pour l’arrière-plan de l’en-tête et les icônes**, utile pour intégrer la conception de votre chat à votre site web.

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

Si vous changez la couleur d’arrière-plan, assurez-vous de pouvoir toujours voir les icônes de réduction et de menu. Vous devrez peut-être également 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, votre texte, vos icônes, et plus encore</mark>

Le générateur de fenêtre d’engagement vous permet de choisir exactement les couleurs 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 à quoi cela ressemble.

Zoom fournit un modèle pour commencer. Pour conserver une belle apparence (et une lecture facile), respectez les 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 d’accueil</mark>

Le **Écran d’accueil** 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 l’occasion de saluer vos Clients, de recueillir des informations auprès d’eux et d’adapter l’expérience à votre marque.

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

***

### 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/services-daffaires/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’ouvre et lance leur expérience.

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

| Si vous utilisez... | Puis cliquez...                           |
| ------------------- | ----------------------------------------- |
| centre de contact   | centre de contact, gestion des campagnes. |
| Agent virtuel       | AI Studio, Agents virtuels, Campagnes.    |

À partir de là, cliquez **+ajout de campagne** ou ouvrez le brouillon d’une campagne existante. Faites défiler jusqu’à la **invitation** la 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 persistante** icône :

* **Taille du bouton :** La taille de votre icône d'invitation de chat doit être suffisamment grande pour être facilement remarquée et cliquée ou touchée, mais pas 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 contraste élevé avec l'arrière-plan de votre site Web. Nous vous recommandons de suivre [les directives WCAG 2.1](https://www.w3.org/TR/WCAG21/#contrast-minimum), qui impose 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 quelques designs par défaut. Choisissez-en un qui indique le démarrage d'un chat. Vous pouvez également faire l’ajout de 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 ? Examinez votre site Web pour voir s'il existe un style récurrent dans l'apparence des boutons, ou demandez à votre équipe de marque si elle a une préférence. Un rayon d'angle plus faible, comme 8 pixels, rendra votre invitation plus carrée. Un rayon d'angle plus élevé, comme 28 pixels, rendra votre invitation plus arrondie.
* **Ajout de texte à votre invitation :** L’ajout d’une étiquette textuelle à un bouton d’invitation le rend plus clair et plus attrayant. Chaque utilisateur comprend instantanément la fonction du bouton, donc il n’est pas nécessaire de deviner ce que signifie l’icône. Cependant, cela prend aussi plus de place et peut encombrer l’écran, surtout sur mobile. Veillez à prendre en compte votre public et les appareils qu’il utilise le plus souvent. Si vous faites l’ajout d’une police, choisissez parmi les options de police prédéfinies Arial, Georgia, Tahoma ou Verdana ; ou téléversez 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 courant pour une icône d’invitation d’Assistance se trouve dans 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 dispose déjà d’une bannière ou d’un bouton à cet Emplacement, cela pourrait nuire à l’ergonomie pour votre client ou perturber les flux de l’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 les appareils mobiles, augmentez le décalage jusqu’à ce que l’icône d’invitation ne recouvre plus cet élément.
{% endhint %}

Vous pouvez aussi « Activer le fait de faire glisser et de déplacer l’invitation » pour offrir à l’utilisateur encore plus de flexibilité afin de déplacer l’icône sur la page.

#### <mark style="color:bleu;">Question courante</mark>

L’icône d’invitation de chat bloque ou distrait l’utilisateur sur une page particulière sur mobile. Quelles sont mes options ?

**Réponse :**

Il existe plusieurs façons d'y parvenir.

* **Option 1 :** changez la position de l'icône invitation sur la page. Vous pouvez modifier l'Emplacement de l'invitation sur la page à l'aide des options de décalage et de position. Cela se configure en modifiant l'invitation.
* **Option 2 :** Afficher ou Masquer l'icône chat en fonction de l'Emplacement de la page. Si vous voulez supprimer complètement l'invitation 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 invitation apparaisse sur les sites mobiles, décochez l'option « mobile phone » sous Ciblage de campagne. Pour configurer, cliquez **Campagne**, **Ciblage**.

Zoom Campaigns propose une [**invitation intégrée**](/technical-library/fr/services-daffaires/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 sur votre site, 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 Zoom Campaign pour le connecter au chat. Lorsqu’un utilisateur clique sur cet élément, il lance la fenêtre de chat et démarre l’expérience de la campagne. Vous pouvez également utiliser un HTML existant sur votre site pour déclencher la fenêtre de chat si vous 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 souhaitez à la fois une icône d’invitation collante et déclencher l’ouverture du chat par un clic sur un bouton de votre site ?

Créez une campagne en utilisant l’option d’invitation collante, 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 un moyen 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 et permet aux entreprises d’initier des conversations avec les visiteurs, au lieu d’attendre que le client commence le chat en cliquant sur l’invitation.

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

* **Meilleur engagement :** Vous pouvez capter l’attention des personnes et offrir votre aide au bon moment.
* **Plus de prospects :** Des messages et boutons personnalisés peuvent encourager les personnes à 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é se configure sous **Campagnes**, et est disponible pour les campagnes de chat sur les 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 se trouvent sur cette page depuis une certaine durée. Vous pouvez également choisir si vous souhaitez que l’utilisateur voie le message une seule fois sur une période de 24 heures, ou si vous souhaitez 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 courante</mark>

Je veux avoir une icône d’invitation afin 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 devrez créer deux Campagnes : une pour votre invitation Standard sur l’ensemble de votre site web (« Campaign A »), et une autre Campagne (« Campaign B ») pour la page où vous souhaitez avoir 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 standard, 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 apporte 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 ne se connecte avec un agent (par exemple, un message de bienvenue ou Virtual Agent), vous pouvez définir un seul avatar par défaut pour toutes vos expériences, ou définir un avatar unique pour chaque flux de chat individuel. Cela vous offre la flexibilité de conserver une cohérence ou d’adapter l’expérience à différentes marques ou cas d’usage.

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

1. Préférences
2. Expérience du consommateur
3. Avatar et nom du message de 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 le centre de contact Zoom, vous pouvez également contrôler l’apparence de l’avatar de l’agent. 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 consommateur
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 le SDK de campagne Zoom</mark>

Le SDK de campagne du centre de contact Zoom (ZCC) et de Zoom Virtual Agent (ZVA) 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 par programmation 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 du 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 sur l’ensemble 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 poursuivre sa conversation sans interruption.
* **Lorsque la persistance est&#x20;*****désactivée*****:** Le chat ne se poursuit pas lorsque l’utilisateur navigue vers une nouvelle page, à moins que cette page ne fasse explicitement partie de l’emplacement défini de la première campagne.

Ce changement facilite la séparation des campagnes de chat pour les entreprises ayant plusieurs marques ou départements sur le même domaine. Il évite aux utilisateurs de conserver un chat entre des pages sans rapport 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;">Notifications sonores</mark>

Par défaut, lorsque votre agent ou votre agent virtuel envoie un message dans le chat web, les consommateurs entendent un son de notification. Si les sons par défaut nuisent à 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 du chat, s’ils le souhaitent.


---

# 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/services-daffaires/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.