# Erstellen Sie Ihre Chat-Erfahrung

Zooms Tools machen es einfach, Ihr Chat-Erlebnis mit wenig bis gar keinem Code anzupassen und zu starten.

### Chat-Engagement-Fenster

Das Chat-Engagement-Fenster ist der Weg, wie Ihre Benutzer mit Ihrem virtuellen Agenten oder menschlichen Agenten Nachrichten austauschen. Mit den Tools von Zoom können Sie ein Chat-Fenster erstellen, das leicht zu sehen und zu verwenden ist und zum Branding Ihres Unternehmens passt.

Um Ihr Chat-Engagement-Fenster zu erstellen oder zu bearbeiten, gehen Sie zum Web-Administrator von Zoom.

Klicken Sie dort auf **+Kampagne hinzufügen** oder öffnen Sie den Entwurf einer vorhandenen Kampagne. Scrollen Sie zum **Chat-Engagement-Fenster** Abschnitt, um Ihr Fenster zu erstellen oder zu bearbeiten.

#### <mark style="color:blau;">Fenstergröße und mobile Erfahrung</mark>

Das Chat-Engagement-Fenster von Zoom ist responsiv, was bedeutet, dass es sein Layout automatisch anpasst, wenn Ihr Benutzer von seinem Desktop-Computer oder Smartphone aus auf Ihren Standort zugreift.

Auf mobilen Geräten öffnet sich das Chat-Fenster im Vollbildmodus, um den begrenzten Bildschirmplatz optimal zu nutzen und ein klares, lesbares Erlebnis zu gewährleisten.

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

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

Für Nutzer, die auf Desktop-Geräten auf Ihren Chat zugreifen, können Sie aus drei Größenoptionen für die Fensterhöhe wählen:

* **S:** 540 Pixel
* **M:** 650 Pixel, **standardmäßig**
* **L:** 780 Pixel

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

Die Breite ist zur Gewährleistung der Lesbarkeit immer fest auf 420 Pixel eingestellt.
{% endhint %}

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

#### <mark style="color:blau;">Kopfzeile</mark>

Der **chat-Kopfzeile** ist ein Schlüsselelement Ihres chat-Designs. Wenn sie durchdacht gestaltet ist, gibt sie den Nutzern Kontext dazu, was sie von ihrer Support-Erfahrung erwarten können, und Vertrauen in die Konversation. Sie können die Kopfzeile verwenden, um Informationen über Ihr Support-Team zu teilen und/oder das Logo oder die Farben Ihrer Marke Hinzufügen.

Zoom CX bietet mehrere Designoptionen für die Kopfzeile, aus denen Sie Wählen können.

**Vollständiges Kopfzeilenbild**

Hinzufügen Sie ein Bild mit 426 Pixeln mal 95 Pixeln, das den gesamten Kopfzeilenbereich ausfüllt – ideal für individuelle Designs.

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

**Größe des Avatarbilds**

Hinzufügen Sie ein Bild mit 40 mal 40 Pixeln, das in der Kopfzeile angezeigt wird, entweder allein oder zusammen mit Kopfzeilentext.

{% columns %}
{% column %}

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

{% column %}

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

**Nur Kopfzeilentext**

Teilen Sie eine kurze Notiz zu allem Möglichen, zum Beispiel zum Namen Ihres Teams, zur Verfügbarkeit oder zu den Support-Zeiten. Steuern Sie die Größe des Kopfzeilentextes mithilfe der Größe von H1, H2, H3 oder Fließtextabsatz.

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

Für ein schlankes, minimalistisches Design können Sie **es leer lassen**, sodass Ihre Nutzer sich auf den Chat konzentrieren.

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

Sie können **jede beliebige Farbe für den Kopfzeilenhintergrund und die Symbole auswählen**, nützlich, um Ihr Chat-Design an Ihre Website anzupassen.

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

Wenn Sie die Hintergrundfarbe Ändern, stellen Sie sicher, dass Sie die Symbole zum Minimieren und für das Menü noch sehen können. Möglicherweise müssen Sie auch die Symbolfarbe Ändern.

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

#### <mark style="color:blau;">Farben für Ihre Chat-Blase, Ihren Text, Ihre Symbole und mehr</mark>

Mit dem Builder für das Engagement-Fenster können Sie die genauen Farben auswählen, die Sie für Ihren Chat möchten. Sie werden Hex-Codes für jeden Bereich des Fensters eingeben und die Vorschau prüfen, um zu sehen, wie es aussieht.

Zoom stellt eine Vorlage bereit, damit Sie loslegen können. Damit alles großartig aussieht (und leicht zu lesen ist), bleiben Sie bei Ihren Markenfarben und stellen Sie sicher, dass zwischen Text- und Hintergrundfarben genügend Kontrast besteht.

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

#### <mark style="color:blau;">Willkommensbildschirm</mark>

Der **Willkommensbildschirm** In Zoom Contact Center und Zoom Virtual Agent ist optional eine Einführung Bildschirm, die angezeigt wird, bevor der Chat beginnt, damit Sie die Möglichkeit haben, Ihre Kunden zu begrüßen, Informationen von ihnen zu sammeln und die Erfahrung an Ihre Marke anzupassen.

Dies ist für die Web-Chat-Erfahrung Verfügbar. Zum Konfigurieren klicken Sie auf den **Chat-Interaktion** Fenster, dann das **Willkommensbildschirm** Registerkarte.

***

### Einladungsdesign

Die Einladung ist das, was die Support-Erfahrung auf Ihrer Website startet. Am häufigsten verwendet man die [**klebrig** Einladungsart](/technical-library/de/business-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts), das ein schwebendes Symbol ist, das auf Ihrer Website erscheint. Wenn Ihre Benutzer darauf klicken, wird sich das Chat-Fenster öffnen und ihr Erlebnis beginnen.

Um eine Einladung zu erstellen oder zu bearbeiten, gehen Sie zu Zooms Web-Administratorbereich.

Klicken Sie dort auf **+Kampagne hinzufügen** oder öffnen Sie den Entwurf einer vorhandenen Kampagne. Scrollen Sie zum **Einladung** Abschnitt, um eine neue Einladung zu erstellen.

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

Konfigurieren Sie die folgenden Einstellungen für Ihr **Sticky Einladung** Symbol:

* **Schaltflächengröße:** Die Größe Ihres Chat-Einladungssymbols sollte groß genug sein, um leicht bemerkt und angeklickt oder angetippt zu werden, aber nicht so groß, dass sie die Benutzererfahrung beeinträchtigt oder wichtige Inhalte verdeckt. Zoom bietet drei Einladungsgrößen an:
  * **S:** 40 Pixel
  * **M:** 56 Pixel, **standardmäßig**
  * **L:** 72 Pixel
* **Schaltflächenfarbe:** Wählen Sie eine Schaltflächenfarbe mit hohem Kontrast zu Ihrem Website-Hintergrund. Wir empfehlen, die [WCAG 2.1-Richtlinien](https://www.w3.org/TR/WCAG21/#contrast-minimum)zu befolgen, was einem Mindestkontrastverhältnis von 3:1 für Komponenten der Benutzeroberfläche (UI), wie Symbole und Schaltflächen, gegenüber ihrem Hintergrund entspricht.
* **Symbol:** Ein Symbol kann Ihren Benutzern eine Vorstellung davon geben, was sie erwartet, wenn sie auf die Schaltfläche tippen. Zoom bietet einige standardmäßig Designs zur Auswahl an, die den Start eines Chats anzeigen. Sie können auch Ihr eigenes benutzerdefiniertes Symbol mit einer SVG-Datei Hinzufügen. SVG-Dateien müssen kleiner als 10 MB sein.
* **Eckenradius:** Wie abgerundet oder eckig soll das Einladungssymbol sein? Schauen Sie sich Ihre Website an, um zu sehen, ob Ihre Website ein Muster dafür hat, wie Schaltflächen aussehen, oder fragen Sie Ihr Markenteam, ob es eine Präferenz hat. Die Verwendung eines kleineren Eckenradius, wie 8 Pixel, macht Ihre Einladung eckiger. Ein größerer Eckenradius, wie 28 Pixel, macht Ihre Einladung runder.
* **Text zu Ihrer Einladung hinzufügen:** Das Hinzufügen einer Textbeschriftung zu einer Einladungsschaltfläche macht sie klarer und einladender. Benutzer wissen sofort, welchem Zweck die Schaltfläche dient, sodass nicht geraten werden muss, was das Symbol bedeutet. Allerdings nimmt sie auch mehr Platz ein und könnte den Bildschirm unübersichtlich machen, besonders auf Mobilgeräten. Berücksichtigen Sie unbedingt Ihre Zielgruppe und die Geräte, die sie am häufigsten verwenden. Wenn Sie eine Schriftart hinzufügen, können Sie aus den voreingestellten Schriftarten Arial, Georgia, Tahoma oder Verdana Wählen oder Ihre eigene benutzerdefinierte Schriftart mithilfe einer TTF-Datei hochladen.

#### <mark style="color:blau;">**Einladungsstandort auf der Seite**</mark>

Der beliebteste Standort für ein Support-Einladungssymbol ist die untere rechte Ecke, mit einem Abstand von 20 Pixeln vom unteren Rand und von der Seite. Dies ist normalerweise leicht zu erkennen, ohne wichtige Inhalte zu blockieren.

Wir empfehlen, Ihre eigene Website sowohl auf Desktop- als auch auf Mobilgeräten anzusehen. Wenn Ihr Standort an diesem Standort bereits ein Banner oder eine Schaltfläche hat, könnte dies die Benutzerfreundlichkeit für Ihre Kunden beeinträchtigen oder möglicherweise Benutzerabläufe stören.

Wenn Sie bereits ein Element (wie ein Cookie-Banner, eine Navigationsleiste oder ein anderes Widget) an derselben Stelle wie Ihr Chat-Einladungssymbol haben, sollten Sie erwägen, die Ausrichtung nach links oder rechts zu Ändern oder den Abstand vom unteren Rand oder von den Seiten anzupassen.

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

Wenn Sie feststellen, dass Ihre Chat-Einladungsschaltfläche auf Mobilgeräten einen wichtigen Link unten auf Ihrer Seite verdeckt, erhöhen Sie den Abstand, bis das Einladungssymbol dieses Element nicht mehr verdeckt.
{% endhint %}

Sie können auch „Verbrauchern das Ziehen und Bewegen der Einladung Aktivieren“, um Ihren Benutzern noch mehr Flexibilität zu geben, das Symbol auf der Seite zu verschieben.

#### <mark style="color:blau;">Häufige Frage</mark>

Das Chat-Einladungssymbol blockiert oder lenkt Benutzer auf einer bestimmten Seite auf Mobilgeräten ab. Welche Optionen habe ich?

**Antwort:**

Es gibt mehrere Möglichkeiten, wie Sie dies erreichen können.

* **Option 1:** Ändern Sie die Position des Einladungssymbols auf der Seite. Sie können die Platzierung der Einladung auf der Seite mithilfe der Offset- und Positionsoptionen verschieben. Dies wird durch das Bearbeiten der Einladung konfiguriert.
* **Option 2:** Anzeigen oder Ausblenden des Chat-Symbols basierend auf dem Seitenstandort. Wenn Sie die Chat-Einladung für alle Kauf abschließen-Seiten vollständig entfernen möchten, bearbeiten Sie den Standort, um die Kauf abschließen-Seiten auszuschließen. Zum Beispiel können Sie alle Seiten ausschließen, die „Kauf abschließen“ in der URL enthalten.
* **Option 3:** Richten Sie das Targeting nach Gerät ein. Wenn das Einladungssymbol nicht auf mobilen Standorten angezeigt werden soll, deaktivieren Sie die Option „Mobiltelefon“ unter Kampagnen-Targeting. Zum Einrichten klicken Sie auf **Kampagne**, **Targeting**.

Zoom Campaigns bietet eine [**Eingebettete Einladung**](/technical-library/de/business-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) Option, wenn Sie nicht das standardmäßig fixierte Symbol verwenden möchten, um den Chat zu starten. Dadurch können Sie jedes Element auf Ihrer Website, wie eine Schaltfläche in Ihrem Menü oder einen Link auf einer Seite, in einen Auslöser zum Öffnen des Chat-Fensters verwandeln.

Dazu erstellen Sie das Element im HTML Ihres Standorts und verwenden das Zoom Campaign SDK, um es mit dem Chat zu verbinden. Wenn ein Benutzer auf dieses Element klickt, wird das Chat-Fenster gestartet und die Kampagnenerfahrung beginnt. Sie können auch vorhandenes HTML auf Ihrer Website verwenden, um das Chat-Fenster auszulösen, wenn Sie dies bevorzugen.

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

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

Möchten Sie sowohl ein Sticky Einladungssymbol als auch das Öffnen des Chats per Schaltflächenklick auf Ihrer Website auslösen?

Erstellen Sie eine Kampagne mit der Option „Sticky Einladung“ und verwenden Sie dann [Zooms Campaign SDK](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) um das Öffnen des Chats auszulösen.
{% endhint %}

***

### Proaktives Messaging

Was ist, wenn Sie eine aktivere Möglichkeit möchten, die Aufmerksamkeit Ihres Benutzers zu gewinnen, damit er mit Ihrem Team oder virtuellen Agenten chattet? Zooms Proactive Messaging Funktion ermöglicht es Ihnen, zu Konfigurieren, dass Unternehmen Gespräche mit Besuchern initiieren können, anstatt darauf zu warten, dass der Kunde den Chat durch Klicken auf die Einladung startet.

#### <mark style="color:blau;">Wie es hilft</mark>

* **Besseres Engagement:** Sie können die Aufmerksamkeit der Menschen gewinnen und zur richtigen Zeit Hilfe anbieten.
* **Mehr Leads:** Benutzerdefinierte Nachrichten und Schaltflächen können Menschen dazu anregen, mehr zu erfahren, indem sie mit einem Agenten chatten, oder ihre Informationen für einen Folgeanruf zu teilen.
* **Schnellerer Support:** Besucher schnell mit einem Bot oder Live-Agenten verbinden, damit sie ohne Verzögerung Antworten erhalten.

Wenn ein Benutzer auf einer Seite landet, auf der proaktives Messaging aktiviert ist, erhält er eine Nachricht und kann auf Schaltflächen klicken, um einen bestimmten Ablauf zu starten.

#### <mark style="color:blau;">Wo Sie es einrichten</mark>

Diese Funktion wird unter eingerichtet **Kampagnen**, und ist für Chat-Kampagnen auf Webseiten verfügbar, die den **klebrig** Einladungstyp verwenden.

#### <mark style="color:blau;">Sprechen Sie Ihre Benutzer gezielt an</mark>

Sie können Ihre proaktive Nachricht mit einer Verzögerung versehen, sodass sie nur für Benutzer angezeigt wird, die sich eine bestimmte Zeit lang auf dieser Seite aufgehalten haben. Sie können auch Wählen, ob der Benutzer die Nachricht nur einmal innerhalb eines 24-Stunden-Zeitraums sehen soll oder ob die proaktive Nachricht erneut angezeigt werden soll, wenn der Benutzer die Seite aktualisiert oder eine andere passende Seite besucht.

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

#### <mark style="color:blau;">Häufige Frage</mark>

Ich möchte ein Einladungssymbol haben, damit meine Benutzer jederzeit einen Chat starten können, möchte meinen Kunden aber auch auf einer bestimmten Seite eine proaktive Nachricht senden (zum Beispiel auf der Preisseite meines Unternehmens). Wie richte ich das ein?

**Antwort**

Sie sollten zwei Kampagnen erstellen: eine für Ihre Standard-Einladung auf Ihrer gesamten Website ("Kampagne A") und eine weitere Kampagne ("Kampagne B") für die Seite, auf der Sie eine proaktive Nachricht haben möchten.

Für jede Kampagne sollten Sie die Standorte der Kampagne definieren, damit sie sich nicht überschneiden.

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

Der Standort von Kampagne A sollte "zoom.us/pricing" ausschließen, und der Standort von Kampagne B sollte "zoom.us/pricing" enthalten. Auf diese Weise sehen Benutzer, die eine beliebige URL besuchen, die "zoom.us" enthält, die reguläre Einladung, während bei Benutzern, die die spezielle Seite "zoom.us/pricing" aufrufen, die proaktive Nachricht eingeblendet wird.
{% endhint %}

***

### Avatare

Ein Avatar ist das Bild, das neben den Nachrichten im Web-Chat angezeigt wird. Es hilft, Persönlichkeit und Branding in das Gespräch zu bringen.

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

Für Nachrichten, die gesendet werden, bevor sich ein Benutzer mit einem Agenten verbindet (zum Beispiel eine Willkommensnachricht oder ein Virtual Agent), können Sie für alle Ihre Erlebnisse einen einzelnen standardmäßigen Avatar festlegen oder für jeden einzelnen Chat-Flow einen eigenen Avatar festlegen. Dadurch haben Sie die Flexibilität, alles konsistent zu halten oder das Erlebnis für verschiedene Marken oder Anwendungsfälle anzupassen.

Wenn Sie **Zoom Contact Center**verwenden, klicken Sie auf Folgendes:

1. Einstellungen
2. Kundenerlebnis
3. Standardmäßiger Flow-Nachrichten-Avatar und Name.

Wenn Sie **Nur Zoom Virtual Agent**verwenden, klicken Sie auf Folgendes:

1. AI Studio
2. Virtual Agents
3. Chatbots
4. Einstellungen

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

Wenn Ihr Kunde von dem Bot zu einem Live-Agenten in Zoom Contact Center wechselt, können Sie auch steuern, wie das Avatar des Agenten angezeigt wird. Sie können wählen, ob das Profilbild des Agenten aus Contact Center angezeigt wird, ihre Initialen oder ein Avatarbild.

Zur Einrichtung klicken Sie auf Folgendes:

1. Einstellungen
2. Kundenerlebnis
3. Bild anzeigen

***

### Zusätzliche Chat-Konfigurationseinstellungen

#### <mark style="color:blau;">Steuern Sie das Web-Chat-Fenster mit dem Zoom Campaign SDK</mark>

Das Zoom Contact Center (ZCC) und Zoom Virtual Agent (ZVA) Campaign SDK gibt Entwicklern mehr Kontrolle darüber, wie sich der Web-Chat verhält und mit Ihrer Website interagiert. Es ermöglicht Ihnen, das Chat-Verhalten programmgesteuert basierend auf Benutzeraktionen, Seitensituation oder benutzerdefinierter Logik zu öffnen, zu schließen und zu steuern.

Beispielsweise können Sie es so einrichten, dass sich Ihr Chat-Fenster automatisch öffnet, wenn sich Ihre Nutzer eine bestimmte Anzahl von Sekunden auf der Seite befinden oder auf eine bestimmte Schaltfläche klicken.

Siehe [Zoom Entwicklerdokumentation SDK-Referenz](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) für weitere Details.

#### <mark style="color:blau;">Standortweites Chat-Fortfahren</mark>

Chat-Fortfahren steuert, ob eine Benutzer-Chat-Sitzung fortgesetzt wird, während sie zwischen verschiedenen Seiten auf Ihrer Website wechseln.

* **Wenn die Persistenz&#x20;*****aktiviert*****&#x20;(standardmäßig):** Dasselbe Chat bleibt seitenübergreifend offen, sodass der Benutzer seine Unterhaltung ohne Unterbrechung fortsetzen kann.
* **Wenn die Persistenz&#x20;*****deaktiviert*****:** Der Chat wird nicht fortgesetzt, wenn der Benutzer zu einer neuen Seite navigiert, sofern diese Seite nicht ausdrücklich Teil des definierten Standorts der ersten Kampagne ist.

Dieses Ändern erleichtert es Unternehmen mit mehreren Marken oder Abteilungen auf derselben Domain, Chat-Kampagnen getrennt zu halten. Es verhindert, dass Benutzer einen Chat zwischen nicht zusammenhängenden Seiten mitnehmen, und reduziert den Bedarf an manueller Einrichtung.

Sie finden diese Einstellung unter **Zoom Contact Center** und **Zoom Virtual Agent-Einstellungen**.

#### <mark style="color:blau;">Ton-Benachrichtigungen</mark>

Standardmäßig hören Verbraucher beim Senden einer Nachricht im Web-Chat durch Ihren Agenten oder virtuellen Agenten einen Benachrichtigungston. Wenn sich die standardmäßigen Töne störend für Ihr Markenerlebnis anfühlen, können Sie sie unter deaktivieren **Zoom Contact Center** oder **Zoom Virtual Agent-Einstellungen**.

Verbraucher haben weiterhin die Möglichkeit, sie im Chat-Menü wieder zu aktivieren, wenn sie dies bevorzugen.


---

# 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/de/business-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.