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

# Bouw uw chatberichtervaring op

De tools van Zoom maken het eenvoudig om je chatbericht-ervaring aan te passen en te lanceren met weinig tot geen code.

### Chatbericht-interactievenster

Het chatbericht-interactievenster is hoe je gebruikers communiceren met je virtuele agent of menselijke agent. Met de tools van Zoom kun je een chatberichtvenster bouwen dat makkelijk te zien is en mee te werken is, en dat aansluit bij de huisstijl van je bedrijf.

Ga naar Zoom's Webbeheerder om je Chatbericht-interactievenster te maken of te bewerken.

| Als je ... gebruikt | Klik dan op...                          |
| ------------------- | --------------------------------------- |
| contactcenter       | contactcenter, Campagnemanagement.      |
| Virtuele agent      | AI Studio, Virtuele agenten, campagnes. |

Klik daar op **+Campagne toevoegen** of open het concept van een bestaande campagne. Scroll naar de **Chatbericht-interactievenster** sectie om je venster te maken of te bewerken.

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

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

Op mobiele apparaten opent het chatberichtvenster op volledig Scherm om de beperkte Schermruimte optimaal te benutten en een nette, goed leesbare ervaring te bieden.

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

Kies uit drie formaatopties voor de vensterhoogte voor gebruikers die je chatbericht op desktopapparaten openen:

* **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 waarborgen.
{% 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 sleutelelement van uw chatberichtontwerp. Goed ontworpen geeft het gebruikers context over wat ze kunnen verwachten van hun ondersteuningservaring en vertrouwen in het gesprek. U kunt de kop gebruiken om informatie over uw ondersteuningsteam te delen en/of Toevoegen uw merklogo of -kleuren.

Zoom CX biedt verschillende ontwerpmogelijkheden voor de kopbalk waaruit u kunt Kies.

**Volledige kopafbeelding**

Toevoegen een afbeelding van 426 bij 95 pixels die de hele kopruimte 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>

**Afbeeldingsgrootte van avatar**

Toevoegen een afbeelding van 40 bij 40 pixels om in de kopbalk te verschijnen, 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 notitie over iets, zoals de naam van uw team, beschikbaarheid of ondersteuningstijden. Regel de grootte van de koptekst met H1-, H2-, H3- of alineatekstgrootte.

<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 een willekeurige kleur voor de achtergrond van de koptekst en pictogrammen**, handig om uw ontwerp van het chatbericht 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. Mogelijk moet u ook de kleur van de pictogrammen 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>

De bouwer van het engagementvenster laat u de exacte kleuren kiezen die u wilt voor uw chatbericht. U voert hex-codes in voor elk onderdeel van het venster en bekijkt de preview 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), houdt u vast aan uw merkkleuren en zorgt u 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;">Welkom Scherm</mark>

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

Dit is Beschikbaar voor de webchatervaring. Om dit te Configureer, klikt u op het **chatberichtbetrokkenheid** venster, vervolgens de **Welkom Scherm** Tabblad.

***

### Ontwerp van uitnodiging

De uitnodiging is wat de ondersteuningservaring op uw website start. Meestal gebruikt u de [**Vast** type uitnodiging](/technical-library/nl/zakelijke-diensten/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts), wat een zwevend pictogram is dat op uw website verschijnt. Wanneer uw gebruikers erop klikken, wordt het chatvenster geopend en begint hun ervaring.

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

| Als je ... gebruikt | Klik dan op...                          |
| ------------------- | --------------------------------------- |
| contactcenter       | contactcenter, Campagnemanagement.      |
| Virtuele agent      | AI Studio, Virtuele agenten, campagnes. |

Klik daar op **+Campagne toevoegen** of open het concept van een bestaande campagne. Scroll naar de **uitnodiging** sectie 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 voor uw **vaste uitnodiging** pictogram:

* **Knopgrootte:** De grootte van het pictogram van uw chatbericht-uitnodiging moet groot genoeg zijn om gemakkelijk op te vallen en erop te kunnen klikken of tikken, maar niet zo groot dat het de ervaring van de gebruiker verstoort of belangrijke inhoud bedekt. Zoom biedt drie uitnodigingsgroottes:
  * **S:** 40 pixels
  * **M:** 56 pixels, **Standaard**
  * **L:** 72 pixels
* **Knopkleur:** Kies een knopkleur met een hoog contrast ten opzichte van de achtergrond van uw website. We raden aan de [WCAG 2.1-richtlijnen](https://www.w3.org/TR/WCAG21/#contrast-minimum)te volgen, die een minimale contrastverhouding van 3:1 voorschrijven voor onderdelen van de interface van de gebruiker (UI), zoals pictogrammen en knoppen, ten opzichte van hun achtergrond.
* **Pictogram:** Een pictogram kan uw gebruikers helpen een idee te krijgen van wat zij kunnen verwachten wanneer zij op de knop tikken. Zoom biedt enkele Standaard ontwerpen om uit te kiezen die aangeven dat u een chatbericht start. U kunt ook uw eigen aangepaste pictogram Toevoegen met behulp van een SVG-bestand. SVG-bestanden moeten kleiner zijn dan 10 MB.
* **Hoekradius:** Hoe afgerond of hoekig wilt u dat het uitnodigingspictogram is? Kijk op uw website of deze een patroon heeft voor hoe knoppen eruitzien, of vraag uw merkteam of zij een voorkeur hebben. Door een lagere hoekradius te gebruiken, zoals 8 pixels, wordt uw uitnodiging hoekiger. Een hogere hoekradius, zoals 28 pixels, maakt uw uitnodiging ronder.
* **Tekst toevoegen 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 hoeven zij niet te raden wat het pictogram betekent. Het neemt echter ook meer ruimte in beslag en kan het Scherm rommelig maken, vooral op mobiele apparaten. Houd rekening met uw doelgroep en de apparaten die zij het meest gebruiken. Als u een lettertype toevoegt, kunt u kiezen uit vooraf ingestelde lettertype-opties Arial, Georgia, Tahoma of Verdana; of uw eigen aangepaste lettertype uploaden met een TTF-bestand.

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

De meest populaire Locatie voor een pictogram voor een ondersteuning-uitnodiging is de rechteronderhoek, met een offset van 20 pixels vanaf de onder- en zijkant. Dit is doorgaans gemakkelijk te zien zonder belangrijke inhoud te blokkeren.

We raden aan om uw eigen website zowel op desktop als op 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-uitnodigingspictogram, overweeg dan 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 onder aan uw pagina op mobiele apparaten bedekt, vergroot dan de offset totdat het uitnodigingspictogram dat element niet meer bedekt.
{% endhint %}

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

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

Het chatbericht-uitnodigingspictogram blokkeert of leidt gebruikers af op een bepaalde pagina op mobiele apparaten. Wat zijn mijn opties?

**Antwoord:**

Er zijn verschillende manieren waarop u dit kunt bereiken.

* **Optie 1:** Wijzig de positie van het uitnodigingspictogram op de pagina. U kunt de plaatsing van de uitnodiging op de pagina verplaatsen met de offset- en positieopties. Dit wordt ingesteld door de uitnodiging te bewerken.
* **Optie 2:** Weergeven of Verbergen het chatbericht-pictogram op basis van de Locatie van de pagina. Als u de chatbericht-uitnodiging volledig wilt verwijderen voor alle Betaling-pagina's, wijzigt u de Locatie zodat de Betaling-pagina's worden uitgesloten. U kunt bijvoorbeeld alle pagina's uitsluiten die 'Betaling' in de URL bevatten.
* **Optie 3:** Stel targeting in per Apparaat. Als u niet wilt dat het uitnodigingspictogram op mobiele locaties verschijnt, vink dan de optie 'mobiele telefoon' onder Campagne Targeting uit. Om in te stellen, klik op **Campagne**, **Targeting**.

Zoom Campaigns biedt een [**Ingebedde uitnodiging**](/technical-library/nl/zakelijke-diensten/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) optie als u het Standaard vastgepinde pictogram niet 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, omzetten 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 aan het chatbericht te koppelen. Wanneer een gebruiker op dat element klikt, opent het chatberichtvenster en start de campagne-ervaring. U kunt ook bestaande HTML op uw website gebruiken om het chatberichtvenster te activeren 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 vastgepind uitnodigingspictogram als het openen van het chatbericht activeren via een knopklik op uw website?

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

***

### Proactief berichtenverkeer

Wat als u een actievere manier wilt om de aandacht van uw gebruiker te trekken, zodat die met uw team of virtuele agent via een chatbericht communiceert? De Functie(s) Proactief berichtenverkeer van Zoom stelt u in staat bedrijven in te stellen om gesprekken met bezoekers te beginnen, in plaats van te wachten tot de klant het chatbericht start 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 aanbieden.
* **Meer leads:** Aangepaste berichten en knoppen kunnen mensen aanmoedigen om Meer informatie te krijgen door met een medewerker te chatten, of hun gegevens te delen zodat een medewerker later kan bellen.
* **Snellere ondersteuning:** Koppel bezoekers snel aan een bot of live-agent, zodat ze zonder vertraging antwoorden krijgen.

Wanneer een gebruiker op een pagina landt waar proactief berichtenverkeer is ingeschakeld, krijgt hij een bericht en kan op knoppen klikken om een specifieke flow te starten.

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

Deze Functie(s) stel je in onder **Campagnes**, en is beschikbaar voor chatberichtcampagnes op webpagina's die de **Vast** uitnodigingstype.

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

Je kunt een vertraging instellen voor je proactieve bericht, zodat het alleen verschijnt voor gebruikers die al een bepaalde tijd op die pagina zijn. Kies ook of je wilt dat de gebruiker het bericht slechts één keer binnen een periode van 24 uur ziet, of dat je 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;">Veelgestelde vraag</mark>

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

**Antwoord**

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

Voor elke Campagne wil je de Campagne Locaties definiëren zodat ze elkaar 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 normale 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 in het gesprek te brengen.

<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 Standaardavatar voor al uw ervaringen instellen, of u kunt voor elke afzonderlijke chatflow een unieke avatar instellen. Hiermee kunt u alles consistent houden of de ervaring afstemmen op verschillende merken of gebruikssituaties.

Als u gebruikmaakt van **Zoom contactcenter**, klik op het volgende:

1. Voorkeuren
2. Consumentenervaring
3. Standaardavatar en naam van het flowbericht.

Als u gebruikmaakt van **Alleen Zoom Virtual Agent**, klik 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 uw klant van de bot naar een live medewerker in Zoom contactcenter gaat, kunt u ook bepalen hoe de avatar van de medewerker wordt weergegeven. U kunt kiezen om de profielafbeelding van de medewerker uit contactcenter, hun initialen of een ingestelde avatarafbeelding weer te geven.

Om in te stellen, klikt u op het volgende:

1. Voorkeuren
2. Consumentenervaring
3. Afbeelding weergeven

***

### Aanvullende instellingen voor chatconfiguratie

#### <mark style="color:blauw;">Beheer het webchatvenster met Zoom Campaign SDK</mark>

De Zoom contactcenter (ZCC) en Zoom Virtual Agent (ZVA) Campaign SDK biedt ontwikkelaars meer controle over hoe de webchat zich gedraagt en interacteert met uw website. Hiermee kunt u chatgedrag programmatisch openen, sluiten en beheren op basis van gebruikersacties, paginacontext of aangepaste logica.

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

Zie [Zoom Developer-documentatie 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 de chatberichtsessie van een gebruiker doorgaat terwijl deze tussen verschillende pagina's op je website navigeert.

* **Wanneer persistentie is&#x20;*****ingeschakeld*****&#x20;(Standaard):** Dezelfde chatberichtsessie blijft op verschillende pagina's geopend, zodat de gebruiker het gesprek zonder onderbreking kan voortzetten.
* **Wanneer persistentie is&#x20;*****uitgeschakeld*****:** Het chatbericht wordt niet voortgezet 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 chatberichtcampagnes gescheiden te houden. Het voorkomt dat gebruikers een chatbericht meenemen tussen niet-verwante pagina's en vermindert de noodzaak voor handmatige configuratie.

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

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

Standaard, wanneer uw agent of virtuele agent een bericht verzendt in webchatbericht, horen consumenten een Meldinggeluid. Als de Standaardgeluiden storend aanvoelen voor uw merkervaring, kunt u ze uitschakelen onder **Zoom contactcenter** of **Zoom Virtual Agent-voorkeuren**.

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


---

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