Übergeben Sie benutzerdefinierte Stile, um die Standardeinstellungen im Chat-Widget zu überschreiben

Um Ihre Chat-Benutzeroberfläche weiter anzupassen, können Sie die Standardstile überschreiben, indem Sie Ihre eigenen Werte übergeben. Sie können beispielsweise die Breite des Widgets auf 400 Pixel und die Höhe auf 700 Pixel festlegen (im Gegensatz zur Standardgröße von 300 Pixeln mal 540 Pixeln). Sie können auch Ihre bevorzugten Schriftfarben und -größen verwenden.

Wie übergibt man benutzerdefinierte Stile für das Chat-Widget

Um benutzerdefinierte Stile zu übergeben, verwenden Sie den folgenden Beispielcodeblock und betten Sie ihn in Ihr Widget ein. Amazon Connectruft die benutzerdefinierten Stile automatisch ab. Alle im folgenden Beispiel gezeigten Felder sind optional.

 amazon_connect('customStyles', {
        global: {
            frameWidth: '400px',
            frameHeight: '700px',
            textColor: '#fe3251',
            fontSize: '20px',
            footerHeight: '120px',
        },
        header: {
            headerTextColor: '#541218',
        },
        transcript: {
            messageFontSize: '13px',
            messageTextColor: '#fe3'
        },
        footer: {
            buttonFontSize: '20px',
            buttonTextColor: '#ef18d3',
        }
    })

Unterstützte Stile und Einschränkungen

In der folgenden Tabelle sind die unterstützten Namen von benutzerdefinierten Stilen und die empfohlenen Werteinschränkungen aufgeführt. Einige Stile gibt es sowohl auf globaler Ebene als auch auf Komponentenebene. Der fontSize Stil ist beispielsweise global und in der Transkriptkomponente vorhanden. Stile auf Komponentenebene haben eine höhere Priorität und werden im Chat-Widget berücksichtigt.

Name des benutzerdefinierten Stils	Beschreibung	Empfohlene Einschränkungen
global.frameWidth	Breite des gesamten Widget-Frames	Minimum: 300 Pixel Maximum: Fensterbreite Es wird empfohlen, die Anpassung an die Fenstergröße vorzunehmen
global.frameHeight	Höhe des gesamten Widget-Rahmens	Minimum: 480 Pixel Maximum: Fensterhöhe Es wird empfohlen, die Anpassung an die Fenstergröße vorzunehmen
global.textColor	Farbe für alle Texte	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
global.fontSize	Schriftgröße für alle Texte	Für verschiedene Anwendungsfälle werden 12 bis 20 Pixel empfohlen
global.footerHeight	Höhe der Fußzeile des Widgets	Minimum: 50 Pixel Maximum: Rahmenhöhe Es wird empfohlen, die Anpassung an die Rahmengröße vorzunehmen
header.headerTextColor	Textfarbe für die Header-Nachricht	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
transcript.messageFontSize	Schriftgröße für alle Texte	Für verschiedene Anwendungsfälle werden 12 bis 20 Pixel empfohlen
transcript.messageTextColor	Textfarbe für Transkriptnachrichten	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
footer.buttonFontSize	Schriftgröße für den Text der Aktionsschaltfläche	Es wird empfohlen, die Anpassung an die Höhe der Fußzeile anzupassen
footer.buttonTextColor	Farbe für den Text der Aktionsschaltfläche	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.

Im Folgenden sind die Elemente aufgeführt, aus denen das Chat-Widget besteht.

Zeigen Sie eine Vorschau Ihres Chat-Widgets mit benutzerdefinierten Stilen an

Stellen Sie sicher, dass Sie eine Vorschau Ihres Chat-Widgets mit den benutzerdefinierten Stilen anzeigen, bevor Sie es in Produktion nehmen. Benutzerdefinierte Werte können die Benutzeroberfläche des Chat-Widgets beschädigen, wenn sie nicht richtig eingestellt sind. Wir empfehlen, es auf verschiedenen Browsern und Geräten zu testen, bevor Sie es Ihren Kunden zur Verfügung stellen.

Im Folgenden finden Sie einige Beispiele für Dinge, die bei der Verwendung falscher Werte kaputt gehen können, sowie die vorgeschlagenen Lösungen.

• Problem: Das Widget-Fenster nimmt zu viel vom Bildschirm ein.

  Behoben: Verwenden Sie ein kleineres frameWidgth undframeHeight.

• Problem: Die Schriftgröße ist zu klein oder zu groß.

  Behoben: Passen Sie die Schriftgröße an.

• Problem: Unter dem Ende des Chats (Fußzeile) befindet sich ein leerer Bereich.

  Behoben: Verwenden Sie einen kleineren frameHeight oder einen größerenfooterHeight.

• Problem: Die Schaltfläche „Chat beenden“ ist zu klein oder zu groß.

  Behoben: AnpassenbuttonFontSize.

• Problem: Die Schaltfläche zum Beenden des Chats befindet sich außerhalb des Fußzeilenbereichs.

  Behoben: Verwenden Sie eine größere footerHeight oder eine kleinerebuttonFontSize.