Aggiungi il widget Amazon Connect al tuo 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 tuo 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.

Passaggio 1: crea un modulo di contatto per il tuo widget

In questo passaggio, crei e personalizzi una visualizzazione che determina il comportamento dei contatti creati tramite il widget.

1. Accedi al sito web di Amazon Connect amministrazione all'indirizzohttps://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 senza codice. Alcuni consigli importanti:

   • L'utilizzo del componente Form ti consentirà di collegare Form Inputs al tuo contatto al momento della creazione. Il collegamento ai moduli ti consentirà di ricevere input direttamente da chiunque interagisca con il tuo widget e di utilizzare le informazioni incluse nel modulo durante la creazione dei contatti.

   • Il componente Connect Action è 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 il widget Visualizza con un modulo di contatto, deve essere presente esattamente un componente Connect Action.

   • Sono supportate tre opzioni ConnectActionType per il componente Connect Action:

     • StartEmailContact

     • StartTaskContact

     • StartChatContact

     Sia Email che Task possono essere utilizzati in un modulo di contatto. Per creare un modulo pre-chat per i contatti della chat, consultaAggiungi un'interfaccia utente di chat al tuo sito Web ospitato da Amazon Connect.

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

5. Dopo aver aggiunto un pulsante Connect Action al modulo, puoi impostare i valori per i contatti creati dal modulo collegandoli alle opzioni del pulsante Connect Action. I componenti che desideri collegare devono trovarsi nello stesso modulo presente nella visualizzazione del pulsante Connect Action.

   

   I seguenti componenti sono supportati per il collegamento dei moduli:

   • Form Input

   • Dropdown (disattiva la selezione multipla)

   • Date Picker

   • Area di testo

   • Selettore orario

6. Quando la visualizzazione è pronta, seleziona Pubblica.

Passaggio 2: personalizza il 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'indirizzohttps://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 i 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 che hai configurato nel passaggio precedente. Se il componente Connect Action in View non ha un flusso di contatti impostato, 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 mostrerà il modulo di contatto Visualizza che hai creato. Verrà visualizzato solo lo stile dell'intestazione.

Tipo di visualizzazione

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

• Il pulsante d'azione mobile ti consente di aggiungere il widget come pulsante interattivo nell'angolo in basso a destra della pagina web

• La funzionalità incorporata in linea 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 Passaggio 2: Aggiungere una policy bucket nell'argomento Impostazione delle autorizzazioni per l'accesso al sito Web.

Passaggio 3: Specificate i domini del sito Web in cui intendete visualizzare il 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 questo passaggio.

   Scegli Aggiungi un dominio per aggiungere fino a 50 domini.

   

   Comportamento nell'elenco dei 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. Specificate il protocollo esatto quando impostate i domini consentiti.

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

   Importante

   • Ricontrolla che il tuo sito web URLs sia valido e non contenga 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 sicurezza per il widget di comunicazione, ti consigliamo di scegliere Sì e di collaborare con l'amministratore del sito web per configurare i server web in modo che emettano JSON Web Tokens (JWTs) per nuove richieste di contatto. Questo ti offre un maggiore controllo sull'avvio di nuovi contatti, inclusa la possibilità di verificare che le richieste inviate ad Amazon Connect provengano da utenti autenticati.

   

   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 (). JWTs

   • 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 in modo che emettano JWTs l'uso di questa chiave di sicurezza.

3. Scegli Save (Salva).

Passaggio 4: Conferma e copia 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 utilizzarle JWTs nella Fase 3, puoi anche copiare le chiavi segrete per crearle.

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.

Quando i tuoi clienti interagiscono con il widget di comunicazione sul tuo sito Web, il widget richiede al tuo server Web un JWT. 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 indirizza la richiesta di contatto agli agenti del tuo contact center.

Specifiche del token web JSON

• Algoritmo: HS256

• Richieste:

  • sottotitolo: 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 (opzionale): un insieme di coppie chiave-valore definite dal sistema memorizzate su singoli segmenti di contatto utilizzando una mappa di attributi. Per ulteriori informazioni, consulta l'API. SegmentAttributes StartChatContact

  • attributi (opzionale): oggetto con coppie string-to-string chiave-valore. Gli attributi dei contatti devono rispettare le limitazioni impostate dall'StartChatContactAPI.

  • relatedContactId (opzionale): Stringa con un ID di contatto valido. relatedContactId Devono seguire le limitazioni stabilite dall'StartChatContactAPI.

  • CustomerID (opzionale): può essere un ID dei profili cliente di Amazon Connect o 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": "[e-mail]", "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 ciò che incorpori 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

Includete lo script del widget nell'elemento HTML che deve renderizzare il widget quando utilizzate lo stile incorporato in linea.

Quando il sito web viene caricato, i clienti vedono per prima cosa l'icona del widget. Quando scelgono questa icona, si apre il widget di comunicazione e i clienti possono iniziare a contattare i tuoi 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.

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