Dialogflow CX Messenger precedente

L'integrazione precedente di Dialogflow CX con Messenger fornisce una finestra di dialogo di chat personalizzabile per il tuo agente che può essere integrata nel tuo sito web. La finestra di dialogo della chat è implementata come finestra di dialogo che può essere aperta e chiusa dall'utente finale. Una volta aperta, la finestra di dialogo della chat viene visualizzata sopra i contenuti nella parte in basso a destra dello schermo.

Migrazione all'ultima versione di Messenger di Dialogflow CX

La versione più recente di Dialogflow CX Messenger fornisce l'autenticazione per controllare l'accesso alle query degli agenti e altre opzioni di configurazione dell'interfaccia utente. Ti consigliamo di eseguire la migrazione alla nuova versione per tutti gli utenti della versione precedente.

Se hai attivato l'integrazione di Messenger di Dialogflow CX 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 visualizzi lo script seguente, significa che 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:

  1. Elimina tutto il codice HTML, CSS e JavaScript di Messenger dal tuo sito web.
  2. Segui le istruzioni per la più recente integrazione di Messenger con Dialogflow CX.

Personalizzazioni HTML

Puoi personalizzare diversi aspetti relativi all'aspetto e al comportamento della finestra di dialogo della chat. L'elemento HTML df-messenger prevede i seguenti attributi:

Attributo Norme relative all'input Valore
agent-id Obbligatorio L'ID agente associato all'agente. È 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 Conversational Agents (Dialogflow CX) è predefinita. Questo campo deve essere un URL pubblico. Le dimensioni dell'icona devono essere di 36 x 36 px.
chat-title Obbligatorio Titolo visualizzato nella parte superiore della finestra di dialogo della chat. È 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 la finestra di dialogo della chat come aperta al caricamento della pagina. Per impostazione predefinita, la finestra di dialogo della chat viene chiusa al caricamento della pagina.
intent Facoltativo Un evento personalizzato che verrà invocato quando si apre la finestra di dialogo della chat. Puoi utilizzare un gestore eventi che verrà chiamato per questo evento e produrrà il primo messaggio dell'agente.
language-code Obbligatorio Codice lingua predefinito per il primo intento. Questo campo è 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 Può essere utilizzato per monitorare un utente nelle varie sessioni. Puoi passare il valore a Conversational Agents (Dialogflow CX) tramite il campo queryParams.payload.userId in una richiesta di rilevamento dell'intenzione e Conversational Agents (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 variabili CSS.

È possibile fornire le seguenti variabili CSS:

Variabile CSS Proprietà interessata
df-messenger-bot-message Colore di sfondo della bolla per i messaggi dell'agente.
df-messenger-button-titlebar-color Colore del pulsante mobile e della barra delle app della finestra di dialogo della chat.
df-messenger-button-titlebar-font-color Colore del carattere del titolo nella barra delle app.
df-messenger-chat-background-color Colore per lo sfondo della finestra di dialogo della chat.
df-messenger-font-color Colore dei caratteri per i messaggi.
df-messenger-input-box-color Colore di sfondo per la casella di immissione del testo.
df-messenger-input-font-color Colore del carattere per la casella di immissione di 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 Invia nella casella di immissione del testo.
df-messenger-user-message Colore di sfondo della bolla 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>

Le impostazioni precedenti comportano:

Screenshot di Messenger

Eventi JavaScript

Dialogflow Messenger attiva una serie di eventi per i quali puoi creare event listener.

Il target dell'evento per questi eventi è l'elemento df-messenger.

Per aggiungere un gestore di eventi per l'elemento df-messenger, aggiungi il seguente codice JavaScript, dove event-type è uno dei nomi di 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 a scomparsa. La struttura dell'evento è la 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 di pulsante. La struttura dell'evento è la 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 è la 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 delle app. La struttura dell'evento è la 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 è la 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 è la seguente:

error: {
  "error": {
    "code": <error_code>,
    "message": <error_message>,
    "status": <error_status>
  }
}

df-messenger-loaded

Questo evento viene attivato quando l'elemento df-messenger è completamente caricato e inizializzato.

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 è la 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 è la seguente:

response: detectIntentResponse

df-user-input-entered

Questo evento si verifica quando l'utente finale inserisce una query. La struttura dell'evento è la seguente:

input: string // Text entered by user

Funzioni JavaScript

L'elemento df-messenger fornisce funzioni che puoi chiamare per influire sul suo comportamento.

renderCustomText

Questa funzione mostra un semplice messaggio di testo, come se provenisse da Conversational Agents (Dialogflow CX) come semplice risposta di testo.

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text');

renderCustomCard

Questa funzione mostra una scheda personalizzata, come se provenisse dall'elaborazione di Conversational Agents (Dialogflow CX). Il formato della risposta del payload personalizzato è definito nella sezione Esecuzione.

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 minima degli elenchi di messaggi.

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.showMinChat();

Fulfillment

Quando crei un servizio di evasione, 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",
        ...
      }
    ]
  ]
}

Tieni presente che il valore richContent consente un array esterno e più array interni. Le risposte all'interno di un array interno sono unite in un'unica scheda visiva. Quando l'array esterno contiene più array interni, vengono mostrate più schede, una per ogni array interno.

Le restanti sottosezioni descrivono i vari tipi di risposte che puoi configurare per un payload personalizzato.

Tipo di risposta informativa

Il tipo di risposta informativa è una semplice scheda del titolo su cui gli utenti possono fare clic o toccare.

Screenshot di Messenger

La seguente tabella 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 descrizione

Il tipo di risposta descrizione è una scheda informativa che può avere più righe di testo.

Screenshot di Messenger

La seguente tabella 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 immagine è una scheda di immagini su cui gli utenti possono fare clic o toccare.

Screenshot di Messenger

La seguente tabella descrive i campi:

Nome Tipo Descrizione
type string Tipo di risposta: "image"
rawUrl string URL pubblico dell'immagine
accessibilityText string Testo alternativo per l'immagine

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

Tipo di risposta del pulsante

Il tipo di risposta del pulsante è un piccolo pulsante con un'icona su cui gli utenti possono fare clic o toccare.

Screenshot di Messenger

La seguente tabella descrive i campi:

Nome Tipo Descrizione
type string Tipo di risposta: "button"
icon oggetto Icona del pulsante
icon.type string Icona della libreria 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 Conversational Agents (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 dell'elenco

Il tipo di risposta elenco è una scheda con più opzioni tra cui gli utenti possono scegliere.

Screenshot di Messenger

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: "elenco"
title string Titolo dell'opzione
subtitle string Sottotitolo dell'opzione
event oggetto Evento Conversational Agents (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 dell'elenco a scomparsa

Il tipo di risposta a fisarmonica è una piccola scheda su cui un utente può fare clic o toccare per espanderla e visualizzare altro testo.

Screenshot di Messenger

La seguente tabella descrive i campi:

Nome Tipo Descrizione
type string Tipo di risposta: "accordion"
title string Titolo dell'elenco a scomparsa
subtitle string Sottotitolo dell'elenco a scomparsa
image oggetto Immagine
image.src oggetto Origine immagine
image.src.rawUrl string URL pubblico dell'immagine
text string Testo della sezione a scomparsa

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 del chip di suggerimento fornisce all'utente finale un elenco di chip di suggerimento cliccabili.

Screenshot di Messenger

La seguente tabella descrive i campi:

Nome Tipo Descrizione
type string Tipo di risposta: "chips"
options array<object> Array di oggetti Option
options[].text string Testo dell'opzione
options[].image oggetto Immagine opzione
options[].image.src oggetto Origine immagine dell'opzione
options[].image.src.rawUrl string Opzione URL pubblico per l'immagine
options[].link string Link all'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"
          }
        ]
      }
    ]
  ]
}

Combinare i tipi di risposta

I singoli elementi dei messaggi avanzati per Messenger di Dialogflow CX possono essere utilizzati per creare una scheda personalizzata in base alle tue esigenze. Ecco un esempio che utilizza alcuni degli elementi elencati sopra:

Screenshot di Messenger

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Conversational Agents (Dialogflow CX) across platforms"
      },
      {
        "type": "info",
        "title": "Conversational Agents (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 Messenger di Dialogflow CX in una pagina come descritto nella sezione Personalizzazioni HTML.
  • Avvia un server HTTP locale per quella pagina con una porta specifica.
  • Accedi alla pagina all'indirizzo http://localhost:port_number.