Aggiungere il widget Amazon Connect al sito web per accettare contatti di chat, attività, e-mail e chiamate web - Amazon Connect
Fase 1: creare un modulo di contatto per il widgetPassaggio 2: personalizzazione del widget di comunicazionePassaggio 3: specifica dei domini del sito web in cui è prevista la visualizzazione del widget di comunicazionePassaggio 4: confermare e copiare il codice del widget di comunicazione e le chiavi di sicurezza

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

Aggiungere il widget Amazon Connect al sito web per accettare contatti di chat, attività, e-mail e chiamate web

Gli argomenti di questa sezione spiegano come creare e personalizzare un widget di comunicazione per il sito web. Creerai un modulo di contatto che determina il comportamento dei contatti creati tramite il widget, quindi personalizzerai l’aspetto e la funzionalità del widget.

Fase 1: creare un modulo di contatto per il widget

In questa fase, crei e personalizzi una visualizzazione che determina il comportamento per i contatti creati tramite il widget.

  1. Accedi al sito web di amministrazione di Amazon Connect all’indirizzo https://instance name.my.connect.aws/. Nella scheda Routing, seleziona Flussi.

  2. In alto a sinistra, fai clic su Visualizzazioni.

  3. Seleziona Crea visualizzazione.

  4. Qui puoi configurare un modulo di contatto per i tuoi clienti utilizzando il generatore no code. Alcuni consigli importanti:

    • L’utilizzo del componente Modulo ti consentirà di collegare Input del modulo al tuo contatto al momento della creazione. Il collegamento al modulo ti consentirà di ricevere input direttamente da chiunque interagisca con il tuo widget e di utilizzare le informazioni inserite nel modulo durante la creazione del contatto.

    • Il componente Azione di connessione è l’elemento più importante del modulo per la creazione di un contatto. Questo componente deve essere utilizzato senza altri componenti di tipo pulsante nel modulo.

    • Per utilizzare la visualizzazione con un widget Modulo di contatto, deve essere presente esattamente un componente Azione di connessione.

    • Esistono tre opzioni supportate per ConnectActionType per il componente Azione di connessione:

      • StartEmailContact

      • StartTaskContact

      • StartChatContact

      In un modulo di contatto è possibile utilizzare sia E-mail che Attività. Per creare un modulo pre-chat per i contatti di chat, consulta Aggiungere un’interfaccia utente di chat a un sito web ospitato da Amazon Connect.

    • Esistono molte opzioni di stile per i componenti Visualizzazione, che consentono di personalizzare il modulo per adattarlo al proprio ambiente.

  5. Dopo aver aggiunto un pulsante Azione di connessione al modulo, puoi impostare i valori per i contatti creati dal modulo collegandoli alle opzioni nel pulsante Azione di connessione. I componenti da collegare devono trovarsi nello stesso modulo nella visualizzazione in ci si trova il pulsante Azione di connessione.

    L’attivazione della sicurezza per le nuove richieste del widget di comunicazione.

    Sono supportati i seguenti componenti per il collegamento del modulo:

    • Form Input

    • Menu a discesa (disattiva la selezione multipla)

    • Date Picker

    • Area di testo

    • Selettore orario

  6. Quando la visualizzazione è pronta, seleziona Pubblica.

Passaggio 2: personalizzazione del widget di comunicazione

In questo passaggio, puoi personalizzare l'esperienza del widget di comunicazione per i tuoi clienti.

  1. Accedi al sito web di amministrazione di Amazon Connect all’indirizzo https://instance name.my.connect.aws/. Scegli Personalizza widget di comunicazione.

  2. Nella pagina Widget di comunicazione, scegli Aggiungi widget di comunicazione per iniziare a personalizzare una nuova esperienza con il widget di comunicazione. Per modificare, eliminare o duplicare un widget di comunicazione esistente, scegli una delle opzioni nella colonna Azioni.

  3. Inserisci un nome e una descrizione per il widget di comunicazione.

    Nota

    Il nome deve essere univoco per ogni widget di comunicazione creato in un'istanza Amazon Connect.

  4. Nella sezione Opzioni di comunicazione, seleziona Aggiungi modulo di contatto.

  5. Seleziona la visualizzazione configurata nella fase precedente. Se per il componente Azione di connessione nella Visualizzazione non è impostato un flusso di contatto, dovrai impostarne uno qui.

  6. Fai clic su Save and Continue (Salva e continua).

Nella pagina Crea widget di comunicazione, scegli gli stili del pulsante del widget e visualizza i nomi e gli stili. Durante la scelta dei colori, l'anteprima della chat si aggiorna automaticamente in modo che sia possibile vedere come apparirà il widget.

Nota

L’anteprima non mostra il modulo di contatto Visualizzazione che hai creato. Viene visualizzato solo lo stile del titolo.

Tipo di visualizzazione

Puoi scegliere tra due tipi di visualizzazione per i widget Modulo di contatto:

  • Pulsante di azione mobile consente di aggiungere il widget come pulsante interattivo nell’angolo in basso a destra della pagina web

  • Embedding inline consente di incorporare il widget direttamente nella pagina web senza dover premere un pulsante per caricarlo

Stili dei pulsanti

  1. Scegli i colori per lo sfondo del pulsante inserendo valori esadecimali (codici colore HTML).

  2. Scegli Bianco o Nero per il colore dell'icona. Il colore dell'icona non può essere personalizzato.

Intestazione del widget

  1. Indica i valori per il messaggio e il colore dell'intestazione e il colore di sfondo del widget.

  2. URL del logo: inserisci un URL che punti al banner con il logo da un bucket Amazon S3 o da un'altra origine online.

Importante

L'anteprima del widget di comunicazione nella pagina di personalizzazione non mostrerà il logo se proviene da un'origine online diversa da un bucket Amazon S3. Tuttavia, il logo verrà visualizzato quando il widget di comunicazione personalizzato verrà implementato nella tua pagina.

Il banner deve essere in formato .svg, .jpg o .png. L'immagine può misurare fino a 280 px (larghezza) per 60 px (altezza). Qualsiasi immagine più grande di tali dimensioni verrà dimensionata per adattarsi allo spazio dei componenti del logo di 280x60px.

  • Per istruzioni su come caricare un file come il banner con il logo su S3, consulta Caricamento degli oggetti nella Guida dell'utente di Amazon Simple Storage Service.

  • Assicurati che le autorizzazioni dell'immagine siano impostate correttamente in modo che il widget di comunicazione disponga delle autorizzazioni per accedervi. Per informazioni su come rendere un oggetto S3 accessibile al pubblico, consulta Fase 2: aggiungere una policy di bucket nell’argomento Impostazione delle autorizzazioni per l’accesso al sito web.

Passaggio 3: specifica dei domini del sito web in cui è prevista la visualizzazione del widget di comunicazione

  1. Inserisci i domini dei siti web in cui desideri posizionare il widget di comunicazione. Il widget viene caricato solo sui siti web selezionati in questa fase.

    Scegli Aggiungi un dominio per aggiungere fino a 50 domini.

    L'opzione Aggiungi un dominio.

    Comportamento dell’elenco di domini consentiti:

    • I sottodomini vengono inclusi automaticamente. Ad esempio, se consenti example.com, sono consentiti anche tutti i relativi sottodomini come sub.example.com.

    • Il protocollo http:// o https:// deve corrispondere esattamente alla tua configurazione. Specifica il protocollo esatto quando configuri i domini consentiti.

    • Tutti i percorsi URL sono consentiti automaticamente. Ad esempio, se example.com è consentito, tutte le pagine sottostanti (come example.com/cart o example.com/checkout) sono accessibili. Non puoi consentire o bloccare sottodirectory specifiche.

    Importante

    • Ricontrolla che gli URL del sito web siano validi e non contengano errori. Includi l'URL completo che inizia con https://.

    • Si consiglia di utilizzare https:// per i siti web e le applicazioni di produzione.

  2. Nella sezione Aggiungi le funzionalità di sicurezza per il tuo widget di comunicazione, si consiglia di scegliere Sì e di collaborare con l’amministratore del sito web per configurare i server web in modo che emettano token web JSON (JWT) per le nuove richieste di contatto. Ciò ti offre un maggiore controllo sull’avvio di nuovi contatti, inclusa la possibilità di verificare che le richieste di inviate ad Amazon Connect provengano da utenti autenticati.

    L’attivazione della sicurezza per le nuove richieste del widget di comunicazione.

    Scegliendo Sì si ottiene quanto segue:

    • Amazon Connect fornisce una chiave di sicurezza di 44 caratteri nella pagina successiva che puoi utilizzare per creare token Web JSON (JWT).

    • Amazon Connect aggiunge una funzione di callback all’interno dello script di incorporamento del widget di comunicazione che verifica la presenza di un token web JSON (JWT) quando viene avviato un contatto.

      È necessario implementare la funzione di callback nel frammento incorporato, come mostrato nell'esempio seguente.

      amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});

    Se scegli questa opzione, nella fase successiva riceverai una chiave di sicurezza per tutte le richieste di contatto avviate sui tuoi siti web. Chiedi all'amministratore del tuo sito web di configurare i server web per emettere JWT utilizzando questa chiave di sicurezza.

  3. Selezionare Salva.

Passaggio 4: confermare e copiare il codice del widget di comunicazione e le chiavi di sicurezza

In questo passaggio, vengono confermate le selezioni, copiato il codice per il widget di comunicazione e incorporato nel sito web. Se hai scelto di utilizzare JWT nel passaggio 3, puoi anche copiare le chiavi segrete per crearli.

Chiave di sicurezza

Usa questa chiave di sicurezza di 44 caratteri per generare token web JSON dal tuo web server. Puoi anche aggiornare o ruotare le chiavi se devi cambiarle. Quando esegui questa operazione, Amazon Connect ti fornisce una nuova chiave e mantiene la chiave precedente fino a quando non hai la possibilità di sostituirla. Dopo aver distribuito la nuova chiave, puoi tornare ad Amazon Connect ed eliminare la chiave precedente.

La chiave di sicurezza fornita da Amazon Connect.

Quando i clienti interagiscono con il widget di comunicazione sul sito web, il widget richiede un JWT al server web. Quando viene fornito questo JWT, il widget lo includerà come parte della richiesta di contatto del cliente finale ad Amazon Connect. Amazon Connect utilizza quindi la chiave segreta per decrittografare il token. In caso di successo, ciò conferma che il JWT è stato emesso dal tuo server web e Amazon Connect instrada la richiesta di contatto agli agenti del tuo contact center.

Specifiche del token web JSON

  • Algoritmo: HS256

  • Richieste:

    • sub: widgetId

      Sostituisci il valore widgetId con il tuo widgetId. Per trovare il widgetID, consulta l'esempio in Script del widget di comunicazione.

    • iat: *emissione al momento.

    • exp: *scadenza (massimo 10 minuti).

    • segmentAttributes (facoltativo): un set di coppie chiave-valore definite dal sistema archiviate su singoli segmenti di contatto utilizzando una mappa di attributi. Per ulteriori informazioni, controlla SegmentAttributes nell’API StartChatContact.

    • Attributi (facoltativo): oggetto con coppie chiave-valore da stringa a stringa. Gli attributi di contatto devono seguire le limitazioni impostate dall’API StartChatContact.

    • relatedContactId (facoltativo): stringa con un ID contatto valido. L’attributo relatedContactId deve seguire le limitazioni impostate dall’API StartChatContact.

    • customerId (facoltativo): può trattarsi di un ID di Amazon Connect Customer Profiles o di un identificatore personalizzato di un sistema esterno, come un CRM.

    * Per informazioni sul formato della data, consulta la documentazione IETF (Internet Engineering Task Force): Token Web JSON (JWT), pagina 5.

Il seguente frammento di codice mostra un esempio di come generare un JWT in Python:

import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',                    
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect

Script del widget di comunicazione

L’immagine seguente mostra un esempio di JavaScript da incorporare nei siti web in cui desideri che i clienti interagiscano con il tuo contact center. Questo script visualizza il widget nell'angolo in basso a destra del sito web.

Nota

Includi lo script del widget nell’elemento HTML che deve renderizzare il widget quando usi lo stile Embedding inline.

Lo script del widget di comunicazione.

Quando il sito web viene caricato, la prima cosa che il cliente vede è l’icona del widget. Quando si sceglie questa icona, il widget di comunicazione viene aperto e i clienti possono avviare il contatto con gli agenti.

Per apportare modifiche al widget di comunicazione in qualsiasi momento, scegli Modifica.

Nota

Le modifiche salvate aggiornano l'esperienza del cliente in pochi minuti. Conferma la configurazione del widget prima di salvarlo.

Il collegamento di modifica nell'anteprima del widget.

Per apportare modifiche alle icone dei widget sul sito web, riceverai un nuovo frammento di codice per aggiornare direttamente il sito web.