1. Introduzione
Ultimo aggiornamento: 23/08/2021
Trasferimento dell'agente in tempo reale con Business Messages
La funzionalità di trasferimento degli agenti in tempo reale di Business Messages consente al tuo agente di avviare una conversazione come bot e passare durante una conversazione a un agente umano (rappresentante umano). Il tuo bot può gestire le domande comuni, come l'orario di apertura, mentre il tuo operatore può fornire un'esperienza personalizzata con maggiore accesso al contesto dell'utente. Quando la transizione tra queste due esperienze è fluida, gli utenti ricevono risposte rapide e precise alle loro domande, con conseguente aumento del tasso di coinvolgimento del ritorno e della soddisfazione del cliente.
Questo codelab ti insegna come utilizzare al meglio la funzionalità di trasferimento ad agenti umani.
Cosa creerai
In questo codelab, creerai un webhook per il tuo agente che può inviare e ricevere eventi di trasferimento con agenti in tempo reale. Utilizzerai un'interfaccia utente di base fornita dal codice di avvio per testare ciò che hai creato.
Cosa imparerai a fare
- Come archiviare e gestire lo stato delle conversazioni.
- Come utilizzare Business Messages per inviare eventi di trasferimento con agenti umani.
- Come configurare un webhook e un'interfaccia utente di base per partecipare alle conversazioni in qualità di agente.
- Best practice per l'utilizzo dell'API Business Messages.
Questo codelab è incentrato sull'utilizzo dell'API Business Message per implementare il trasferimento degli agenti in tempo reale. Puoi leggere il codice iniziale per ogni fase, ma devi solo implementare il codice relativo a Business Messages.
Che cosa ti serve
- Un agente Business Messages, inclusa la chiave dell'account di servizio. Puoi creare un agente seguendo la guida alla creazione di un agente.
- Una configurazione di Cloud Datastore funzionante collegata al progetto Google Cloud dell'agente. Per eseguire la configurazione, puoi utilizzare la guida rapida di Cloud Datastore. Non è necessario sapere come utilizzare Cloud Datastore.
- Un computer su cui sono installati Google Cloud SDK e Node.js (versione 10 o successive).
- Un dispositivo Android (con versione 5 o successive) o un dispositivo iOS per testare l'esperienza utente.
- Esperienza con la programmazione di applicazioni web. Scrivi una piccola quantità di codice JavaScript e potrebbe essere necessario eseguirne il debug.
2. Crea un bot eco
In questo passaggio, eseguirai il deployment di un rappresentante di bot di base chiamato "Bot eco". Questo bot riceve i messaggi degli utenti, li registra in un thread di conversazione in Cloud Datastore, quindi "eco" il messaggio dell'utente rispondendo con gli stessi contenuti. Una volta che disponi di un bot di base e di un'infrastruttura di logging, puoi aggiungerne uno per creare un'implementazione completa del trasferimento di agenti nei passaggi successivi.
Ottieni il codice iniziale
In un terminale, clona il codice iniziale di Live Agent Transfer nella directory di lavoro del progetto con il seguente comando:
git clone https://github.com/google-business-communications/bm-nodejs-live-agent-transfer
Comprendere il codice iniziale
Diamo un'occhiata alla struttura del codice iniziale con cui lavorerai nel corso del codelab.
Vai alla directory step-1 e visualizza i contenuti. Contiene i seguenti elementi:
- bin: questa directory contiene lo script iniziale www che imposta e configura il server.
- libs: questa directory contiene
datastore_util.js, che include metodi pratici per la lettura e la scrittura da Cloud Datastore. Non è necessario capire come funziona questo file. Prendi nota dei metodi disponibili e della loro funzione. - resources: contiene la chiave dell'account di servizio sotto forma di file denominato
credentials.json. - routes: il file
index.jscontiene il webhook e tutti i relativi metodi helper. Questo è il file principale con cui lavorerai e a cui lo aggiungerai. - views: questa directory contiene i file di modello EJS per gli elementi dell'interfaccia utente. Conterrà più file nei passaggi successivi.
- app.js, app.yaml, pacchetti.json: questi file configurano l'applicazione e le sue dipendenze.
Prima di eseguire il deployment, scarica la chiave dell'account di servizio Google Cloud e copia il file delle credenziali JSON in ogni directory delle risorse nel codice campione. Esegui questa operazione per ogni passaggio del codelab.
cp credentials.json bm-nodejs-live-agent-transfer/step-<step number>/resources/credentials.json
Implementazione del codice iniziale
In un terminale, vai alla directory step-1 dell'esempio. Quindi, imposta lo strumento gcloud in modo che utilizzi il tuo progetto Google Cloud, impostando l'ID progetto che hai utilizzato per la registrazione con le API.
gcloud config set project <PROJECT_ID>
Per eseguire il deployment dell'applicazione, esegui questo comando:
gcloud app deploy
Prendi nota dell'URL dell'applicazione di cui è stato eseguito il deployment nell'output dell'ultimo comando:
Deployed service [default] to [https://PROJECT_ID.appspot.com]
Il codice iniziale di cui hai appena eseguito il deployment contiene un'applicazione web con un webhook per ricevere messaggi da Business Messages. L'applicazione restituisce i messaggi all'utente e registra i thread di messaggi in Cloud Datastore.
Configura il tuo agente
Vai alla pagina Impostazioni account nella Console per gli sviluppatori di comunicazioni aziendali e imposta il webhook sull'URL dell'applicazione di cui hai eseguito il deployment. Ad esempio, https://PROJECT_ID.appspot.com/callback/.
Nella pagina Informazioni agente, configura i tipi di interazione primaria e secondaria in modo che siano rispettivamente Bot e Human.
Parlare con il bot echo
Apri l'agente nella Developer Console. Visualizzerai la pagina Panoramica, in cui puoi esaminare i dettagli dell'agente. Copia l'URL di test dell'agente che corrisponde al tuo dispositivo mobile di test. Usa questo URL sul tuo dispositivo mobile per avviare la piattaforma di conversazione dell'agente.
Interagisci con l'agente inviando alcuni messaggi. La piattaforma conversazionale copia solo ciò che dici e non si tratta di un'esperienza utente molto utile. Se solo ci fosse un modo per parlare con una persona reale!
3. Partecipazione alla conversazione
Ora diamo un'occhiata alla conversazione dal punto di vista dell'agente. In qualità di agente umano, devi conoscere alcune informazioni sulla conversazione prima di partecipare, ad esempio l'ID della conversazione. È utile anche sapere se l'utente ha richiesto di parlare con un operatore. In questo passaggio, utilizzerai una pagina CRM (Gestione dei rapporti con i clienti) di base per visualizzare queste informazioni e partecipare alla conversazione come operatore.
Il codice iniziale per questo passaggio aggiunge un CRM di base che elenca tutti i thread conversazionali in corso per l'agente. Diamo un'occhiata a quel sistema CRM per vedere quali conversazioni potrebbero richiedere l'attenzione di un operatore.
Vai alla directory step-2 ed esegui di nuovo il deployment dell'app come hai fatto nel passaggio precedente.
Quando esegui il deployment dell'app, vedi un URL di destinazione. Vai a questo URL in un browser per visualizzare un elenco con il thread di conversazione che hai iniziato nel passaggio precedente. Lo stato della conversazione è attualmente "Gestito da bot" perché il bot eco agisce in qualità di rappresentante del nostro agente in questa conversazione.
Viene visualizzato il pulsante Partecipa alla chat, ma non funziona ancora. Inoltre, non puoi capire da questa interfaccia se l'utente vuole parlare con un operatore.
Business Messages fornisce un evento richiesto da un operatore che indica quando l'utente vuole parlare con un operatore. Devi tenere traccia di questo stato per elencarlo nell'interfaccia utente.
Dai un'occhiata al metodo di callback in index.js. Un commento TODO indica dove devi rilevare la richiesta di un agente in tempo reale da parte dell'utente e aggiornare lo stato del thread.
step-2/routes/index.js
/**
* The webhook callback method.
*/
router.post('/callback', async function(req, res, next) {
...
} else if (requestBody.userStatus !== undefined) {
if (requestBody.userStatus.requestedLiveAgent !== undefined) {
...
// TODO: Update the thread state to QUEUED_THREAD_STATE.
}
}
});
...
});
Devi utilizzare i metodi in libs/datastore_utils.js per caricare il thread della conversazione corrente e aggiornarne lo stato in QUEUED_THREAD_STATE.
Se non sai cosa fare, dai un'occhiata alle soluzioni. Il codice iniziale include una directory solutions in ogni passaggio in cui devi completare del codice. Queste directory contengono una copia dell'intera app con l'implementazione completa per il passaggio specifico.
Dopo aver completato l'implementazione ed eseguito nuovamente il deployment dell'app, utilizza il menu extra nella conversazione sul tuo dispositivo mobile per richiedere un operatore.
Ora, se torni al CRM, dovresti vedere una nota nel thread della conversazione con il messaggio "Live agent richiesto". Questo utente ha bisogno dell'aiuto di un agente. Per far funzionare il pulsante, devi implementare l'endpoint joinConversation.
Trova l'altro commento di TODO nel metodo parziale per /joinConversation.
step-2/routes/index.js
/**
* Updates the thread state and sends a representative join signal to the user.
*/
router.post('/joinConversation', async function(req, res, next) {
let conversationId = req.body.conversationId;
// TODO: Update the thread state to LIVE_AGENT_THREAD_STATE and post a REPRESENTATIVE_JOINED event.
res.json({
'result': 'ok',
});
});
Devi aggiornare di nuovo lo stato del thread, questa volta a LIVE_AGENT_THREAD_STATE. Inoltre, per pubblicare un evento REPRESENTATIVE_JOINED, devi utilizzare il metodo conversations.events.create dell'API Business Messages.
Per creare il payload della richiesta, devi impostare i campi descritti nella seguente tabella:
Nome campo | Suggerimento |
| Imposta questa opzione su 'Conversations/{conversationId}". |
| Genera il tuo ID casuale per l'evento. |
| Utilizza il metodo |
| Si tratta del corpo dell'evento stesso. Devi impostare eventType e rappresentativo. |
Consulta la pagina di riferimento per il metodo di creazione o la pagina di riferimento sugli eventi per assistenza.
Al termine dell'implementazione, esegui nuovamente il deployment dell'app e fai clic sul pulsante Partecipa alla chat. Viene visualizzata la finestra di dialogo Conversazione a cui partecipi e lo stato della chat diventa "Chat dal vivo". Se guardi la conversazione sul tuo dispositivo mobile, vedrai una nota nella chat che indica che l'operatore ha partecipato.
Complimenti! Nel passaggio successivo, vedremo come far parlare l'agente dal vivo con l'utente.
4. Messaggistica in qualità di operatore
Ora che ti sei unito alla conversazione, è il momento di inviare alcuni messaggi in qualità di operatore.
Vai alla directory step-3 ed esegui nuovamente il deployment dell'app. Nel sistema CRM, fai clic sul thread della conversazione dal passaggio precedente. A questo punto dovresti vedere un'interfaccia chat di base. Da qui, puoi visualizzare i messaggi dell'utente in tempo reale.
Tuttavia, l'invio di un messaggio come agente non è ancora implementato. Devi completare questa operazione in questo passaggio.
Apri il file routes/index.js e controlla i tre endpoint appena aggiunti:
/messages: ottiene il file di visualizzazionemessages.ejse ne esegue il rendering nel browser. Quando fai clic sul thread di una conversazione dall'indice, accedi a una di queste pagine./retrieveMessages: ottiene i contenuti del messaggio di un thread e restituisce un elenco formattato di tutti i messaggi nella conversazione. La pagina dei messaggi chiama periodicamente questo endpoint per visualizzare i messaggi più recenti./sendMessage: invia un messaggio dal rappresentante dell'agente in tempo reale all'utente. La pagina Messaggi richiama questa opzione quando fai clic su Invia. Al momento non è implementata.
Ora diamo un'occhiata al metodo storeAndSendResponse esistente:
step-3/routes/index.js
/**
* Updates the thread, adds a new message and sends a response to the user.
*
* @param {string} message The message content that was received.
* @param {string} conversationId The unique id for this user and agent.
* @param {string} threadState Represents who is managing the conversation for the CRM.
* @param {string} representativeType The representative sending the message, BOT or HUMAN.
*/
async function storeAndSendResponse(message, conversationId, threadState, representativeType) {
...
}
Il webhook utilizza già questo metodo per inviare risposte dal bot eco. Il metodo archivia innanzitutto i dati dei messaggi in arrivo nell'oggetto Cloud Datastore per la conversazione. Quindi, invia il messaggio di risposta. Esamina attentamente l'oggetto messaggio che crea, in particolare il tipo di rappresentante.
Ora, implementa personalmente l'endpoint /sendMessage. Puoi usare il metodo storeAndSendResponse esistente per svolgere la maggior parte del lavoro. È importante ricordare di impostare il rappresentante corretto.
Al termine, esegui nuovamente il deployment dell'app e torna alla conversazione nel CRM. Ora puoi vedere i tuoi messaggi nella cronologia chat. Puoi anche vedere i messaggi dell'agente sul tuo dispositivo di test mobile.
Prima di andare avanti, assicurati di comprendere come funzionano i nuovi endpoint. Nel passaggio successivo, aggiungerai il tuo endpoint per abbandonare la conversazione.
5. Uscita dalla conversazione
Dopo aver aiutato l'utente con le sue domande, può essere opportuno abbandonare la conversazione e consentirgli di parlare di nuovo con il bot. In Business Messages, questa modifica è segnalata da un evento REPRESENTATIVE_LEFT.
Vai alla directory step-4, esegui nuovamente il deployment dell'app e torna al thread della conversazione. In fondo al thread è ora disponibile un link Chiudi la conversazione e abbandona la conversazione. Questo link non funziona ancora perché l'endpoint leaveConversation non è stato implementato.
Esamina il file index.js. È presente un commento TODO che ti indica di creare un nuovo endpoint leaveConversation.
step-4/routes/index.js
/*
* TODO: Create a '/leaveConversation' endpoint that does the following:
* - Updates the thread to BOT_THREAD_STATE.
* - Sends a REPRESENTATIVE_LEFT event.
* - Sends a message to the thread informing the user that they are speaking to the echo bot again.
*
* Hint: You can use the same methods that '/joinConversation' uses.
*/
Per implementarlo, devi mettere insieme tutto ciò che hai appreso finora dal codelab. Questo endpoint deve:
- Aggiorna il thread in
BOT_THREAD_STATE. - Invia un evento
REPRESENTATIVE_LEFT. - Invia un messaggio nella conversazione per dire all'utente che sta parlando con il bot eco. Utilizza il metodo
storeAndSendResponse. Ricorda che il rappresentante ha ripristinatoBOT.
L'ultimo passaggio chiarisce lo stato della conversazione per l'utente. L'utente vede un evento quando un rappresentante abbandona la chat, ma non sa necessariamente che sta parlando di nuovo con il bot di eco. Inviando un messaggio direttamente dal bot, riduci la confusione per gli utenti e migliori l'esperienza.
Ora che è il bot, l'agente umano è libero di partecipare a un'altra conversazione. Prova a utilizzare il codice campione e il CRM quanto vuoi. Prova alcune delle tue idee sull'esperienza di trasferimento degli agenti in tempo reale della tua attività e scopri cosa ti viene in mente.
6. In sintesi
Congratulazioni per aver completato il codelab per il trasferimento con agenti dal vivo.
Hai creato un agente in grado di gestire i trasferimenti di agenti attivi dall'inizio alla fine. Hai anche imparato un modo per tenere traccia dello stato di una conversazione con Cloud Datastore.
Con il trasferimento di agenti umani, potrai lasciare le richieste comuni al tuo bot, mentre gli agenti gestiranno richieste più complesse. I tuoi utenti saranno più soddisfatti della nuova esperienza personalizzata e utile, aumentando le loro probabilità di tornare e consigliare la tua attività agli amici.
Passaggi successivi
Dai un'occhiata ad alcuni di questi codelab:
Per approfondire
- Rivedi i principi base del trasferimento di agenti in diretta con la guida relativa all'Handoff da bot ad agenti umani.
- Esegui l'upgrade del tuo bot echo a un bot di domande frequenti con la guida Dialogflow.