View a markdown version of this page

Scegli come target il pulsante e il riquadro del widget Connect Customer con CSS/JavaScript - Cliente Amazon Connect
ID ed esempi degli elementi del widget

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Scegli come target il pulsante e il riquadro del widget Connect Customer con CSS/JavaScript

Il widget di comunicazione visualizza il pulsante del open/close widget e il riquadro del widget direttamente sul sito Web ospitante. Esistono selettori specifici che puoi utilizzare per indirizzare questi elementi usando i CSS o per farvi riferimento. JavaScript

Suggerimento

Per aggiornare i colori del pulsante del widget o gli stili del widget stesso, utilizza il sito web di amministrazione di Connect Customer. Per stili più personalizzabili, puoi passare degli stili personalizzati direttamente al widget di comunicazione.

ID ed esempi degli elementi del widget

Le immagini seguenti mostrano come viene visualizzato il pulsante del widget di chat sullo schermo dell’utente. La prima immagine mostra il pulsante Apri per aprire il widget della chat. La seconda immagine mostra il pulsante Chiudi per chiudere il widget della chat.

Side-by-side immagini del widget di chat per aprire e chiudere la finestra della chat.

  1. Pulsante di apertura del widget: #amazon-connect-open-widget-button

  2. Pulsante di chiusura del widget: #amazon-connect-close-widget-button

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

    1. Frame quando il widget è aperto: #amazon-connect-widget-frame.show

    2. Frame quando il widget è chiuso: #amazon-connect-widget-frame:not(.show)

Di seguito è riportato un esempio di foglio di stile CSS che modifica questi elementi:

/* 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) {
  ...
}

Di seguito è riportato un esempio di riferimento a questi elementi utilizzando 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)");