# Créez votre expérience de chat

Les outils de Zoom permettent de personnaliser et de lancer facilement 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 à un agent humain. Avec les outils de Zoom, vous pouvez créer une fenêtre de chat facile à voir et avec laquelle interagir, qui correspond à la marque de votre entreprise.

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

À partir de là, cliquez sur **+Ajout 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 réactive, ce qui signifie qu’elle adapte automatiquement sa mise en page 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 pour maximiser l’espace d’écran limité et garantir 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, vous pouvez 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. Lorsqu’elle est conçue avec soin, elle donne aux utilisateurs un contexte sur ce qu’ils peuvent 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 ajout le logo ou les couleurs de votre marque.

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

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

Ajout 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 de l’avatar**

Ajout une image de 40 sur 40 pixels pour qu’elle apparaisse dans la barre d’en-tête, seule ou à côté du texte d’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, sa disponibilité ou les heures d’assistance. Contrôlez la taille du texte d’en-tête en utilisant H1, H2, H3 ou la taille de paragraphe du corps.

<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 une conception épurée et minimaliste, vous pouvez choisir de **le laisser vide**, afin de concentrer 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 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 pouvoir toujours voir les icônes de réduction et de menu. Vous devrez peut-être aussi changez 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 créateur de fenêtre d’engagement vous permet de choisir les couleurs exactes que vous souhaitez pour votre chat. Vous devrez entrer des codes hexadécimaux pour chaque partie de la fenêtre et examiner l’aperçu pour voir son apparence.

Zoom fournit un modèle pour commencer. Pour que tout reste esthétique (et facile à lire), respectez les couleurs de votre marque et assurez-vous qu’il y a suffisamment de contraste entre le texte et les couleurs d’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é d’accueillir 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 **Engagement du chat** fenêtre, 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. Le plus courant est 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’ouvre et lance leur expérience.

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

De là, cliquez sur **+Ajout Campagne** ou ouvrez le brouillon d’une campagne existante. Faites défiler jusqu’à la **Invitation** 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 remarquée et cliquée ou touchée, sans être tellement grande qu’elle perturbe l’expérience utilisateur ou recouvre 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 contraste fortement 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 minimal de 3:1 pour les composants d’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 certaines conceptions par défaut au choix qui indiquent le démarrage d’un chat. Vous pouvez également ajouter votre propre icône personnalisée à l’aide d’un fichier SVG. Les fichiers SVG doivent peser moins de 10 Mo.
* **Rayon des coins :** À quel point souhaitez-vous que l’icône d’invitation soit arrondie ou carrée ? Jetez un œil à votre site pour voir s’il existe un modèle indiquant l’apparence des boutons, ou demandez à votre équipe de marque si elle a une préférence. L’utilisation d’un rayon de coin plus faible, comme 8 pixels, rendra votre invitation plus carrée. Un rayon de coin plus élevé, comme 28 pixels, rendra votre invitation plus ronde.
* **Ajout de texte à votre invitation :** L’ajout d’une étiquette de texte à un bouton d’invitation le rend plus clair et plus invitant. Les utilisateurs connaissent instantanément la fonction du bouton, il n’y a donc pas à deviner ce que signifie l’icône. Cependant, 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 polices 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 de regarder 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 à l’utilisabilité pour votre client ou éventuellement 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 à gauche ou à 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 couvre 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 couvre plus cet élément.
{% endhint %}

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

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

L’icône d’invitation de 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 invitation sur la page. Vous pouvez déplacer 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 souhaitez supprimer intégralement 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 souhaitez pas que l’icône d’invitation apparaisse sur les sites mobiles, décochez l’option « mobile phone » sous Ciblage de campagne. Pour configurer, 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 fixe 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 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 voulez à la fois une icône d’invitation fixe et déclencher l’ouverture du chat via un clic sur un bouton de votre site web ?

Créez une campagne en utilisant l’option d’invitation fixe, 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 chatte avec votre équipe ou votre agent virtuel ? La Fonctionnalités de Messagerie proactive de Zoom vous permet de configurez de lancer 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 de l’aide au bon moment.
* **Plus de prospects :** Des messages et des boutons personnalisés peuvent encourager les personnes à en savoir plus en chatant 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 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 sont restés sur cette page pendant une durée spécifique. Vous pouvez également 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 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 de tarification 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 (« Campaign A »), et une autre campagne (« Campaign B ») pour la page où vous souhaitez afficher un message proactif.

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

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

L’Emplacement de Campaign A doit exclure « zoom.us/pricing » et l’Emplacement de Campaign B doit contenir « zoom.us/pricing ». Ainsi, les utilisateurs visitant n’importe quelle URL contenant « zoom.us » verront l’invitation habituelle, 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. Elle 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 l’ensemble de vos expériences, ou vous pouvez 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’utilisation.

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

1. Préférences
2. Expérience client
3. Image et nom de l’avatar 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 Zoom centre de contact, 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 client
3. Afficher l’image

***

### Paramètres supplémentaires de configuration 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 un meilleur contrôle sur le comportement du chat Web et sur 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 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 tout le 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é*****&#x20;(par défaut) :** Le même chat reste ouvert d’une page à l’autre, de sorte que l’utilisateur peut poursuivre sa conversation sans interruption.
* **Lorsque la persistance est&#x20;*****désactivé*****:** 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 changez permet aux entreprises ayant plusieurs marques ou départements sur le même domaine de mieux séparer les campagnes de chat. Il empêche les utilisateurs de transférer 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 une **Préférences de Zoom Virtual Agent**.

#### <mark style="color:bleu;">Notifications audio</mark>

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


---

# Agent Instructions: 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:

```
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>
```

The question should be specific, self-contained, and written in natural language.
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.