L'integrazione legacy di Dialogflow CX Messenger fornisce una finestra di dialogo di chat personalizzabile per il tuo agente che puoi incorporare nel tuo sito web. Gli utenti possono aprire e chiudere la finestra di dialogo della chat come una finestra. Quando un utente apre la finestra di dialogo della chat, questa viene visualizzata sopra i tuoi contenuti nella parte in basso a destra dello schermo.
Migrazione alla versione più recente di Dialogflow CX Messenger
L'ultima versione di Dialogflow CX Messenger fornisce l'autenticazione per controllare l'accesso alle query dell'agente e altre opzioni di configurazione dell'interfaccia utente. Ti consigliamo di eseguire la migrazione dalla versione precedente alla nuova versione.
Se hai attivato l'integrazione di Dialogflow CX Messenger prima del 29 agosto 2023, potresti utilizzare la versione precedente. Per determinare se stai utilizzando la versione precedente, esamina il codice HTML di Messenger incorporato nel tuo sito web. Se vedi il seguente script, stai utilizzando la versione precedente:
https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1
Per eseguire la migrazione alla nuova versione, completa i seguenti passaggi:
- Elimina tutto il codice HTML, CSS e JavaScript di Messenger dal tuo sito web.
- Segui le istruzioni per l'ultima integrazione di Dialogflow CX Messenger.
Personalizzazioni HTML
Puoi personalizzare vari aspetti dell'aspetto e del comportamento della finestra di dialogo della chat.
L'elemento HTML df-messenger ha i seguenti attributi:
| Attributo | Policy di input | Valore |
|---|---|---|
agent-id |
Obbligatorio | ID agente associato all'agente. Questo campo è precompilato con il tuo ID agente. |
chat-icon |
Facoltativo | Icona utilizzata per il pulsante di apertura della finestra di dialogo della chat. L'icona di Dialogflow CX è l'impostazione predefinita. Questo campo deve essere un URL pubblico. Le dimensioni dell'icona devono essere 36 x 36 px. |
chat-title |
Obbligatorio | Titolo visualizzato nella parte superiore della finestra di dialogo della chat. Questo campo è precompilato con il nome dell'agente. |
df-cx |
Obbligatorio | Indica che l'interazione avviene con un agente CX. Utilizza "true" come valore. |
expand |
Facoltativo | Attributo booleano che imposta l'apertura della finestra di dialogo della chat al caricamento pagina. Per impostazione predefinita, la finestra di dialogo della chat è chiusa quando la pagina viene caricata. |
intent |
Facoltativo | Un evento personalizzato che viene richiamato quando viene aperta la finestra di dialogo della chat. Puoi utilizzare un gestore di eventi che viene chiamato per questo evento e produce il primo messaggio dell'agente. |
language-code |
Obbligatorio | Codice lingua predefinito per il primo intent. Questo campo viene precompilato con la lingua predefinita dell'agente. |
location |
Obbligatorio | La regione dell'agente. |
session-id |
Facoltativo | Un ID sessione. Se non viene fornito, l'integrazione genererà un ID univoco per ogni finestra di chat. |
user-id |
Facoltativo | Consente di monitorare un utente in più sessioni. Puoi passare il valore a Dialogflow CX tramite il campo queryParams.payload.userId in una richiesta di rilevamento dell'intent e Dialogflow CX ti fornisce questo valore tramite il campo WebhookRequest.payload.userId. |
wait-open |
Facoltativo | Attributo booleano che ritarda l'evento personalizzato definito nell'attributo intent fino all'apertura effettiva della finestra di dialogo. |
Personalizzazioni CSS
Puoi personalizzare lo stile della finestra di dialogo della chat impostando le variabili CSS.
È possibile fornire le seguenti variabili CSS:
| Variabile CSS | Proprietà interessata |
|---|---|
df-messenger-bot-message |
Colore di sfondo del fumetto per i messaggi dell'agente. |
df-messenger-button-titlebar-color |
Colore del pulsante mobile e della barra del titolo della finestra di dialogo della chat. |
df-messenger-button-titlebar-font-color |
Colore del carattere del titolo nella barra del titolo. |
df-messenger-chat-background-color |
Colore dello sfondo della finestra di dialogo della chat. |
df-messenger-font-color |
Colore del carattere per i messaggi. |
df-messenger-input-box-color |
Colore di sfondo della casella di immissione del testo. |
df-messenger-input-font-color |
Colore del carattere per la casella di immissione del testo. |
df-messenger-input-placeholder-font-color |
Colore del carattere per il testo segnaposto nella casella di immissione del testo. |
df-messenger-minimized-chat-close-icon-color |
Colore dell'icona di chiusura nella visualizzazione della chat chiusa. |
df-messenger-send-icon |
Colore dell'icona di invio nella casella di immissione del testo. |
df-messenger-user-message |
Colore di sfondo del fumetto per i messaggi degli utenti. |
Esempio di codice:
<style>
df-messenger {
--df-messenger-bot-message: #878fac;
--df-messenger-button-titlebar-color: #df9b56;
--df-messenger-chat-background-color: #fafafa;
--df-messenger-font-color: white;
--df-messenger-send-icon: #878fac;
--df-messenger-user-message: #479b3d;
}
</style>
Queste impostazioni comporteranno:
Eventi JavaScript
Dialogflow Messenger attiva una serie di eventi per i quali puoi creare listener di eventi.
Il target dell'evento per questi eventi è l'elemento df-messenger.
Per aggiungere un listener di eventi per l'elemento df-messenger,
aggiungi il seguente codice JavaScript,
dove event-type è uno dei nomi evento descritti di seguito:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.addEventListener('event-type', function (event) {
// Handle event
...
});
Sono supportati i seguenti tipi di eventi:
df-accordion-clicked
Questo evento si verifica quando un utente fa clic su un elemento accordion. La struttura dell'evento è simile alla seguente:
element: {
title: string,
subtitle: string,
image: {
src: {rawUrl: string}
},
text: string
}
df-button-clicked
Questo evento si verifica quando un utente fa clic su un elemento pulsante. La struttura dell'evento è simile alla seguente:
element: {
icon: {
type: string,
color: string
},
text: string,
link: string,
event: EventInput,
payload: {}
}
df-chip-clicked
Questo evento si verifica quando un utente seleziona un chip di suggerimento. La struttura dell'evento è simile alla seguente:
query: string // Text of the suggestion chip that was selected.
df-info-card-clicked
Questo evento si verifica quando l'utente finale fa clic sull'elemento informativo nella barra del titolo. La struttura dell'evento è simile alla seguente:
element: {
title: string,
image: {
src: {rawUrl: string}
},
actionLink: string
}
df-list-element-clicked
Questo evento si verifica quando un utente fa clic su un articolo in un elenco. La struttura dell'evento è simile alla seguente:
element: {
title: string,
subtitle: string,
image: {
src: {rawUrl}
},
event: {
name: string
},
payload: {}
}
df-messenger-error
Questo evento si verifica quando l'API Dialogflow invia un codice di stato di errore. La struttura dell'evento è simile alla seguente:
error: {
"error": {
"code": <error_code>,
"message": <error_message>,
"status": <error_status>
}
}
df-messenger-loaded
Questo evento viene attivato quando l'elemento df-messenger viene caricato e inizializzato completamente.
df-request-sent
Questo evento si verifica quando viene effettuata una richiesta all'API Dialogflow.
Questo evento, insieme a df-response-received,
può essere utilizzato per monitorare la latenza delle richieste.
La struttura dell'evento è simile alla seguente:
requestBody: {
"queryParams": {
object(QueryParameters)
},
"queryInput": {
object(QueryInput)
},
"inputAudio": string
}
df-response-received
Questo evento si verifica quando viene ricevuta una risposta dall'API Dialogflow. La struttura dell'evento è simile alla seguente:
response: detectIntentResponse
df-user-input-entered
Questo evento si verifica quando l'utente finale inserisce una query. La struttura dell'evento è simile alla seguente:
input: string // Text entered by user
Funzioni JavaScript
Puoi chiamare le funzioni fornite dall'elemento df-messenger per modificarne il comportamento.
renderCustomText
Questa funzione visualizza un messaggio, come se provenisse da Dialogflow CX come risposta di testo.
Ad esempio:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');
renderCustomCard
Questa funzione esegue il rendering di una scheda personalizzata, come se provenisse dal fulfillment di Dialogflow CX. Il formato della risposta del payload personalizzato è definito nella sezione Fulfillment.
Ad esempio:
const dfMessenger = document.querySelector('df-messenger');
const payload = [
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"actionLink": "https://example.com"
}];
dfMessenger.renderCustomCard(payload);
showMinChat
Questa funzione mostra una versione ridotta degli elenchi di messaggi.
Ad esempio:
const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();
Fulfillment
Quando crei il fulfillment, puoi creare risposte di testo e payload personalizzati. Le risposte di testo vengono utilizzate per le risposte di base dell'agente, mentre i payload personalizzati vengono utilizzati per le risposte avanzate. Il formato del payload personalizzato per tutti i tipi di risposta ha la seguente struttura di base:
{
"richContent": [
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
],
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
]
]
}
Il valore richContent consente un array esterno e più array interni. Le risposte all'interno di un array interno sono raggruppate in un'unica scheda visiva. Quando l'array esterno contiene più array interni, vengono visualizzate più schede, una per ogni array interno.
Le sottosezioni rimanenti descrivono i vari tipi di risposte che puoi configurare per un payload personalizzato.
Tipo di risposta informativa
Il tipo di risposta informativa è un intertitolo che puoi toccare o su cui puoi fare clic.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string | Tipo di risposta: "info". |
title |
string | Titolo della scheda. |
subtitle |
string | Sottotitolo della scheda. |
image |
oggetto | Immagine. |
image.src |
oggetto | Origine immagine. |
image.src.rawUrl |
string | URL pubblico dell'immagine. |
actionLink |
string | URL da seguire quando si fa clic sulla scheda. |
Ad esempio:
{
"richContent": [
[
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"actionLink": "https://example.com"
}
]
]
}
Tipo di risposta della descrizione
Il tipo di risposta Descrizione è una scheda informativa che può contenere più righe di testo.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string | Tipo di risposta: "description". |
title |
string | Titolo della scheda. |
text |
array<string> | Array di stringhe, in cui ogni stringa viene visualizzata su una nuova riga. |
Ad esempio:
{
"richContent": [
[
{
"type": "description",
"title": "Description title",
"text": [
"This is text line 1.",
"This is text line 2."
]
}
]
]
}
Tipo di risposta immagine
Il tipo di risposta con immagine è una scheda con immagine su cui gli utenti possono fare clic o toccare.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string | Tipo di risposta: "image". |
rawUrl |
string | URL pubblico dell'immagine. |
accessibilityText |
string | Alt text for image. |
Ad esempio:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Example logo"
}
]
]
}
Tipo di risposta del pulsante
Il tipo di risposta con pulsante è un piccolo pulsante con un'icona e un'etichetta di testo su cui puoi fare clic o toccare.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string | Tipo di risposta: "button". |
icon |
oggetto | Icona del pulsante. |
icon.type |
string | Icona della raccolta di icone Material. L'icona predefinita è una freccia. |
icon.color |
string | Codice esadecimale del colore. |
text |
string | Testo del pulsante. |
link |
string | URL da seguire quando si fa clic sul pulsante. |
event |
oggetto | Evento Dialogflow CX che viene attivato quando si fa clic sul pulsante. |
Ad esempio:
{
"richContent": [
[
{
"type": "button",
"icon": {
"type": "chevron_right",
"color": "#FF9800"
},
"text": "Button text",
"link": "https://example.com",
"event": {
"name": ""
}
}
]
]
}
Tipo di risposta elenco
Il tipo di risposta elenco è una scheda con più opzioni tra cui gli utenti possono scegliere.
La risposta contiene un array di tipi di risposta list e divider.
La tabella seguente descrive il tipo list:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string | Tipo di risposta: "list". |
title |
string | Titolo dell'opzione. |
subtitle |
string | Sottotitolo dell'opzione. |
event |
oggetto | Evento Dialogflow CX che viene attivato quando si fa clic sull'opzione. |
La tabella seguente descrive il tipo divider:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string | Tipo di risposta: "divider". |
Ad esempio:
{
"richContent": [
[
{
"type": "list",
"title": "List item 1 title",
"subtitle": "List item 1 subtitle",
"event": {
"name": ""
}
},
{
"type": "divider"
},
{
"type": "list",
"title": "List item 2 title",
"subtitle": "List item 2 subtitle",
"event": {
"name": ""
}
}
]
]
}
Tipo di risposta a fisarmonica
Il tipo di risposta a fisarmonica è una piccola scheda su cui puoi fare clic o toccare per espandere e visualizzare altro testo.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string | Tipo di risposta: "accordion". |
title |
string | Titolo della sezione a scomparsa. |
subtitle |
string | Sottotitolo della sezione a fisarmonica. |
image |
oggetto | Immagine. |
image.src |
oggetto | Origine immagine. |
image.src.rawUrl |
string | URL pubblico dell'immagine. |
text |
string | Testo per l'accordion. |
Ad esempio:
{
"richContent": [
[
{
"type": "accordion",
"title": "Accordion title",
"subtitle": "Accordion subtitle",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"text": "Accordion text"
}
]
]
}
Tipo di risposta del chip di suggerimento
Il tipo di risposta con chip di suggerimento fornisce all'utente finale un elenco di chip di suggerimento cliccabili.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string | Tipo di risposta: "chips". |
options |
array<object> | Array di oggetti opzione. |
options[].text |
string | Testo dell'opzione. |
options[].image |
oggetto | Immagine dell'opzione. |
options[].image.src |
oggetto | Origine dell'immagine dell'opzione. |
options[].image.src.rawUrl |
string | URL pubblico facoltativo per l'immagine. |
options[].link |
string | URL del link dell'opzione. |
Ad esempio:
{
"richContent": [
[
{
"type": "chips",
"options": [
{
"text": "Chip 1",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"link": "https://example.com"
},
{
"text": "Chip 2",
"image": {
"src": {
"rawUrl": "https://example.com/images/logo.png"
}
},
"link": "https://example.com"
}
]
}
]
]
}
Combinazione dei tipi di risposta
Puoi utilizzare i singoli elementi dei messaggi avanzati per Dialogflow CX Messenger per creare una scheda personalizzata in base alle tue esigenze.
Ecco un esempio che utilizza alcuni degli elementi elencati in precedenza:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Dialogflow CX across platforms"
},
{
"type": "info",
"title": "Dialogflow CX",
"subtitle": "Build natural and rich conversational experiences",
"actionLink": "https://cloud.google.com/dialogflow/docs"
},
{
"type": "chips",
"options": [
{
"text": "Case Studies",
"link": "https://cloud.google.com/dialogflow/case-studies"
},
{
"text": "Docs",
"link": "https://cloud.google.com/dialogflow/docs"
}
]
}
]
]
}
Debug
Per testare l'agente localmente con Dialogflow CX Messenger:
- Incorpora l'elemento Dialogflow CX Messenger in una pagina come descritto nella sezione Personalizzazioni HTML.
- Avvia un server HTTP locale per la pagina con una porta specifica.
- Vai a
http://localhost:port_numberper accedere alla pagina.