Alcuni prodotti e funzionalità sono in fase di rinominazione. Anche le funzionalità di playbook e flusso generativi sono in fase di migrazione a un'unica console consolidata. Consulta i dettagli.

Questa pagina è stata tradotta dall'API Cloud Translation.

Esecuzione di Dialogflow CX Messenger

Quando crei un fulfillment di una scheda personalizzata, puoi creare risposte di testo e payload personalizzati. Le risposte di testo vengono utilizzate per le risposte dell'agente in testo normale e Markdown, 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 raggruppate in una singola scheda visiva. Quando l'array esterno contiene più array interni, vengono mostrate più schede, una per ogni array interno.

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

Messaggio di risposta

Screenshot del testo di Dialogflow CX Messenger

La risposta di testo supporta testo normale e Markdown. Ecco alcuni esempi di Markdown:

*Italic*
**Bold**
# Title
[Link text](Link URL)
![](Image URL)

Nota: per attivare le immagini in Markdown, l'attributo url-allowlist deve essere specificato di conseguenza.

Tabelle:

Header 1 | Header 2
-------- | --------
Cell 1   | Cell 2

Tipo di risposta informativa

Screenshot del tipo di informazioni di Dialogflow CX Messenger

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

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`	`object`	Immagine
`image.rawUrl`	`string`	URL pubblico dell'immagine
`anchor`	`object`	Ancoraggio da seguire quando viene fatto clic sull'elemento
`anchor.href`	`string`	URL dell'ancora
`anchor.target`	`string`	Target dell'ancora, il valore predefinito è `_blank`

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "anchor": {
          "href": "https://example.com"
        }
      }
    ]
  ]
}

Tipo di risposta Descrizione

Screenshot del tipo di descrizione di Dialogflow CX Messenger

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 con immagine

Screenshot del tipo di immagine di Dialogflow CX Messenger

Il tipo di risposta con immagine è una scheda immagine su cui gli utenti possono fare clic o toccare. Il tipo di risposta supporta un chip di riferimento che consente di aggiungere l'origine dell'immagine come link di ancoraggio insieme a un breve testo descrittivo e a un'icona.

La tabella seguente descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "immagine"
`rawUrl`	`string`	URL pubblico dell'immagine
`accessibilityText`	`string`	Testo alternativo per l'immagine
`reference.text`	`string`	Testo da mostrare nel chip di riferimento
`reference.anchor.href`	`string`	URL del chip di riferimento
`reference.anchor.target`	`string`	Destinazione dell'ancora nel chip di riferimento, il valore predefinito è `_blank`
`reference.image.rawUrl`	`string`	Immagine da mostrare nel chip di riferimento

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo",
        "reference": {
          "text": "Logo",
          "anchor": {
            "href": "https://example.com/images/logo.png"
          },
          "image": {
            "rawUrl": "https://example.com/images/logo_small.png"
          }
        }
      }
    ]
  ]
}

Possono essere fornite le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-image-border-radius`	Facoltativo	8 px	Raggio bordo dell'immagine

Tipo di video di risposta

Screenshot del tipo di video di Dialogflow CX Messenger

Il tipo di risposta video esegue il rendering di un elemento video che può essere un video diretto da URL, riprodotto direttamente nel messenger, o un link a un video.

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "video"
`title`	`string`	Titolo del video facoltativo
`source`	`object`	La fonte del video
`source.type`	`string`	Un tipo di origine video, `link` o `raw`
`source.anchor`	`object`	Ancoraggio da seguire quando viene fatto clic sull'elemento
`source.embeddedPlayer`	`string`	Un video di tipo `link` può essere incorporato anziché collegato alla pagina web del player. Questa funzionalità è implementata solo per un insieme noto di player e supporta `youtube`.
`source.thumbnail`	`object`	Miniatura da mostrare per `anchor`
`source.thumbnail.rawUrl`	`string`	L'URL della miniatura
`source.rawUrl`	`string`	URL di un video di tipo `raw`

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "video",
        "source": {
          "type": "link",
          "anchor": {
            "href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
          }
        }
      }
    ]
  ]
}

Possono essere fornite le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-video-width`	Facoltativo	auto	Larghezza di un video (limitata da `max-width\: 100%`)
`df-messenger-video-height`	Facoltativo	auto	Altezza di un video
`df-messenger-video-embed-width`	Facoltativo	560px	Larghezza di un video incorporato (limitata da `max-width\: 100%`)
`df-messenger-video-embed-height`	Facoltativo	315px	Altezza di un video incorporato
`df-messenger-video-border`	Facoltativo	1px solid #e0e0e0	Bordo del video
`df-messenger-video-border-radius`	Facoltativo	8 px	Raggio bordo del video

Tipo di risposta del pulsante

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

La tabella seguente descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "pulsante"
`icon`	`object`	Icona del pulsante
`icon.type`	`string`	Icona della libreria di icone Material. L'icona predefinita è una freccia
`icon.color`	`string`	Codice esadecimale del colore
`image`	`object`	Immagine per il pulsante, ha la precedenza su `icon`
`image.rawUrl`	`string`	URL pubblico dell'immagine
`mode`	`string`	Facoltativo, se impostato su "blocco", l'input utente viene disattivato finché l'utente non fa clic sul pulsante
`text`	`string`	Testo del pulsante
`anchor`	`object`	Ancoraggio da seguire quando viene fatto clic sull'elemento
`anchor.href`	`string`	URL dell'ancora
`anchor.target`	`string`	Target dell'ancora, il valore predefinito è `_blank`
`event`	`object`	Evento Dialogflow CX che viene attivato quando si fa clic sul pulsante.

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "mode": "blocking",
        "text": "Button text",
        "anchor": {
          "href": "https://example.com"
        },
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

Possono essere fornite le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-button-border`	Facoltativo	nessuno	Bordo di un pulsante
`df-messenger-button-border-radius`	Facoltativo	8 px	Raggio bordo di un pulsante
`df-messenger-button-font-color`	Facoltativo	#1f1f1f	Colore del testo di un pulsante
`df-messenger-button-font-family`	Facoltativo	"Google Sans", "Helvetica Neue", sans-serif	Famiglia di caratteri di un pulsante
`df-messenger-button-font-size`	Facoltativo	14px	Dimensione carattere di un pulsante
`df-messenger-button-padding`	Facoltativo	12 px	Spaziatura interna di un pulsante
`df-messenger-button-icon-spacing`	Facoltativo	12 px	Spazio tra l'icona del pulsante e il testo
`df-messenger-button-icon-font-size`	Facoltativo	24 px	Dimensioni dell'icona del pulsante
`df-messenger-button-image-size`	Facoltativo	24 px	Dimensioni dell'immagine del pulsante
`df-messenger-button-image-offset`	Facoltativo	0	Offset dell'immagine del pulsante, consente valori negativi per compensare il padding
`df-messenger-button-text-align`	Facoltativo	al centro	Allineamento del testo di un pulsante
`df-messenger-button-text-wrap`	Facoltativo	normale	Utilizza `nowrap` per non consentire pulsanti multilinea

Tipo di risposta Elenco

Screenshot del tipo di elenco di Dialogflow CX Messenger

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: "elenco"
`title`	`string`	Titolo dell'opzione
`subtitle`	`string`	Sottotitolo dell'opzione
`event`	`object`	Evento Dialogflow CX attivato quando si fa clic sull'opzione
`anchor`	`object`	Ancoraggio da seguire quando viene fatto clic sull'elemento
`anchor.href`	`string`	URL dell'ancora
`anchor.target`	`string`	Target dell'ancora, il valore predefinito è `_blank`
`image`	`object`	Immagine
`image.rawUrl`	`string`	URL pubblico dell'immagine

La tabella seguente descrive il tipo divider:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "divisore"

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "event": ""
        }
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

Possono essere fornite le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-list-padding`	Facoltativo	16 px	Spaziatura interna di un elemento di elenco
`df-messenger-list-inset`	Facoltativo	0	Rientro orizzontale aggiuntivo dell'elemento di elenco (oltre al padding), per controllare l'espansione del bordo tra gli elementi
`df-messenger-list-spacing`	Facoltativo	10px	Spazio verticale tra gli elementi dell'elenco
`df-messenger-list-border-bottom`	Facoltativo	1px solid #e0e0e0	Bordo tra gli elementi dell'elenco

Tipo di risposta Accordion

Screenshot del tipo di fisarmonica di Dialogflow CX Messenger

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

La tabella seguente descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "fisarmonica"
`title`	`string`	Titolo fisarmonica
`subtitle`	`string`	Sottotitolo dell'accordion
`image`	`object`	Immagine
`image.rawUrl`	`string`	URL pubblico dell'immagine
`text`	`string`	Testo fisarmonica

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Tipo di risposta del chip di suggerimento

Screenshot del tipo di chip di Dialogflow CX Messenger

Il tipo di risposta con chip di suggerimento fornisce all'utente finale un elenco di chip di suggerimento su cui è possibile fare clic.

La tabella seguente descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "chip"
`options`	`array<object>`	Array di oggetti Option
`options[].mode`	`string`	Facoltativo, se impostato su "blocco", l'input utente viene disattivato finché l'utente non fa clic sul chip
`options[].text`	`string`	Testo dell'opzione
`options[].image`	`object`	Opzione facoltativa, opzione Immagine
`options[].image.rawUrl`	`string`	URL pubblico dell'opzione per l'immagine
`options[].anchor`	`object`	Facoltativo, ancora da seguire quando viene fatto clic sull'elemento
`options[].anchor.href`	`string`	URL dell'ancora
`options[].anchor.target`	`string`	Target dell'ancora, il valore predefinito è `_blank`

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "chips",
        "options": [
          {
            "mode": "blocking",
            "text": "Chip 1",
            "image": {
              "rawUrl": "https://example.com/images/logo.png"
            },
            "anchor": {
              "href": "https://example.com"
            }
          },
          {
            "text": "Chip 2",
            "image": {
              "rawUrl": "https://example.com/images/logo.png"
            },
            "anchor": {
              "href": "https://example.com"
            }
          }
        ]
      }
    ]
  ]
}

Possono essere fornite le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-chips-spacing`	Facoltativo	10px	Spazio sopra i chip per il messaggio precedente
`df-messenger-chips-border-color`	Facoltativo	#e0e0e0	Colore del bordo di un chip
`df-messenger-chips-border-color-hover`	Facoltativo	#e0e0e0	Colore del bordo di un chip al passaggio del mouse
`df-messenger-chips-border-radius`	Facoltativo	999px	Raggio bordo di un chip
`df-messenger-chips-background`	Facoltativo	bianco	Sfondo di un chip
`df-messenger-chips-background-hover`	Facoltativo	rgba(68, 71, 70, 0.08)	Sfondo di un chip al passaggio del mouse
`df-messenger-chips-padding`	Facoltativo	6px 16px	Spaziatura interna di un chip
`df-messenger-chips-font-color`	Facoltativo	nero	Colore del testo di un chip
`df-messenger-chips-font-family`	Facoltativo	"Google Sans", "Helvetica Neue", sans-serif	Famiglia di caratteri di un chip
`df-messenger-chips-font-size`	Facoltativo	14px	Dimensioni del testo di un chip
`df-messenger-chips-font-weight`	Facoltativo	normale	Spessore del carattere di un chip
`df-messenger-chips-font-weight-hover`	Facoltativo	normale	Spessore del carattere di un chip al passaggio del mouse
`df-messenger-chips-box-shadow`	Facoltativo	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Ombreggiatura casella di un chip
`df-messenger-chips-content-align`	Facoltativo	flex all'inizio	Allineamento verticale dei contenuti (ad es. l'immagine) in un chip
`df-messenger-chips-text-wrap`	Facoltativo	nowrap	Utilizza `normal` per consentire i chip multilinea

Tipo di risposta Citazioni

Screenshot del tipo di citazioni di Dialogflow CX Messenger

Il tipo di risposta Citazioni fornisce all'utente finale un elenco di link alle citazioni su cui è possibile fare clic.

La tabella seguente descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "match_citations"
`citations`	`array<object>`	Array di oggetti Citation
`citations[].title`	`string`	Titolo della citazione
`citations[].subtitle`	`string`	Sottotitolo della citazione (attualmente ignorato)
`citations[].anchor`	`object`	Ancoraggio da seguire quando viene fatto clic sull'elemento
`citations[].anchor.href`	`string`	URL dell'ancora
`citations[].anchor.target`	`string`	Target dell'ancora, il valore predefinito è `_blank`

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "match_citations",
        "citations": [
          {
            "title": "Source 1",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/1"
            }
          },
          {
            "title": "Source 2",
            "subtitle": "",
            "anchor": {
              "href": "https://example.com/2"
            }
          }
        ]
      }
    ]
  ]
}

Possono essere fornite le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-citations-spacing`	Facoltativo	10px	Spazio sopra le citazioni del messaggio precedente
`df-messenger-citations-message-display`	Facoltativo	blocco	Definisce la visualizzazione della nota sopra le citazioni. I valori consentiti sono `block` o `none`.
`df-messenger-citations-message-font-color`	Facoltativo	#041e49	Colore del testo della nota sopra le citazioni
`df-messenger-citations-message-font-size`	Facoltativo	12 px	Dimensioni del testo della nota sopra le citazioni
`df-messenger-citations-flex-direction`	Facoltativo	riga	Proprietà Flex Direction delle citazioni, consigliata per l'utilizzo di `row` (orizzontale con interruzioni di riga) o `column` (verticale)
`df-messenger-citations-border-color`	Facoltativo	#1a73e8	Colore del bordo di una citazione
`df-messeenger-citations-border-color-hover`	Facoltativo	#1a73e8	Colore del bordo di una citazione al passaggio del mouse
`df-messenger-citations-border-radius`	Facoltativo	4 px	Raggio bordo di una citazione
`df-messenger-citations-padding`	Facoltativo	8 px	Riempimento di una citazione
`df-messenger-citations-background`	Facoltativo	bianco	Contesto di una citazione
`df-messenger-citations-background-hover`	Facoltativo	rgba(68, 71, 70, 0.08)	Sfondo di una citazione al passaggio del mouse
`df-messenger-citations-font-color`	Facoltativo	#1a73e8	Colore del testo di una citazione
`df-messenger-citations-font-family`	Facoltativo	"Google Sans", "Helvetica Neue", sans-serif	Famiglia di caratteri di una citazione
`df-messenger-citations-font-size`	Facoltativo	11px	Dimensioni del testo di una citazione
`df-messenger-citations-icon-font-size`	Facoltativo	14px	Dimensioni del testo dell'icona di una citazione
`df-messenger-citations-font-weight`	Facoltativo	normale	Spessore del carattere di una citazione
`df-messenger-citations-font-weight-hover`	Facoltativo	normale	Lo spessore del carattere di una citazione al passaggio del mouse
`df-messenger-citations-icon-spacing`	Facoltativo	4 px	Spazio tra l'icona e il testo in una citazione
`df-messenger-citations-box-shadow`	Facoltativo	nessuno	Ombreggiatura casella di una citazione

Tipo di risposta File

Screenshot del tipo di file di Dialogflow CX Messenger

Il tipo di risposta File visualizza un elenco di elementi di file che contengono un link scaricabile.

La tabella seguente descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "file"
`files`	`array<object>`	Array di oggetti File
`files[].name`	`string`	Nome file
`files[].image`	`object`	Immagine del file
`files[].image.rawUrl`	`string`	URL pubblico del file per l'immagine
`files[].anchor`	`object`	Ancora per scaricare il file
`files[].anchor.href`	`string`	URL dell'ancora
`files[].anchor.target`	`string`	Target dell'ancora, il valore predefinito è `_blank`

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "files",
        "files": [
          {
            "name": "instructions.pdf",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/cloud_download/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/instructions.pdf"
            }
          },
          {
            "name": "data.csv",
            "image": {
              "rawUrl":
                  "https://fonts.gstatic.com/s/i/short-term/release/googlesymbols/csv/default/24px.svg"
            },
            "anchor": {
              "href": "https://example.com/data.csv"
            }
          }
        ]
      }
    ]
  ]
}

Possono essere fornite le seguenti variabili CSS

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-files-spacing`	Facoltativo	10px	Spazio sopra il file fino al messaggio precedente
`df-messenger-files-distance`	Facoltativo	8 px	Distanza tra i file nell'elenco
`df-messenger-files-flex-direction`	Facoltativo	riga	Proprietà della direzione di flessione dei file, consigliata per l'utilizzo di `row` (orizzontale con interruzioni di riga) o `column` (verticale)
`df-messenger-files-background`	Facoltativo	bianco	Sfondo di un file
`df-messenger-files-border`	Facoltativo	1px solid #e0e0e0	Bordo di un file
`df-messenger-files-border-radius`	Facoltativo	999px	Raggio bordo di un file
`df-messenger-files-box-shadow`	Facoltativo	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Ombreggiatura casella di un file
`df-messenger-files-padding`	Facoltativo	6px 16px	Padding di un file
`df-messenger-files-font-color`	Facoltativo	#1f1f1f	Colore del testo di un file
`df-messenger-files-font-family`	Facoltativo	"Google Sans", "Helvetica Neue", sans-serif	Famiglia di caratteri di un file
`df-messenger-files-font-size`	Facoltativo	14px	Dimensioni del testo di un file
`df-messenger-files-font-weight`	Facoltativo	normale	Spessore del carattere di un file
`df-messenger-files-background-hover`	Facoltativo	bianco	Sfondo di un file al passaggio del mouse
`df-messenger-files-border-hover`	Facoltativo	1px solid #e0e0e0	Bordo di un file al passaggio del mouse
`df-messenger-files-font-weight-hover`	Facoltativo	normale	Spessore del carattere di un file al passaggio del mouse
`df-messenger-files-image-offset`	Facoltativo	0 0 0 -8px	Offset dell'immagine a sinistra
`df-messenger-files-image-size`	Facoltativo	18 px	Dimensioni dell'immagine a sinistra
`df-messenger-files-text-spacing`	Facoltativo	8 px	Distanza tra l'immagine e il testo a sinistra e il testo e l'icona a destra
`df-messenger-files-icon-offset`	Facoltativo	0 -8px 0 0	Offset dell'icona di download a destra
`df-messenger-files-icon-size`	Facoltativo	18 px	Dimensioni dell'icona di download a destra
`df-messenger-files-icon-font-color`	Facoltativo	#444746	Colore dell'icona di download a destra

Tipo di risposta HTML

Screenshot del tipo HTML di Dialogflow CX Messenger

Il tipo di risposta HTML fornisce all'utente finale un messaggio HTML.

La tabella seguente descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "html"
`html`	`string`	Contenuto testuale del messaggio, supporta HTML

Tag HTML supportati:

a - Elemento di ancoraggio (utilizzato per creare link ipertestuali)
b - Elemento in grassetto (utilizzato per mettere il testo in grassetto)
i - Elemento corsivo (utilizzato per mettere il testo in corsivo)
u - Elemento di sottolineatura (utilizzato per sottolineare il testo)
h1: elemento Intestazione 1 (utilizzato per l'intestazione principale di una pagina)
h2: elemento Titolo 2 (utilizzato per i sottotitoli)
h3: elemento di intestazione 3 (utilizzato per le sotto-sottointestazioni)
p - Elemento paragrafo (utilizzato per creare paragrafi di testo)
br: elemento di interruzione di riga (utilizzato per creare interruzioni di riga all'interno di un paragrafo)
table - Elemento tabella (utilizzato per creare tabelle)
tr - Elemento riga della tabella (utilizzato per creare righe all'interno di una tabella)
thead: elemento di intestazione della tabella (utilizzato per creare un'intestazione all'interno di una tabella)
th - Dati dell'intestazione della tabella o elemento cella (utilizzato per creare celle all'interno di una riga di intestazione della tabella)
tbody: elemento del corpo della tabella (utilizzato per creare un corpo all'interno di una tabella)
td - Dati della tabella o elemento cella (utilizzato per creare celle all'interno di una riga della tabella)
ul - Elemento di elenco non ordinato (utilizzato per creare elenchi puntati)
ol: elemento di elenco ordinato (utilizzato per creare elenchi numerati)
li - Elemento della voce di elenco (utilizzato per creare elementi all'interno di un elenco)
img: elemento immagine (utilizzato per mostrare un'immagine, vedi anche url-allowlist personalizzazione HTML)
div - Elemento contenitore
span - Elemento contenitore incorporato

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
      }
    ]
  ]
}

Applicare uno stile a HTML e Markdown

Per gli elementi di ancoraggio (elemento HTML a e link Markdown), è possibile fornire le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-link-decoration`	Facoltativo	sottolineato	Decorazione di un elemento link
`df-messenger-link-font-color`	Facoltativo	#0b57d0	Colore del carattere di un elemento link non visitato
`df-messenger-link-visited-font-color`	Facoltativo	#0b57d0	Colore del carattere di un elemento di link visitato
`df-messenger-link-hover-font-color`	Facoltativo	#0b57d0	Colore del carattere quando passi il mouse sopra un elemento di link
`df-messenger-link-background`	Facoltativo	trasparente	Sfondo di un elemento link
`df-messenger-link-padding`	Facoltativo	0	Spaziatura interna di un elemento link
`df-messenger-link-border`	Facoltativo	nessuno	Bordo di un elemento link
`df-messenger-link-border-radius`	Facoltativo	0	Raggio bordo di un elemento link

Per gli elementi della tabella (elemento HTML table e tabelle Markdown), è possibile fornire le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-table-font-size`	Facoltativo	14px	Dimensioni del testo in un elemento tabella
`df-messenger-table-font-color`	Facoltativo	#1f1f1f	Colore del testo in un elemento tabella
`df-messenger-table-align`	Facoltativo	a sinistra	Allineamento del testo in una cella di una tabella
`df-messenger-table-padding`	Facoltativo	0	Spaziatura interna in una cella di una tabella
`df-messenger-table-border-collapse`	Facoltativo	separata	Modalità di compressione dei bordi di una tabella, utilizza `separate` per attivare `border-radius`
`df-messenger-table-border-radius`	Facoltativo	0	Raggio bordo di una tabella
`df-messenger-table-header-border-radius`	Facoltativo	0	Raggio del bordo dell'intestazione della tabella
`df-messenger-table-border-top`	Facoltativo	nessuno	Bordo superiore di una riga della tabella
`df-messenger-table-border-top-first`	Facoltativo	nessuno	Bordo superiore della prima riga della tabella
`df-messenger-table-border-bottom`	Facoltativo	nessuno	Bordo inferiore di una riga della tabella
`df-messenger-table-border-bottom-last`	Facoltativo	nessuno	Bordo inferiore dell'ultima riga della tabella
`df-messenger-table-border-left`	Facoltativo	nessuno	Bordo a sinistra di una cella della tabella
`df-messenger-table-border-left-first`	Facoltativo	nessuno	Bordo a sinistra della prima cella della tabella in una riga
`df-messenger-table-border-right`	Facoltativo	nessuno	Bordo destro di una cella della tabella
`df-messenger-table-border-right-last`	Facoltativo	nessuno	Bordo a destra dell'ultima cella della tabella in una riga
`df-messenger-table-background`	Facoltativo	trasparente	Sfondo di una riga della tabella
`df-messenger-table-even-background`	Facoltativo	trasparente	Sfondo delle righe della tabella con numero pari
`df-messenger-table-odd-background`	Facoltativo	trasparente	Sfondo delle righe della tabella con numero dispari
`df-messenger-table-header-font-size`	Facoltativo	14px	Dimensioni del testo in un elemento di intestazione della tabella
`df-messenger-table-header-font-weight`	Facoltativo	grassetto	Spessore carattere in un elemento di intestazione della tabella
`df-messenger-table-header-font-color`	Facoltativo	#1f1f1f	Colore del testo in un elemento di intestazione della tabella
`df-messenger-table-header-align`	Facoltativo	a sinistra	Allineamento del testo in una cella di intestazione di una tabella
`df-messenger-table-header-padding`	Facoltativo	0	Spaziatura interna in una cella di intestazione della tabella
`df-messenger-table-header-border-top`	Facoltativo	nessuno	Bordo superiore della riga di intestazione della tabella
`df-messenger-table-header-border-bottom`	Facoltativo	nessuno	Bordo inferiore della riga di intestazione della tabella
`df-messenger-table-header-border-left`	Facoltativo	nessuno	Bordo a sinistra di una cella nella riga di intestazione della tabella
`df-messenger-table-header-border-left-first`	Facoltativo	nessuno	Bordo a sinistra della prima cella nella riga di intestazione della tabella
`df-messenger-table-header-border-right`	Facoltativo	nessuno	Bordo a destra di una cella nella riga di intestazione della tabella
`df-messenger-table-header-border-right-last`	Facoltativo	nessuno	Bordo a destra dell'ultima cella di una riga di intestazione della tabella
`df-messenger-table-header-background`	Facoltativo	trasparente	Sfondo della riga di intestazione della tabella

Tipo di risposta Modello personalizzato

Screenshot del tipo di modello personalizzato di Dialogflow CX Messenger

Il tipo di risposta del modello personalizzato esegue il rendering di un elemento personalizzato definito sul sito web del cliente. L'elemento non viene inserito all'interno di una scheda e si trova sempre da solo.

La tabella seguente descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "custom_template"
`name`	`string`	Nome dell'elemento personalizzato
`payload`	`Object`	Payload da passare all'elemento personalizzato

Ad esempio:

{
  "richContent": [
    [
      {
        "type": "custom_template",
        "name": "custom-element-example",
        "payload": {
          "text": "Hello World"
        }
      }
    ]
  ]
}

Sul tuo sito web, l'elemento personalizzato deve essere registrato con il nome esatto del campo name della risposta. Il campo payload viene passato all'elemento personalizzato come dfPayload dopo la costruzione (ma prima di connectedCallback). Il campo può contenere JSON arbitrario. Inoltre, dfResponseId viene trasmesso all'elemento.

Utilizzando la risposta dell'esempio, ecco un'implementazione di esempio di un elemento personalizzato:

class CustomElementExample extends HTMLElement {
  constructor() {
    super();
    // The `dfPayload` field will be provided before `connectedCallback` is
    // being called.
    this.dfPayload = null;
    // The `dfResponseId` field will be provided before `connectedCallback` is
    // being called.
    this.dfResponseId = null;
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  /** Web component Lifecycle method. */
  connectedCallback() {
    const div = document.createElement('div');

    // The `.text` must match the payload's structure in `richContent.payload`.
    div.innerText = this.dfPayload.text;

    this.renderRoot.appendChild(div);
  }
}

(function() {
  // Registers the element. This name must match the name in
  // `richContent.payload`.
  customElements.define('custom-element-example', CustomElementExample);
})();

Combinare i tipi di risposta

Screenshot della scheda personalizzata di Dialogflow CX Messenger

I singoli elementi dei messaggi avanzati per Dialogflow CX Messenger possono essere utilizzati per creare una scheda personalizzata in base alle tue esigenze.

Ecco un esempio che utilizza alcuni degli elementi elencati nella sezione Evasione:

{
  "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",
        "anchor": {
          "href": "https://cloud.google.com/dialogflow/docs"
        }
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/case-studies"
            }
          },
          {
            "text": "Docs",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/docs"
            }
          }
        ]
      }
    ]
  ]
}

Possono essere fornite le seguenti variabili CSS:

Proprietà	Policy di input	Valore predefinito	Descrizione
`df-messenger-card-background`	Facoltativo	bianco	Sfondo di una scheda personalizzata
`df-messenger-card-padding`	Facoltativo	16 px	Spaziatura interna degli elementi in una scheda personalizzata
`df-messenger-card-border`	Facoltativo	1px solid #e0e0e0	Bordo di una scheda personalizzata
`df-messenger-card-border-radius`	Facoltativo	8 px	Raggio del bordo di una scheda personalizzata
`df-messenger-card-border-top-left-radius`	Facoltativo	8 px	Raggio del bordo in alto a sinistra di una scheda personalizzata
`df-messenger-card-border-top-right-radius`	Facoltativo	8 px	Raggio del bordo in alto a destra di una scheda personalizzata
`df-messenger-card-border-bottom-left-radius`	Facoltativo	8 px	Raggio del bordo in basso a sinistra di una scheda personalizzata
`df-messenger-card-border-bottom-right-radius`	Facoltativo	8 px	Raggio del bordo in basso a destra di una scheda
`df-messenger-card-stack-border-top-left-radius`	Facoltativo	8 px	Il raggio del bordo in alto a sinistra per le schede personalizzate consecutive sostituisce il raggio in alto a sinistra
`df-messenger-card-stack-border-top-right-radius`	Facoltativo	8 px	Il raggio del bordo in alto a destra per le schede personalizzate consecutive sostituisce il raggio in alto a destra
`df-messenger-card-stack-border-bottom-left-radius`	Facoltativo	8 px	Il raggio del bordo in basso a sinistra per le schede personalizzate consecutive sostituisce il raggio in basso a sinistra
`df-messenger-card-stack-border-bottom-right-radius`	Facoltativo	8 px	Il raggio del bordo in basso a destra per le schede personalizzate consecutive sostituisce il raggio in basso a destra
`df-messenger-card-box-shadow`	Facoltativo	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Ombreggiatura di una scheda personalizzata

Contenuti avanzati da uno strumento di guida pratica

Puoi utilizzare gli strumenti del playbook per inviare contenuti avanzati a Dialogflow CX Messenger.

Passaggio 1: crea uno strumento addRichContent nell'agente

Crea uno strumento funzione denominato addRichContent con i seguenti dati:

Input dello strumento:

properties: {}
type: object

Output dello strumento:

properties:
  status:
    type: string
  reason:
    type: string
type: object

Passaggio 2: spiega al tuo agente come utilizzare questo strumento

Spiega al tuo agente come utilizzare lo strumento nelle istruzioni e negli esempi.

Ad esempio, aggiungi alle istruzioni qualcosa di simile a quanto segue:

-  Greet  the  user
-  Ask  the  user  what  their  favorite  color  is.
   At  the  same  time  run  ${TOOL:  addRichContent}  to  display  buttons
   for  blue,  red,  yellow,  and  green.
-  Thank  the  user

Ad esempio, crea un esempio come il seguente:

Screenshot dell'esempio

Tieni presente che la sintassi per i contenuti avanzati è la stessa che utilizzeresti se dovessi restituire un payload personalizzato in un virtual agent basato sul flusso.

Passaggio 3: definisci JavaScript

Nel codice della pagina che ospita df-messenger, devi creare un codice JavaScript che definisca una funzione che indichi a df-messenger di eseguire il rendering dei contenuti avanzati. Devi anche registrare questa funzione con df-messenger, in modo che sappia di doverla eseguire quando l'agente virtuale ne ha bisogno.

Assicurati che la variabile dfMessenger sia dichiarata e punti alla tua istanza di df-messenger.

Ecco un codice di esempio che puoi utilizzare a questo scopo:

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

function  addRichContent(customPayload)  {
  dfMessenger.renderCustomCard(customPayload.richContent);

  // add error handling

  return  Promise.resolve({  status:  "OK",  reason:  null  });
}

// substitute your own tool id

const  toolId  =  'projects/PROJECT_ID/locations/LOCATION/agents/AGENT_ID/tools/TOOL_ID'
dfMessenger.registerClientSideFunction(toolId,  addRichContent.name,  addRichContent);

Esecuzione di Dialogflow CX Messenger Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Messaggio di risposta

Tipo di risposta informativa

Tipo di risposta Descrizione

Tipo di risposta con immagine

Tipo di video di risposta

Tipo di risposta del pulsante

Tipo di risposta Elenco

Tipo di risposta Accordion

Tipo di risposta del chip di suggerimento

Tipo di risposta Citazioni

Tipo di risposta File

Tipo di risposta HTML

Applicare uno stile a HTML e Markdown

Tipo di risposta Modello personalizzato

Combinare i tipi di risposta

Contenuti avanzati da uno strumento di guida pratica

Passaggio 1: crea uno strumento addRichContent nell'agente

Passaggio 2: spiega al tuo agente come utilizzare questo strumento

Passaggio 3: definisci JavaScript

Esecuzione di Dialogflow CX Messenger