Anpassen Web Chat Darstellung mit Webchat Playground

Webchat Playground hilft Ihnen, das Aussehen und Verhalten Ihres Agenten Web Chat anzupassen. Über die intuitive Oberfläche können Sie Farben, Schriftarten, Miniaturansichten und vieles mehr ändern, um sie auf die Identität Ihrer Marke abzustimmen. In diesem Artikel wird beschrieben, wie Sie mithilfe von Webchat Playground Designs erstellen und verwalten und Stile als JSON oder HTML exportieren.

Webchat Playground-Oberfläche

Die benutzerfreundliche Benutzeroberfläche von Webchat Playground hilft Ihnen, das Aussehen und Verhalten Ihrer Web Chat zu definieren. Sie können ganz einfach Anpassungen vornehmen und Echtzeitvorschauen Ihrer Änderungen anzeigen.

Die Oberfläche hat drei Hauptbereiche:

1. Im linken Bereich werden gespeicherte Themen mit ihren primären, sekundären und Akzentfarben angezeigt. Wählen Sie ein Design aus, um es zu bearbeiten oder in der Vorschau anzuzeigen.

2. Der mittlere Bereich bietet eine Vorschau des ausgewählten Designs oder des Designs, das Sie gerade bearbeiten.

3. Im rechten Bereich können Sie zwischen den Registerkarten "JSON" und "Codeausschnitt " umschalten. Die JSON-Ansicht stellt die aktuellen Formatvorlagen in einem JSON-Array bereit, das Sie in einen vorhandenen Web-Chat einfügen können. Die Codeausschnittansicht enthält Beispiel-HTML eines Web-Chats mit den eingebetteten Stilen.

Dieses UI-Beispiel zeigt:

1. Im linken Bereich befindet sich der Stil-Editor, in dem Sie ein Design bearbeiten oder erstellen.

   Abschnitte umfassen "Allgemein, Sende-Box, Vorschlags-Box, Avatar und Blase. Der Editor enthält auch eine Barrierefreiheitsprüfung für alle relevanten Abschnitte. Sie speichern und löschen Aktionen oben.

2. Im rechten Bereich zeigt die Registerkarte „Codeschnipsel“ Beispiel-HTML an. Wechsle zum JSON-Tab, um Beispiel-JSON anzusehen.

Vordefinierte Designs verwenden oder eigene Designs erstellen

Webchat Playground bietet vordefinierte Designs, die unterschiedliche Anpassungsoptionen für die Web Chat-Erfahrung zeigen. Diese Themen geben Ihnen einen Ausgangspunkt zum Entwerfen eines neuen Themas. Sie können auch neue Designs erstellen, um Ihren spezifischen Anforderungen gerecht zu werden und sie für die künftige Verwendung zu speichern.

Vorschau eines Themas

Wählen Sie im linken Bereich (in dem die Farben angezeigt werden) ein Design aus, um die Webchat-Vorschau zu öffnen.

Erstellen eines neuen Themas

Um ein neues Thema zu erstellen:

1. Wählen Sie im linken Bereich Ein Design hinzufügen aus.
   Der linke Bereich wird zu einem Stil-Editor, in dem Sie Änderungen vornehmen können.
2. Geben Sie einen Namen für das Thema ein.
3. Wählen Sie Speichern aus.

Ein Thema bearbeiten

So bearbeiten Sie ein vorhandenes Design:

1. Wählen Sie das Bleistiftsymbol neben dem Designnamen im linken Bereich aus.
2. Nehmen Sie Änderungen im Stil-Editor vor.
3. Wenn Sie fertig sind, wählen Sie Speichern aus.

Ein Design löschen

So löschen Sie ein vorhandenes Design:

1. Öffnen Sie das Design im Modus zur Bearbeitung.
2. Wählen Sie oben das Symbol „Löschen“ (Papierkorbsymbol) aus.

Exportformate

So exportieren Sie Stile:

1. Wählen Sie das gewünschte Design aus der Designauswahl aus.
2. Wählen Sie im rechten Bereich die JSON-Registerkarte aus.
3. Kopieren Sie den gesamten Text in der Ansicht, und fügen Sie ihn mithilfe der Variablen styleOptions in Ihren Web Chat HTML-Code ein.

HTML-Schnipsel exportieren

So exportieren Sie das HTML-Schnipsel:

1. Wählen Sie das gewünschte Design aus der Designauswahl aus.
2. Wählen Sie im rechten Bereich die Registerkarte "Codeausschnitt" aus .
3. Speichern Sie das gesamte HTML-Markup in der Ansicht als Datei mit einer .html Erweiterung.
4. Laden Sie die HTML-Datei auf den Webserver hoch.

Beispiel-HTML

Der HTML-Beispielausschnitt verfügt über ein schwebendes Web-Chat-Steuerelement mit den angewandten Stilen.

Verwandte Informationen

• Das Erscheinungsbild eines Agent anpassen