Trasferire proprietà personalizzate per la sovrascrittura delle impostazioni predefinite nel widget di comunicazione in Amazon Connect - Amazon Connect
Come trasferire stili personalizzati per il widget di comunicazioneStili e vincoli supportatiCome passare i logo e i nomi visualizzati System e Bot di override per il widget di comunicazioneVisualizzare l’anteprima del widget di comunicazione con proprietà personalizzate

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

Trasferire proprietà personalizzate per la sovrascrittura delle impostazioni predefinite nel widget di comunicazione in Amazon Connect

Per personalizzare ulteriormente l’interfaccia utente della chat, puoi sovrascrivere le proprietà predefinite passando i tuoi valori. Ad esempio, puoi impostare la larghezza del widget su 400 pixel e l'altezza su 700 pixel (a differenza della dimensione predefinita di 300 pixel per 540 pixel). Puoi anche usare i colori e le dimensioni dei caratteri che preferisci.

Come trasferire stili personalizzati per il widget di comunicazione

Per passare stili personalizzati, usa il seguente blocco di codice di esempio e incorporalo nel tuo widget. Amazon Connect recupera automaticamente gli stili personalizzati. Tutti i campi mostrati nell'esempio seguente sono facoltativi.

amazon_connect('customStyles', {
 global: {
     frameWidth: '400px',
     frameHeight: '700px',
     textColor: '#fe3251',
     fontSize: '20px',
     footerHeight: '120px',
     typeface: "'AmazonEmber-Light', serif",
     customTypefaceStylesheetUrl: "https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf",
     headerHeight: '120px',
 },
 header: {
     headerTextColor: '#541218',
     headerBackgroundColor: '#fe3',
 },
 transcript: {
     messageFontSize: '13px',
     messageTextColor: '#fe3',
     widgetBackgroundColor: '#964950',
     agentMessageTextColor: '#ef18d3',
     systemMessageTextColor: '#ef18d3',
     customerMessageTextColor: '#ef18d3',
     agentChatBubbleColor: '#111112',
     systemChatBubbleColor: '#111112',
     customerChatBubbleColor: '#0e80f2',
 },
 footer: {
     buttonFontSize: '20px',
     buttonTextColor: '#ef18d3',
     buttonBorderColor: '#964950',
     buttonholer: '#964950',
     buttonBackgroundColor: '#964950',
     backgroundColor: '#964950',
     footerBackgroundColor: '#0e80f2',
     backgroundColor: '#0e80f2',
     startCallButtonTextColor: '#541218',
     startChatButtonBorderColor: '#fe3',
     startCallButtonBackgroundColor: '#fe3',
 },
 logo: {
     logoMaxHeight: '61px',   
     logoMaxWidth: '99%',
 },
  composer: {
     fontSize: '20px', 
 },
  fullscreenMode: true // Enables fullscreen mode on the widget when a mobile screen size is detected in a web browser.
})

Stili e vincoli supportati

La tabella seguente elenca i nomi degli stili personalizzati supportati e i vincoli sui valori consigliati. Alcuni stili esistono sia a livello globale sia a livello di componente. Ad esempio, lo stile fontSize esiste a livello globale e nel componente di trascrizione. Gli stili a livello di componente hanno una priorità più alta e verranno rispettati nel widget di chat.

Nome dello stile personalizzato

Description

Vincoli consigliati

global.frameWidth

Larghezza dell'intero frame del widget

Minimo: 300 pixel

Massimo: larghezza della finestra

Si consiglia di regolare tale valore in base alle dimensioni della finestra

global.frameHeight

Altezza dell'intero frame del widget

Minimo: 480 pixel

Massimo: altezza della finestra

Si consiglia di regolare tale valore in base alle dimensioni della finestra

global.textColor

Colore per tutti i testi

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

global.fontSize

Dimensione del carattere per tutti i testi

Consigliata da 12 a 20 pixel per diversi casi d'uso

global.footerHeight

Altezza del piè di pagina del widget

Minimo: 50 pixel

Massimo: altezza del frame

Si consiglia di regolarla in base alla dimensione del frame

global.typeface

Il carattere utilizzato nel widget.

Qualsiasi carattere di questo elenco: Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Book man, Tacoma, Trebuches MS, Arial Black, Impact, Comic Sans MS.

Puoi anche aggiungere un carattere o una famiglia di caratteri personalizzati, ma devi ospitare il file dei caratteri con accesso pubblico in lettura. Ad esempio, puoi visualizzare la documentazione per utilizzare la famiglia di caratteri Amazon Ember nella libreria per sviluppatori Amazon.

global.customTypefaceStylesheetUrl

Posizione in cui è ospitato il file dei caratteri personalizzati con accesso pubblico in lettura.

Link alla posizione HTTP pubblica in cui è ospitato il file dei caratteri. Ad esempio, la posizione CDN di AmazonEmber Light typeface è https://ds6yc8t7pnx74.cloudfront.net/etc.clientlibs/developer-portal/clientlibs/main/css/resources/fonts/AmazonEmber_Lt.ttf

header.headerTextColor

Colore del testo per il messaggio di intestazione

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

header.headerBackgroundColor

Colore del testo per lo sfondo dell’intestazione

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

global.headerHeight

Altezza dell’intestazione del widget

È consigliabile regolare questo valore in base all’utilizzo del titolo o del logo dell’immagine oppure di entrambi.

transcript.messageFontSize

Dimensione del carattere per tutti i testi

Consigliata da 12 a 20 pixel per diversi casi d'uso

transcript.messageTextColor

Colore del testo per i messaggi di trascrizione

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

transcript.widgetBackgroundColor

Colore del testo per lo sfondo della trascrizione

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

transcript.customerMessageTextColor

Colore del testo per i messaggi del cliente

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

transcript.agentMessageTextColor

Colore del testo per i messaggi dell’agente

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

transcript.systemMessageTextColor

Colore del testo per i messaggi di sistema

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

transcript.agentChatBubbleColor

Colore di sfondo per i fumetti dei messaggi dell’agente

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

transcript.customerChatBubbleColor

Colore di sfondo per i fumetti dei messaggi del cliente

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

transcript.systemChatBubbleColor

Colore di sfondo per i fumetti dei messaggi di sistema

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

footer.buttonFontSize

Dimensione del carattere per il testo del pulsante di azione

Si consiglia di regolarla in base all'altezza del piè di pagina

footer.buttonTextColor

Colore per il testo del pulsante di azione

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

footer.buttonBorderColor

Colore per il bordo del pulsante di azione

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

footer.buttonBackgroundColor

Colore per lo sfondo del pulsante di azione

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

footer.BackgroundColor

Colore per lo sfondo del piè di pagina

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

footer.startCallButtonTextColor

Colore per il testo del pulsante di avvio chiamata

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

footer.startCallButtonBorderColor

Colore per il bordo del pulsante di avvio chiamata

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

footer.startCallButtonBackgroundColor

Colore per lo sfondo del pulsante di avvio chiamata

Qualsiasi valore di colore legale in CSS. Per ulteriori informazioni, consulta l'articolo relativo ai valori di colore legale in CSS.

logo.logoMaxHeight

Altezza massima del logo

Minimo: 0 pixel

Massimo: altezza dell’intestazione

È consigliabile regolare questo valore in base alle dimensioni dell’immagine e all’altezza del frame

logo.logoMaxWidth

Larghezza massima del logo

Minimo: 0 pixel

Massimo: larghezza dell’intestazione

È consigliabile regolare questo valore in base alle dimensioni dell’immagine e alla larghezza del frame

composer.fontSize

Dimensioni del carattere per il testo dello strumento di composizione

Consigliata da 12 a 20 pixel per diversi casi d'uso

fullscreenMode

Abilita la modalità a schermo intero nel widget quando vengono rilevate le dimensioni dello schermo di un dispositivo mobile in un browser web.

tipo: boolean

Di seguito sono riportati gli elementi che costituiscono il widget di comunicazione.

Elementi che costituiscono il widget di comunicazione.

Come passare i logo e i nomi visualizzati System e Bot di override per il widget di comunicazione

Per sostituire le configurazioni del nome System/Bot visualizzato e del logo impostate nel sito Web di Amazon Connect amministrazione, incorpora il seguente blocco di codice nel frammento di codice del widget. Tutti i campi mostrati nell'esempio seguente sono facoltativi.

amazon_connect('customDisplayNames', {
 header: {
     headerMessage: "Welcome!",
     logoUrl: "https://example.com/abc.png",
     logoAltText: "Amazon Logo Banner"
 },
 transcript: {
     systemMessageDisplayName: "Amazon System",
     botMessageDisplayName: "Alexa"
 },
 footer: {
     textInputPlaceholder: "Type Here!",     
      endChatButtonText: "End Session",      
      closeChatButtonText: "Close Chat",      
      startCallButtonText: "Start Call"
 },
})

Proprietà supportate e vincoli

Nome dello stile personalizzato Description Vincoli consigliati

header.headerMessage

 Testo per il messaggio di intestazione

Lunghezza minima: 1 carattere

Lunghezza massima: 11 caratteri

È consigliabile regolare questo valore in base alla larghezza dell’intestazione

header.logoUrl

 URL che punta all’immagine del logo

Lunghezza massima: 2048 caratteri

Deve essere un URL valido che punti a un file .png, .jpg o .svg.

header.logoAltText

 Testo per sostituire l’attributo alt per il banner del logo

Lunghezza massima: 2048 caratteri

transcript.systemMessageDisplayName

 Testo per sostituire il nome visualizzato SYSTEM_MESSAGE

Lunghezza minima: 1 carattere

Lunghezza massima: 26 caratteri

transcript.botMessageDisplayName

 Testo per sostituire il nome visualizzato BOT

Lunghezza minima: 1 carattere

Lunghezza massima: 26 caratteri

footer.textInputPlaceholder

 Testo per sostituire il segnaposto nell’input di testo

Lunghezza minima: 1 carattere

Lunghezza massima: 256 caratteri

footer.endChatButtonText

 Testo per sostituire il testo del pulsante di fine chat

Lunghezza minima: 1 carattere

Lunghezza massima: 256 caratteri

È consigliabile regolare questo valore in base alla larghezza del pulsante

footer.closeChatButtonText

 Testo per sostituire il testo del pulsante di chiusura della chat

Lunghezza minima: 1 carattere

Lunghezza massima: 256 caratteri

È consigliabile regolare questo valore in base alla larghezza del pulsante

footer.startCallButtonText

 Testo per sostituire il testo del pulsante di avvio chiamata

Lunghezza minima: 1 carattere

Lunghezza massima: 256 caratteri

È consigliabile regolare questo valore in base alla larghezza del pulsante

Visualizzare l’anteprima del widget di comunicazione con proprietà personalizzate

Assicurati di visualizzare l’anteprima del widget di comunicazione con le proprietà personalizzate prima di inserirlo in produzione. I valori personalizzati possono interrompere l'interfaccia utente del widget di comunicazione se non sono impostati correttamente. Si consiglia di testarlo su diversi browser e dispositivi prima di rilasciarlo ai tuoi clienti.

Di seguito sono riportati alcuni esempi di problemi che potrebbero verificarsi quando vengono utilizzati valori non corretti e le soluzioni suggerite.

  • Problema: la finestra del widget occupa troppo spazio sullo schermo.

    Correzione: usa un frameWidth e un frameHeight di dimensioni più piccole.

  • Problema: la dimensione del carattere è troppo piccola o troppo grande.

    Correzione: regola la dimensione del carattere.

  • Problema: è presente un'area vuota sotto la fine della chat (piè di pagina).

    Correzione: usa un frameHeight o un footerHeight di dimensioni più piccole.

  • Problema: il pulsante Termina chat è troppo piccolo o troppo grande.

    Correzione: regola buttonFontSize.

  • Problema: il pulsante Termina chat esce dall'area a piè di pagina.

    Correzione: usane un footerHeight di dimensioni più grandi o un buttonFontSize di dimensioni più piccole.