Indirizza il pulsante e il frame del widget Amazon Connect con CSS/ JavaScript - Amazon Connect
Elemento del widget IDs ed esempi

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à.

Indirizza il pulsante e il frame del widget Amazon Connect con CSS/ JavaScript

Il widget di comunicazione visualizza il pulsante del open/close widget e il frame del widget direttamente sul sito Web ospitante. Esistono selettori specifici che potete utilizzare per indirizzare questi elementi utilizzando 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 Amazon Connect. Per stili più personalizzabili, puoi passare degli stili personalizzati direttamente al widget di comunicazione.

Elemento IDs ed esempi 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 di 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)");