Übergeben Sie benutzerdefinierte Eigenschaften, um die Standardeinstellungen im Kommunikations-Widget zu überschreiben

Um Ihre Chat-Benutzeroberfläche weiter anzupassen, können Sie die Standardeigenschaften überschreiben, indem Sie Ihre eigenen Werte übergeben. Beispielsweise können Sie 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.

So übergeben Sie benutzerdefinierte Stile für das Kommunikations-Widget

Um benutzerdefinierte Stile zu übergeben, verwenden Sie den folgenden Beispielcodeblock und betten Sie ihn in Ihr Widget ein. Amazon Connect ruft 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',
     typeface: 'Times New Roman', 
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950', 
     agentChatBubbleColor: '#111112',
     non-interchangeable: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonholer: '#964950',
     buttonBackgroundColor: '#964950',
     backgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     backgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     counter-revolutionaries: '#541218',
     startChatButtonBorderColor: '#fe3'
     counter-revolutionaries: '#fe3'
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 }
})

Unterstützte Stile und Beschränkungen

In der folgenden Tabelle sind die Namen von unterstützten benutzerdefinierten Stilen und die empfohlenen Beschränkungen der Werte aufgeführt. Einige Stile sind sowohl auf globaler Ebene als auch auf Komponentenebene vorhanden. Der Stil fontSize 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 Beschränkungen
global.frameWidth	Breite des gesamten Widget-Frames	Minimum: 300 Pixel Maximum: Fensterbreite Es wird empfohlen, eine Anpassung an die Fenstergröße vorzunehmen
global.frameHeight	Höhe des gesamten Widget-Rahmens	Minimum: 480 Pixel Maximum: Fensterhöhe Es wird empfohlen, eine 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 Widget-Fußzeile	Minimum: 50 Pixel Maximum: Rahmenhöhe Es wird empfohlen, eine Anpassung an die Rahmengröße vorzunehmen
global.typeface	Die im Widget verwendete Schriftart.	Jede Schriftart aus dieser Liste: Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Book man, Tacoma, Trebuches MS, Arial Black, Impact, Comic Sans MS.
header.headerTextColor	Textfarbe für die Header-Nachricht	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
header.headerBbackgroundColor	Textfarbe für den Header-Hintergrund	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.
transcript.widgetBackgroundColor	Textfarbe für den Hintergrund des Transkripts	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
transcript.agentChatBubbleColor	Textfarbe für Nachrichtenblasen für Agenten	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
transcript.customerChatBubbleColor	Textfarbe für Kunden-Nachrichtenblasen	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, eine Anpassung an die Höhe der Fußzeile vorzunehmen
footer.buttonTextColor	Farbe für den Text der Aktionsschaltfläche	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
footer.buttonBorderColor	Farbe für den Rand der Aktionsschaltfläche	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
backgrounder	Farbe für den Hintergrund der Aktionsschaltfläche	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
footer.BackgroundColor	Farbe für den Fußzeilenhintergrund	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
footer.startCallButtonBackgroundColor	Farbe für den Text der Startanruftaste	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
footer.startCallButtonBorderColor	Farbe für den Rand der Startanruftaste	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
backgrounder	Farbe für den Hintergrund der Startanruftaste	Jeder zulässige CSS-Farbwert. Weitere Informationen finden Sie unter Zulässige CSS-Farbwerte.
logo.logoMaxHeight	Maximale Höhe des Logos	Minimum: 0 Pixel Maximum: Höhe der Kopfzeile Es wird empfohlen, die Anpassung je nach Bildgröße und Rahmenhöhe vorzunehmen
logo.logoMaxWidth	Maximale Breite des Logos	Minimum: 0 Pixel Maximum: Breite der Kopfzeile Es wird empfohlen, die Anpassung je nach Bildgröße und Rahmenbreite vorzunehmen

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

Wie übergibt man Namen und Logos für Override-System- und Bot-Displays für das Kommunikations-Widget

Um die auf der Amazon Connect Admin-Website festgelegten Konfigurationen für den System-/Bot-Anzeigenamen und das Logo zu überschreiben, betten Sie den folgenden Codeblock in Ihr Widget-Code-Snippet ein. Alle im folgenden Beispiel gezeigten Felder sind optional.

amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logUrl: "https://example.com/abc.png"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Widget",      
      startCallButtonText: "Call an Agent"
 },
})

Unterstützte Eigenschaften und Einschränkungen

Name des benutzerdefinierten Stils	Beschreibung	Empfohlene Beschränkungen
header.headerMessage	Text für die Header-Nachricht	Mindestlänge: 1 Zeichen. Maximale Länge: 11 Zeichen Es wird empfohlen, die Anpassung auf der Grundlage der Kopfzeilenbreite vorzunehmen
header.logUrl	URL, die auf das Logobild verweist	Maximale Länge: 2048 Zeichen Muss eine gültige URL sein, die auf eine PNG-, JPG- oder .SVG-Datei verweist
transcript.systemMessageDisplayName	Text, der den SYSTEM_MESSAGE Anzeigenamen überschreiben soll	Mindestlänge: 1 Zeichen. Maximale Länge: 26 Zeichen
transcript.botMessageDisplayName	Text zum Überschreiben des BOT-Anzeigenamens	Mindestlänge: 1 Zeichen. Maximale Länge: 26 Zeichen
footer.textInputPlaceholder	Text, der den Platzhalter bei der Texteingabe überschreiben soll	Mindestlänge: 1 Zeichen. Maximale Länge: 22 Zeichen
footer.endChatButtonText	Text, der den Text der Schaltfläche zum Beenden des Chats überschreibt	Mindestlänge: 1 Zeichen. Maximale Länge: 11 Zeichen Es wird empfohlen, die Anpassung auf der Grundlage der Tastenbreite vorzunehmen
footer.closeChatButtonText	Text, der den Text der Schaltfläche zum Schließen des Chats überschreiben soll	Mindestlänge: 1 Zeichen. Maximale Länge: 11 Zeichen Es wird empfohlen, die Anpassung auf der Grundlage der Tastenbreite vorzunehmen
footer.closeStartCallButtonText	Text, der den Text der Startanruftaste überschreiben soll	Mindestlänge: 1 Zeichen. Maximale Länge: 11 Zeichen Es wird empfohlen, die Anpassung auf der Grundlage der Tastenbreite vorzunehmen

Zeigen Sie eine Vorschau Ihres Kommunikations-Widgets mit benutzerdefinierten Eigenschaften an

Stellen Sie sicher, dass Sie eine Vorschau Ihres Kommunikations-Widgets mit den benutzerdefinierten Eigenschaften anzeigen, bevor Sie es in Produktion nehmen. Benutzerdefinierte Werte können die Darstellung der Benutzeroberfläche des Kommunikations-Widgets beeinträchtigen, wenn sie nicht korrekt eingestellt sind. Wir empfehlen Tests mit verschiedenen Browsern und Geräten, bevor Sie das Widget Ihren Kunden zur Verfügung stellen.

Im Folgenden finden Sie einige Beispiele für Fehler, die durch falsche Werte auftreten können, sowie Lösungsvorschläge dazu.

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

  Lösung: Verwenden Sie kleinere Werte für frameWidth undframeHeight.

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

  Lösung: Passen Sie die Schriftgröße an.

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

  Lösung: Verwenden Sie einen kleineren Wert für frameHeight oder einen größeren Wert für footerHeight.

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

  Lösung: Passen Sie buttonFontSize an.

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

  Lösung: Verwenden Sie einen größeren Wert für footerHeight oder einen kleineren Wert für buttonFontSize.