Richten Sie die Schaltfläche und den Frame Ihres Amazon Connect Connect-Widgets mit CSS aus. JavaScript - Amazon Connect
Widget-Element IDs und Beispiele

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Richten Sie die Schaltfläche und den Frame Ihres Amazon Connect Connect-Widgets mit CSS aus. JavaScript

Das Kommunikations-Widget rendert die open/close Widget-Schaltfläche und den Widget-Frame direkt auf der Host-Website. Es gibt spezielle Selektoren, mit denen Sie diese Elemente entweder mithilfe von CSS gezielt ansprechen oder in ihnen referenzieren können. JavaScript

Tipp

Verwenden Sie die Admin-Website von Amazon Connect, um die Farben der Widget-Schaltfläche oder die Stile des Widgets selbst zu aktualisieren. Für anpassbarere Stile können Sie benutzerdefinierte Stile direkt an das Kommunikations-Widget übergeben.

Widget-Element IDs und Beispiele

Die folgenden Abbildungen zeigen, wie die Chat-Widget-Schaltfläche auf dem Bildschirm des Benutzers angezeigt wird. Die erste Abbildung zeigt die Schaltfläche „Öffnen“ zum Öffnen des Chat-Widgets. Die zweite Abbildung veranschaulicht die Schaltfläche „Schließen“ zum Schließen des Chat-Widgets.

Side-by-side Bilder des Chat-Widgets zum Öffnen und Schließen des Chat-Fensters.

  1. Schaltfläche „Widget öffnen“: #amazon-connect-open-widget-button

  2. Schaltfläche „Widget schließen“: #amazon-connect-close-widget-button

  3. Widget-Frame: #amazon-connect-widget-frame

    1. Widget-Frame im geöffneten Zustand: #amazon-connect-widget-frame.show

    2. Widget-Frame im geschlossenen Zustand: #amazon-connect-widget-frame:not(.show)

Im Folgenden finden Sie ein Beispiel für ein CSS-Stylesheet, das diese Elemente ändert:

/* Target widget button while widget is minimized */
#amazon-connect-open-widget-button {
  ...
}

/* Target widget button while widget is showing */
#amazon-connect-close-widget-button {
  ...
}

/* Target widget frame */
#amazon-connect-widget-frame {
  ...
}

/* Target widget frame while it is showing */
#amazon-connect-widget-frame.show {
  ...
}

/* Target widget frame while it is minimized */
#amazon-connect-widget-frame:not(.show) {
  ...
}

Im Folgenden finden Sie ein Beispiel für die Referenzierung dieser Elemente mithilfe von JavaScript:

const openWidgetButton = document.getElementById("amazon-connect-open-widget-button");
const closeWidgetButton = document.getElementById("amazon-connect-close-widget-button");

const widgetFrame = document.querySelector("#amazon-connect-widget-frame");
const openWidgetFrame = document.querySelector("#amazon-connect-widget-frame.show");
const hiddenWidgetFrame = document.querySelector("#amazon-connect-widget-frame:not(.show)");