# Uw chatervaring bouwen

Met de tools van Zoom kun je je chatberichtervaring eenvoudig aanpassen en lanceren, met weinig tot geen code.

### Chatberichtbetrokkenheidsvenster

Het chatberichtbetrokkenheidsvenster is hoe je gebruikers berichten versturen met je virtuele agent of menselijke agent. Met de tools van Zoom kun je een chatberichtvenster bouwen dat gemakkelijk te zien en te gebruiken is en past bij het merk van je bedrijf.

Als je je Chatberichtbetrokkenheidsvenster wilt maken of bewerken, ga je naar Zoom's Webbeheerder.

Klik daar op **+Toevoegen Campagne** of open de conceptversie van een bestaande campagne. Scroll naar de **Chatberichtbetrokkenheidsvenster** sectie om je venster te maken of te bewerken.

#### <mark style="color:blauw;">Venstergrootte en mobiele ervaring</mark>

Het chatberichtbetrokkenheidsvenster van Zoom is responsief, wat betekent dat de lay-out automatisch wordt aangepast als je gebruiker je locatie bezoekt vanaf zijn desktop of smartphone.

Op mobiele apparaten wordt het chatberichtvenster op volledig scherm geopend om de beperkte schermruimte te maximaliseren en een nette, leesbare ervaring te garanderen.

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

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

Voor gebruikers die uw chatbericht op desktopapparaten openen, kunt u Kies uit drie formaatopties voor de vensterhoogte:

* **S:** 540 pixels
* **M:** 650 pixels, **Standaard**
* **L:** 780 pixels

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

De breedte staat altijd vast op 420 pixels om de leesbaarheid te garanderen.
{% endhint %}

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

#### <mark style="color:blauw;">Kopbalk</mark>

De **chatbericht-kopbalk** is een belangrijk element van je chatontwerp. Wanneer dit doordacht wordt ontworpen, geeft het gebruikers context over wat ze kunnen verwachten van hun ondersteuningservaring en vertrouwen in het gesprek. Je kunt de koptekst gebruiken om informatie te delen over je ondersteuningsteam en/of het logo of de kleuren van je merk Toevoegen.

Zoom CX biedt verschillende ontwerpopties voor de koptekst waaruit je kunt Kies.

**Volledige kopafbeelding**

Toevoegen een afbeelding van 426 pixels bij 95 pixels die de volledige ruimte van de koptekst vult, ideaal voor aangepaste ontwerpen.

<figure><img src="/files/ace163d8990318bb2bc8c6b6f59d66bcdab1361c" 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>

**Grootte van avatarafbeelding**

Toevoegen een afbeelding van 40 bij 40 pixels die in de kopbalk verschijnt, op zichzelf of naast koptekst.

{% columns %}
{% column %}

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

{% column %}

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

**Alleen koptekst**

Deel een korte opmerking over alles, zoals de naam van je team, beschikbaarheid of ondersteuningstijden. Bepaal de grootte van de koptekst door H1-, H2-, H3- of hoofdtekstparagraafgrootte te gebruiken.

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

Voor een gestroomlijnd, minimalistisch ontwerp kunt u ervoor kiezen om **het leeg te laten**, zodat uw gebruikers zich op het chatbericht richten.

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

U kunt **Selecteer elke kleur voor de achtergrond en pictogrammen van de koptekst**, handig om uw chatberichtontwerp af te stemmen op uw website.

{% hint style="warning" %}
**Let op**

Als u de achtergrondkleur Wijzigen, zorg er dan voor dat u de pictogrammen voor minimaliseren en menu nog steeds kunt zien. U moet mogelijk ook de pictogramkleur Wijzigen.

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

#### <mark style="color:blauw;">Kleuren voor uw chatberichtballon, tekst, pictogrammen en meer</mark>

Met de bouwer van het engagementvenster kunt u de exacte kleuren voor uw chatbericht kiezen. U voert hex-codes in voor elk onderdeel van het venster en bekijkt de voorbeeldweergave om te zien hoe het eruitziet.

Zoom biedt een sjabloon om mee te beginnen. Om alles er geweldig uit te laten zien (en gemakkelijk leesbaar te houden), houdt u zich aan uw merkkleuren en zorg ervoor dat er voldoende contrast is tussen tekst- en achtergrondkleuren.

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

#### <mark style="color:blauw;">Welkomstscherm</mark>

De **Welkomstscherm** in Zoom contactcenter en Zoom Virtual Agent is een optioneel introductiescherm dat verschijnt voordat het chatbericht begint, zodat u de kans krijgt om uw Klanten te begroeten, informatie van hen te verzamelen en de ervaring af te stemmen op uw merk.

Dit is Beschikbaar voor de web chatberichtervaring. Om te Configureer, klikt u op de **Chatberichtbetrokkenheid** venster, vervolgens de **Welkomstscherm** Tabblad.

***

### uitnodigingontwerp

De uitnodiging is wat de ondersteuningservaring op uw website start. Het meest gebruikelijk is om de [**Sticky** uitnodigingstype](/technical-library/nl/zakelijke-diensten/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts), dit is een zwevend pictogram dat op uw website verschijnt. Wanneer uw gebruikers erop klikken, wordt het chatberichtvenster geopend en begint hun ervaring.

Om een uitnodiging te maken of te bewerken, gaat u naar Zoom's Webbeheerder.

Klik daar op **+Toevoegen Campagne** of open de conceptversie van een bestaande campagne. Scroll naar de **uitnodiging** gedeelte om een nieuwe uitnodiging te maken.

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

U kunt de volgende Instellingen Configureer voor uw **Vastgezette uitnodiging** pictogram:

* **Knopgrootte:** De grootte van uw chatbericht-uitnodigingspictogram moet groot genoeg zijn om gemakkelijk opgemerkt en aangeklikt of getikt te worden, maar niet zo groot dat het de gebruikerservaring verstoort of belangrijke inhoud bedekt. Zoom biedt drie uitnodigingsformaten:
  * **S:** 40 pixels
  * **M:** 56 pixels, **Standaard**
  * **L:** 72 pixels
* **Knopkleur:** Kies een knopkleur die een hoog contrast heeft met de achtergrond van uw website. We raden aan de [WCAG 2.1-richtlijnen](https://www.w3.org/TR/WCAG21/#contrast-minimum)te volgen, wat een minimale contrastverhouding van 3:1 is voor componenten van de gebruikersinterface (UI), zoals pictogrammen en knoppen, ten opzichte van hun achtergrond.
* **Pictogram:** Een pictogram kan uw gebruikers helpen een idee te krijgen van wat ze kunnen verwachten wanneer ze op de knop tikken. Zoom biedt enkele Standaard ontwerpen om uit te kiezen die aangeven dat een chatbericht wordt gestart. U kunt ook uw eigen aangepaste pictogram Toevoegen met behulp van een SVG-bestand. SVG-bestanden moeten kleiner zijn dan 10 MB.
* **Hoekstraal:** Hoe afgerond of vierkant wilt u dat het uitnodiging pictogram is? Kijk op uw locatie om te zien of uw locatie een patroon heeft voor hoe knoppen eruitzien, of vraag uw merkteam of zij een voorkeur hebben. Door een kleinere hoekstraal te gebruiken, zoals 8 pixels, wordt uw uitnodiging vierkanter. Een grotere hoekstraal, zoals 28 pixels, maakt uw uitnodiging ronder.
* **Toevoegen Tekst aan Uw uitnodiging:** Het toevoegen van een tekstlabel aan een uitnodigingsknop maakt het duidelijker en uitnodigender. Gebruikers weten meteen wat het doel van de knop is, dus er is geen giswerk over wat het pictogram betekent. Het neemt echter ook meer ruimte in beslag en kan het Scherm rommeliger maken, vooral op mobiele apparaten. Zorg ervoor dat u rekening houdt met uw publiek en de apparaten die zij het vaakst gebruiken. Als u een lettertype toevoegt, kunt u kiezen uit vooraf ingestelde lettertypeopties Arial, Georgia, Tahoma of Verdana; of uw eigen aangepaste lettertype uploaden met een TTF-bestand.

#### <mark style="color:blauw;">**Uitnodiging Locatie op de pagina**</mark>

De populairste Locatie voor een ondersteuning uitnodiging pictogram is de rechterbenedenhoek, met een offset vanaf de onder- en zijkant van 20 pixels. Dit is meestal gemakkelijk op te merken zonder belangrijke inhoud te blokkeren.

We raden aan om uw eigen locatie zowel op desktop als mobiel te bekijken. Als uw locatie al een banner of knop op deze locatie heeft, kan dit de bruikbaarheid voor uw klant schaden of mogelijk gebruikersstromen verstoren.

Als u al een element hebt (zoals een cookiebanner, navigatiebalk of een andere widget) op dezelfde plek als uw chatbericht uitnodiging pictogram, overweeg dan om de uitlijning naar links of rechts te wijzigen, of de offset vanaf de onder- of zijkanten aan te passen.

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

Als u merkt dat uw chatbericht uitnodigingsknop een belangrijke link onderaan uw pagina op mobiele apparaten bedekt, vergroot dan de offset totdat het uitnodiging pictogram dat element niet langer bedekt.
{% endhint %}

U kunt ook "Inschakelen consumenten om de uitnodiging te slepen en te verplaatsen" om uw gebruikers nog meer flexibiliteit te geven om het pictogram over de pagina te verplaatsen.

#### <mark style="color:blauw;">Veelvoorkomende vraag</mark>

Het chatbericht-uitnodigingicoon blokkeert of stoort gebruikers op een bepaalde pagina op mobiele apparaten. Wat zijn mijn opties?

**Antwoord:**

Er zijn verschillende manieren waarop u dit kunt bereiken.

* **Optie 1:** Wijzigen de positie van het uitnodiging-pictogram op de pagina. U kunt de plaatsing van de uitnodiging op de pagina verplaatsen met de offset- en positieopties. Dit wordt geconfigureerd door de uitnodiging te bewerken.
* **Optie 2:** Weergeven of Verbergen van het chatbericht-pictogram op basis van de pagina-Locatie. Als je de chatbericht-uitnodiging volledig wilt verwijderen voor alle betalingspagina's, bewerk dan de Locatie om de betalingspagina's uit te sluiten. Je kunt bijvoorbeeld alle pagina's uitsluiten die "betaling" in de URL bevatten.
* **Optie 3:** Stel targeting in op Apparaat. Als u niet wilt dat het uitnodiging-icoon op mobiele sites verschijnt, vink dan de optie "mobiele telefoon" onder Campagnetargeting uit. Om in te stellen, klik op **Campagne**, **Targeting**.

Zoom Campaigns biedt een [**Ingesloten uitnodiging**](/technical-library/nl/zakelijke-diensten/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) optie als u niet het Standaard sticky-pictogram wilt gebruiken om chatbericht te starten. Hiermee kunt u elk element op uw website, zoals een knop in uw menu of een link op een pagina, veranderen in een trigger voor het openen van het chatberichtvenster.

Om dit te doen, maakt u het element in de HTML van uw locatie en gebruikt u de Zoom Campaign SDK om het te verbinden met het chatbericht. Wanneer een gebruiker op dat element klikt, opent het het chatberichtvenster en start het de campagne-ervaring. U kunt ook bestaande HTML op uw website gebruiken om het chatberichtvenster te openen als u dat liever doet.

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

{% hint style="warning" %}
**Let op**

Wilt u zowel een Sticky uitnodiging-pictogram als het openen van het chatbericht activeren via een klik op een knop op uw website?

Maak een campagne met de Sticky uitnodiging-optie en gebruik vervolgens [Zoom's Campaign SDK](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) om het chatbericht te openen.
{% endhint %}

***

### Proactief berichtenverkeer

Wat als u een meer Actief manier wilt om de aandacht van uw gebruiker te trekken, zodat ze chatten met uw team of virtuele agent? Zoom's Proactive berichtenverkeer Functie(s) laat u Configureer, zodat bedrijven gesprekken met bezoekers kunnen starten in plaats van te wachten tot de klant de chatbericht begint door op de uitnodiging te klikken.

#### <mark style="color:blauw;">Hoe het helpt</mark>

* **Betere betrokkenheid:** Je kunt de aandacht van mensen trekken en op het juiste moment hulp bieden.
* **Meer leads:** Aangepaste berichten en knoppen kunnen mensen aanmoedigen om meer informatie te krijgen door te chatten met een medewerker, of hun gegevens te delen voor een opvolgbellen.
* **Snellere ondersteuning:** Verbind bezoekers snel met een bot of live medewerker, zodat ze zonder vertraging antwoord krijgen.

Wanneer een gebruiker op een pagina terechtkomt waarop proactief berichtenverkeer is ingeschakeld, krijgt hij of zij een bericht en kan op knoppen klikken om een specifieke flow te starten.

#### <mark style="color:blauw;">Waar u het instelt</mark>

Deze functie is ingesteld onder **Campagnes**, en is beschikbaar voor chatcampagnes op webpagina's die het **Sticky** uitnodigingstype gebruiken.

#### <mark style="color:blauw;">Richt u op uw gebruikers</mark>

U kunt uw proactieve bericht zo instellen dat het een vertraging heeft, zodat het alleen verschijnt voor gebruikers die al een bepaalde tijd op die pagina zijn geweest. U kunt ook kiezen of u wilt dat de gebruiker het bericht slechts één keer per periode van 24 uur ziet, of dat u wilt dat het proactieve bericht opnieuw verschijnt als de gebruiker de pagina vernieuwt of een andere overeenkomende pagina bezoekt.

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

#### <mark style="color:blauw;">Veelvoorkomende vraag</mark>

Ik wil een uitnodigingspictogram hebben zodat mijn gebruikers op elk moment een chatbericht kunnen starten, maar ik wil ook mijn Klanten een proactief bericht sturen op een specifieke pagina (bijvoorbeeld de prijsstellingspagina van mijn bedrijf). Hoe stel ik dit in?

**Antwoord**

U wilt twee Campagnes maken: één voor uw Standaard uitnodiging op uw hele website ("Campagne A"), en nog een Campagne ("Campagne B") voor de pagina waarop u een proactief bericht wilt hebben.

Voor elke campagne wilt u de campagnelocaties definiëren zodat ze niet overlappen.

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

De Locatie van campagne A moet "zoom.us/pricing" uitsluiten en de Locatie van campagne B moet "zoom.us/pricing" bevatten. Op die manier zien gebruikers die een URL bezoeken die "zoom.us" bevat de reguliere uitnodiging, maar gebruikers die op de specifieke pagina "zoom.us/pricing" terechtkomen, krijgen het proactieve bericht te zien.
{% endhint %}

***

### Avatars

Een avatar is de afbeelding die naast de berichten in webchat verschijnt. Het helpt persoonlijkheid en Branding aan het gesprek toe te voegen.

<figure><img src="/files/0669a496be340e03d05a34a5004fcb9ea93ae538" 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>

Voor berichten die worden verzonden voordat een gebruiker verbinding maakt met een agent (bijvoorbeeld een welkomstbericht of Zoom Virtual Agent), kunt u één Standaard avatar instellen voor al uw ervaringen, of u kunt een unieke avatar instellen voor elke afzonderlijke chatflow. Dit geeft u de flexibiliteit om alles consistent te houden of de ervaring af te stemmen op verschillende merken of gebruiksscenario's.

Als u **Zoom contactcenter**gebruikt, klikt u op het volgende:

1. Voorkeuren
2. Klantenervaring
3. Standaard flowbericht-avatar en -naam.

Als u **alleen Zoom Virtual Agent**gebruikt, klikt u op het volgende:

1. AI Studio
2. Virtuele agents
3. Chatbots
4. Instellingen

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

Wanneer je klant van de bot naar een live agent in Zoom contactcenter gaat, kun je ook bepalen hoe de avatar van de agent wordt weergegeven. Je kunt ervoor Kies om de profielafbeelding van de agent uit contactcenter, zijn initialen of een ingestelde avatarafbeelding Weergeven.

Om in te stellen, klik op het volgende:

1. Voorkeuren
2. Klantenervaring
3. Afbeelding weergeven

***

### Aanvullende chatberichtconfiguratie-instellingen

#### <mark style="color:blauw;">Bedien het Web chatberichtvenster met Zoom Campaign SDK</mark>

De Zoom contactcenter (ZCC) en Zoom Virtual Agent (ZVA) Campaign SDK geeft ontwikkelaars meer controle over hoe het webchatbericht zich gedraagt en met uw website samenwerkt. Hiermee kunt u chatberichtgedrag programmatisch openen, sluiten en beheren op basis van gebruikersacties, paginacontext of aangepaste logica.

Bijvoorbeeld, u kunt ervoor zorgen dat uw chatberichtvenster automatisch wordt geopend wanneer uw gebruikers een bepaald aantal seconden op de pagina zijn geweest of op een bepaalde knop klikken.

Zie [Zoom Ontwikkelaarsdocumentatie SDK-referentie](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) voor meer details.

#### <mark style="color:blauw;">Locatiebrede chatberichtpersistentie</mark>

Chatberichtpersistentie bepaalt of een sessie van een gebruiker als die zich tussen verschillende pagina’s op uw website verplaatst, doorgaat.

* **Wanneer persistentie&#x20;*****ingeschakeld*****&#x20;(Standaard):** Hetzelfde chatbericht blijft open over pagina’s heen, zodat de gebruiker zijn gesprek zonder onderbreking kan voortzetten.
* **Wanneer persistentie&#x20;*****uitgeschakeld*****:** Het chatbericht gaat niet verder wanneer de gebruiker naar een nieuwe pagina navigeert, tenzij die pagina expliciet deel uitmaakt van de gedefinieerde Locatie van de eerste campagne.

Deze Wijzigen maakt het voor bedrijven met meerdere merken of afdelingen op hetzelfde domein eenvoudiger om chatcampagnes gescheiden te houden. Het voorkomt dat gebruikers een chatbericht meenemen tussen niet-gerelateerde pagina's en vermindert de behoefte aan handmatige configuratie.

Vind deze instelling onder **Zoom contactcenter** en **Zoom Virtual Agent-voorkeuren**.

#### <mark style="color:blauw;">Geluidsmeldingen</mark>

Standaard horen consumenten, wanneer uw agent of virtuele agent een bericht verzendt in webchat, een meldingsgeluid. Als de standaardgeluiden storend aanvoelen voor de ervaring van uw merk, kunt u ze uitschakelen onder **Zoom contactcenter** of **Zoom Virtual Agent-voorkeuren**.

Consumenten hebben nog steeds de optie om ze opnieuw in te schakelen in het chatberichtmenu, als ze dat liever hebben.


---

# 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/nl/zakelijke-diensten/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.