# Chat-Support-Erlebnis für Benutzer anpassen

### Produkte

* Zoom Contact Center
* Zoom Virtual Agent

### Voraussetzungen

[Binden Sie das Campaign SDK in Ihre Website oder mobile App ein](https://developers.zoom.us/docs/contact-center/web/chat/#embed-the-chat-client-with-a-campaign-id)

### Übersicht

Ihr Chat-Fenster ist oft die erste echte Interaktion, die ein Kunde mit Ihrem Unternehmen hat – egal, ob er mit einem virtuellen oder einem Live-Agenten chattet. Mit Zoom Contact Center und Zoom Virtual Agent haben Sie die volle Kontrolle darüber, wie diese Erfahrung auf Ihrer Website aussieht und sich verhält.

Dieser Leitfaden führt Sie durch alle verfügbaren Werkzeuge, die Ihnen helfen, ein Chat-Erlebnis zu gestalten, das zu Ihrer Marke passt, die Benutzerfreundlichkeit verbessert und Kunden langfristig bindet.

### Einen Plan erstellen

Ihre Chat-UI sollte sich wie eine natürliche Erweiterung Ihrer Website oder App anfühlen. Wenn Sie Ihr Chat-UI-Design planen, berücksichtigen Sie Folgendes:

* **Farben:** Was sind die Primär- und Akzentfarben Ihres Unternehmens? Verwenden Sie diese Farben für verschiedene Elemente Ihres Chat-Erlebnisses, wie die Chat-Blasen, Symbole, Schaltflächen und Hintergrundfarben. Sie werden Farben mithilfe von Hex-Codes auswählen (zum Beispiel #FFFFFF), daher ist es hilfreich, die Codes Ihrer Marke griffbereit zu haben.
* **Schriftarten:** Passen Sie die Typografie Ihres Standorts für mehr Konsistenz an. Sie können aus mehreren gängigen Schriftarten auswählen oder Ihre eigene TTF-Datei hochladen, um eine benutzerdefinierte Schriftart hinzuzufügen.
* **Logo:** Erwägen Sie, Ihr Logo oder Firmenbild zu Ihrem Chat-Erlebnis hinzuzufügen. Sie können eine JPG/JPEG-, PNG-, SVG- oder GIF-Datei mit bis zu 10 MB hochladen. Je nachdem, welches Chat-Design Sie Wählen, gibt es empfohlene Bildabmessungen -- mehr dazu unten.
* **Avatar:** Ein Avatar ist die Bilddarstellung des Bots oder Agents. Verwenden Sie für Bot- oder Systemnachrichten Ihr Logo oder einen Charakter/Avatar, der Ihre Marke repräsentiert. Ähnlich wie Favicons in Webbrowsern sind diese Symbole klein, machen aber einen Unterschied im Erlebnis, wenn sie gut zur Unternehmensmarke passen. Avatare haben die Größe 40x40 Pixel, und Sie können eine JPG/JPEG-, PNG-, SVG- oder GIF-Datei mit bis zu 2 MB hochladen.

### Die Bestandteile

[Zooms Campaign Builder](https://zoom.us/cci/index/admin#/admin-campaign-management) wird verwendet, um sowohl Ihr Chat-Design als auch seine Verfügbarkeit auf Ihrer Website oder App anzupassen.

In Kampagnen richten Sie Folgendes ein:

* **Chat-Engagement-Fenster:** Von Verbrauchern verwendet, um mit Ihrem Bot oder Agenten zu chatten. Sie können das Design aller Sprechblasen, Schaltflächen, Symbole und des Header-Designs Wählen. Das Chat-Fenster hat einen großen Einfluss auf das Gesamtbild und die Gesamtwirkung Ihres digitalen Support-Erlebnisses.
* **Standort:** Ermöglicht Ihnen zu steuern, wo Ihr Support auf Ihrem Standort verfügbar sein soll (stellen Sie sicher, dass Sie zuerst das Campaign SDK einbetten). Sie können Support für Ihren gesamten Standort anbieten oder angeben, welche Seiten basierend auf der URL ein- oder ausgeschlossen werden sollen.
* **Einladungen:** So starten oder öffnen Ihre Nutzer Ihren Contact Center auf der Website oder in der App Ihres Unternehmens. Es gibt zwei Einladungstypen: Sticky und Embedded.
  * **Angeheftet:** Eine einfache Möglichkeit, Personen einzuladen, Ihren digitalen Support zu nutzen. Benutzer sehen ein Symbol oder Widget auf dem Bildschirm, das beim Anklicken das Support-Erlebnis öffnet. Sie können Farbe, Form und Symbol steuern und sogar Text Hinzufügen.
  * **Eingebettet:** Mit eingebetteten Einladungen können Sie jede Schaltfläche oder jeden Link auf Ihrer Website in einen anklickbaren Link verwandeln, der Support öffnet.
* **Proaktive Nachrichten:** Begrüßungen, die Sie verwenden können, um eine Nachricht zu senden, nachdem Ihre Benutzer eine bestimmte Seite für eine bestimmte Zeit besucht haben. Proaktive Nachrichten können zu jeder Kampagne hinzugefügt werden, indem ein Sticky Einladung-Typ verwendet wird.

  **Zum Beispiel:** "Brauchen Sie Hilfe bei der Auswahl eines Tarifs?"

Außerdem legen Sie auch ein **Avatar**, was die Bilddarstellung des Bots oder Agenten ist. Ihre Nutzer werden diese Avatare des Bots oder Agenten sehen, die Ihre Marke repräsentieren.

### Gestalten Sie Ihr Chat-Erlebnis

Mehr erfahren über das Erstellen Ihrer Chat-Erfahrung, einschließlich Größen, Bildern, Designs, Messaging und zusätzlichen Einstellungen für die Konfiguration.

{% content-ref url="customize-user-chat-support-experience/build-your-chat-experience" %}
[build-your-chat-experience](https://library.zoom.com/technical-library/de/business-services/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience)
{% endcontent-ref %}

### Zusammenfassung

Zoom Contact Center und Zoom Virtual Agent helfen Ihnen, einen Support-Chat zu erstellen, der zur Marke passt und sich einfach bedienen lässt. Sie können das Design vollständig anpassen, wählen, wo und wann der Chat angezeigt wird, und proaktive Nachrichten hinzufügen, um Nutzer im richtigen Moment anzusprechen. Sobald das Campaign SDK eingebettet ist, können Sie alles über die Admin UI oder per Code steuern. Es ist flexibel, übersichtlich und so gebaut, dass es zu Ihrem Standort passt.

Sie sind bereit, ein Chat-Erlebnis zu starten, das Ihren Kunden hilft und Ihre Marke repräsentiert.

### Verwandte Ressourcen

* [Richten Sie eine Zoom Contact Center digitale Kampagne ein](https://zoom.us/cci/index/admin#/admin-campaign-management)
* [Integrieren Sie die Zoom Contact Center-Funktionen in Ihre Website](https://library.zoom.com/technical-library/de/business-services/zoom-contact-center/expert-insights/integrate-zoom-contact-center-features-into-your-website)
* [Binden Sie das Campaign SDK in Ihre Website oder mobile App ein](https://developers.zoom.us/docs/contact-center/web/chat/#embed-the-chat-client-with-a-campaign-id)