Alcuni prodotti e funzionalità sono in fase di ridenominazione. È in corso la migrazione anche delle funzionalità di flusso e playbook generativi in un'unica console consolidata. Consulta i dettagli.

Questa pagina è stata tradotta dall'API Cloud Translation.

Elaborazione di Dialogflow CX Messenger

Quando crei un completamento della 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 riunite in un'unica scheda visiva. Quando l'array esterno contiene più array interni, vengono mostrate più schede, una per ogni array interno.

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

Risposta di testo

Screenshot del testo di Dialogflow Messenger

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

*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 delle informazioni

Screenshot del tipo di informazioni di Dialogflow Messenger

Il tipo di risposta informativa è un semplice intertitolo su cui gli utenti possono fare clic o toccare.

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`	`object`	Immagine
`image.rawUrl`	`string`	URL pubblico dell'immagine
`anchor`	`object`	Ancora per seguire quando viene fatto clic sull'elemento
`anchor.href`	`string`	URL dell'ancoraggio
`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"
        }
      }
    ]
  ]
}

Descrizione del tipo di risposta

Screenshot del tipo di descrizione di Dialogflow Messenger

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

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, dove 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

Screenshot del tipo di immagine di Dialogflow Messenger

Il tipo di risposta 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 la fonte dell'immagine come link di ancoraggio insieme a un breve testo descrittivo e un'icona.

Nella tabella seguente vengono descritti i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "image"
`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`	Target dell'ancoraggio 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"
          }
        }
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

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

Tipo di risposta video

Screenshot del tipo di video di Dialogflow Messenger

Il tipo di risposta video mostra un elemento video che può essere un video diretto dall'URL, riprodotto direttamente in Messenger o un link a un video.

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

Ad esempio:

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

È possibile fornire le seguenti variabili CSS:

Proprietà	Criterio di input	Valore predefinito	Descrizione
`df-messenger-video-width`	Facoltativo	auto	Larghezza di un video (limite di `max-width\: 100%`)
`df-messenger-video-height`	Facoltativo	auto	Altezza di un video
`df-messenger-video-embed-width`	Facoltativo	560 px	Larghezza di un video incorporato (limitata a `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 del pulsante è un piccolo pulsante con un'icona su cui gli utenti possono fare clic o toccare.

La seguente tabella descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "button"
`icon`	`object`	Icona per il pulsante
`icon.type`	`string`	Icona della libreria di icone Material. L'icona predefinita è una freccia
`icon.color`	`string`	Codice esadecimale del colore
`image`	`object`	L'immagine del pulsante ha la precedenza su `icon`
`image.rawUrl`	`string`	URL pubblico dell'immagine
`mode`	`string`	(Facoltativo) Se impostato su "blocco", l'input dell'utente viene disattivato finché l'utente non fa clic sul pulsante
`text`	`string`	Testo del pulsante
`anchor`	`object`	Ancora 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 che viene attivato quando l'utente 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": ""
        }
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Criterio 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", "HSPAN Neue", Sans-Serif	Famiglia di caratteri di un pulsante
`df-messenger-button-font-size`	Facoltativo	14px	La dimensione del 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 e il testo del pulsante
`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 testo di un pulsante
`df-messenger-button-text-wrap`	Facoltativo	normale	Utilizza `nowrap` per non consentire i pulsanti su più righe

Elenco tipo di risposta

Screenshot del tipo di elenco Dialogflow Messenger

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

La risposta contiene un array di list e divider tipi di risposte. Nella tabella seguente viene descritto il tipo list:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "elenco"
`title`	`string`	Titolo dell'opzione
`subtitle`	`string`	Sottotitolo opzione
`event`	`object`	Evento Dialogflow che viene attivato quando l'utente fa clic sull'opzione.
`anchor`	`object`	Ancora per seguire quando viene fatto clic sull'elemento
`anchor.href`	`string`	URL dell'ancoraggio
`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: "divider"

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": ""
        }
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Criterio di input	Valore predefinito	Descrizione
`df-messenger-list-padding`	Facoltativo	16 px	Spaziatura interna di un elemento dell'elenco
`df-messenger-list-inset`	Facoltativo	0	"Inserimento" orizzontale aggiuntivo dell'elemento dell'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 dell'elenco a scomparsa

Screenshot del tipo di riquadro accordion di Dialogflow Messenger

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

La seguente tabella descrive i campi:

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

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 Messenger

Il tipo di risposta del chip di suggerimento fornisce all'utente finale un elenco di chip di suggerimento cliccabili.

Nella tabella seguente vengono descritti 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 dell'utente viene disattivato finché l'utente non fa clic sul chip
`options[].text`	`string`	Testo dell'opzione
`options[].image`	`object`	(Facoltativo) Opzione Immagine
`options[].image.rawUrl`	`string`	Opzione URL pubblico per l'immagine
`options[].anchor`	`object`	(Facoltativo) Ancoraggio per seguire quando viene fatto clic sull'elemento
`options[].anchor.href`	`string`	URL dell'ancoraggio
`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"
            }
          }
        ]
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Criterio di input	Valore predefinito	Descrizione
`df-messenger-chips-spacing`	Facoltativo	10px	Spazio sopra i chip per inserire 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 quando si passa il mouse sopra
`df-messenger-chips-border-radius`	Facoltativo	999 px	Raggio del 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 quando si passa il mouse sopra
`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", "HSPAN 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 quando si passa il mouse sopra
`df-messenger-chips-box-shadow`	Facoltativo	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Ombra riquadro di un chip
`df-messenger-chips-content-align`	Facoltativo	flex-start	Allineamento verticale dei contenuti (ad es. l'immagine) in un chip
`df-messenger-chips-text-wrap`	Facoltativo	nowrap	Utilizza `normal` per consentire i chip multiriga

Tipo di risposta alle citazioni

Screenshot del tipo di citazioni di Dialogflow Messenger

Il tipo di risposta citazioni fornisce all'utente finale un elenco di link alle citazioni cliccabili.

Nella tabella seguente vengono descritti i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "match_citations"
`citations`	`array<object>`	Array di oggetti Citation
`citations[].title`	`string`	Titolo citazione
`citations[].subtitle`	`string`	Sottotitolo citazione (attualmente ignorato)
`citations[].anchor`	`object`	Ancora per 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"
            }
          }
        ]
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Criterio di input	Valore predefinito	Descrizione
`df-messenger-citations-spacing`	Facoltativo	10px	Spazio sopra le citazioni al 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à direzione flessibile delle citazioni. È consigliabile utilizzare `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 quando si passa il mouse sopra
`df-messenger-citations-border-radius`	Facoltativo	4 px	Raggio bordo di una citazione
`df-messenger-citations-padding`	Facoltativo	8 px	Spaziatura 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 quando si passa il mouse sopra
`df-messenger-citations-font-color`	Facoltativo	#1a73e8	Colore del testo di una citazione
`df-messenger-citations-font-family`	Facoltativo	"Google Sans", "HSPAN 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	14 px	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	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	Ombra riquadro di una citazione

Tipo di risposta file

Screenshot del tipo di file di Dialogflow Messenger

Il tipo di risposta files restituisce un elenco di elementi file contenenti un link scaricabile.

La seguente tabella 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`	Fissa per scaricare il file
`files[].anchor.href`	`string`	URL dell'ancoraggio
`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'
            }
          }
        ]
      }
    ]
  ]
}

Puoi fornire le seguenti variabili CSS

Proprietà	Criterio di input	Valore predefinito	Descrizione
`df-messenger-files-spacing`	Facoltativo	10 px	Spazio sopra il file per andare al messaggio precedente
`df-messenger-files-distance`	Facoltativo	8 px	Distanza tra i file nell'elenco
`df-messenger-files-flex-direction`	Facoltativo	riga	Proprietà direzione flessibile dei file; è consigliabile utilizzare `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	999 px	Raggio del bordo di un file
`df-messenger-files-box-shadow`	Facoltativo	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Ombra riquadro di un file
`df-messenger-files-padding`	Facoltativo	6 px 16 px	Spaziatura interna 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", senza grazie	Famiglia di caratteri di un file
`df-messenger-files-font-size`	Facoltativo	14 px	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 quando si passa il mouse sopra
`df-messenger-files-border-hover`	Facoltativo	1px solid #e0e0e0	Bordo di un file quando si passa il mouse sopra
`df-messenger-files-font-weight-hover`	Facoltativo	normale	Spessore del carattere di un file quando si passa il mouse sopra
`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 il testo dell'immagine a sinistra e l'icona del testo 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 Messenger

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

La seguente tabella 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 ancorato (utilizzato per la creazione di link ipertestuali)
b - Elemento in grassetto (utilizzato per applicare il grassetto al testo)
i - Elemento corsivo (utilizzato per mettere il testo in corsivo)
u: elemento sottolineato (utilizzato per sottolineare il testo)
h1: elemento intestazione 1 (utilizzato per l'intestazione principale di una pagina)
h2 - Elemento di intestazione 2 (utilizzato per le sottotitoli)
h3: elemento Intestazione 3 (utilizzato per i sottotitoli secondari)
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 di 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 della 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 della cella (utilizzato per creare celle all'interno di una riga della tabella)
ul - Elemento dell'elenco non ordinato (utilizzato per creare elenchi puntati)
ol - Elemento di elenco ordinato (utilizzato per creare elenchi numerati)
li - Elemento voce 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 in linea

Ad esempio:

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

Aggiunta di stili a HTML e Markdown

Per gli elementi anchor (elemento a HTML e link Markdown), possono essere fornite le seguenti variabili CSS:

Proprietà	Criterio 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 link visitato
`df-messenger-link-hover-font-color`	Facoltativo	#0b57d0	Colore del carattere quando passi il mouse sopra un elemento 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 del bordo di un elemento link

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

Proprietà	Criterio di input	Valore predefinito	Descrizione
`df-messenger-table-font-size`	Facoltativo	14 px	Dimensioni del testo in un elemento della tabella
`df-messenger-table-font-color`	Facoltativo	#1f1f1f	Colore del testo in un elemento della tabella
`df-messenger-table-align`	Facoltativo	a sinistra	Allineamento del testo in una cella di tabella
`df-messenger-table-padding`	Facoltativo	0	Spaziatura interna in una cella di tabella
`df-messenger-table-border-collapse`	Facoltativo	separato	Modalità di accorpamento 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 sinistro di una cella di tabella
`df-messenger-table-border-left-first`	Facoltativo	nessuno	Bordo sinistro della prima cella della tabella in una riga
`df-messenger-table-border-right`	Facoltativo	nessuno	Bordo a destra di una cella di tabella
`df-messenger-table-border-right-last`	Facoltativo	nessuno	Bordo destro 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 di righe di tabella numerate pari
`df-messenger-table-odd-background`	Facoltativo	trasparente	Sfondo di righe di tabella con numeri dispari
`df-messenger-table-header-font-size`	Facoltativo	14px	Dimensioni del testo in un elemento di intestazione di una tabella
`df-messenger-table-header-font-weight`	Facoltativo	grassetto	Spessore carattere in un elemento di intestazione di una 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 dell'intestazione della tabella
`df-messenger-table-header-padding`	Facoltativo	0	Spaziatura interna in una cella dell'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 dell'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 sinistro 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 destro 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 del modello personalizzato

Screenshot del tipo di modello personalizzato di Dialogflow Messenger

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

La seguente tabella 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 dal campo name della risposta. Il campo payload viene passato a l'elemento personalizzato come dfPayload dopo la costruzione (ma prima di connectedCallback). Il campo potrebbe contenere un JSON arbitrario. Inoltre, dfResponseId è passato all'elemento.

Utilizzando la risposta dell'esempio, ecco un esempio di implementazione di una 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);
})();

Combinazione dei tipi di risposta

Screenshot della scheda personalizzata di Dialogflow Messenger

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

Di seguito è riportato un esempio in cui vengono utilizzati alcuni degli elementi elencati nella sezione dell'evasione degli ordini:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow",
        "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"
            }
          }
        ]
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Criterio di input	Valore predefinito	Descrizione
`df-messenger-card-background`	Facoltativo	bianco	Sfondo di una scheda personalizzata
`df-messenger-card-padding`	Facoltativo	16 px	Spaziatura degli elementi in una scheda personalizzata
`df-messenger-card-border`	Facoltativo	1 px solido #e0e0e0	Bordo di una carta personalizzata
`df-messenger-card-border-radius`	Facoltativo	8 px	Raggio del bordo di una carta 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 carte personalizzate consecutive sostituisce quello superiore sinistro
`df-messenger-card-stack-border-top-right-radius`	Facoltativo	8 px	Il raggio del bordo in alto a destra per le carte personalizzate consecutive sostituisce quello superiore destro
`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 quello in basso a destra
`df-messenger-card-box-shadow`	Facoltativo	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Ombra riquadro di una scheda personalizzata

Contenuti avanzati di uno strumento Playbook

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

Passaggio 1: crea uno strumento addRichContent nell'agente

Crea un strumento funzione chiamato 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 all'agente come utilizzare questo strumento

Fornisci all'agente istruzioni ed esempi su come utilizzare lo strumento.

Ad esempio, aggiungi qualcosa di simile alle istruzioni:

-  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 simile al seguente:

Screenshot di esempio

Tieni presente che la sintassi per i contenuti avanzati è la stessa che useresti se dovessi restituire un payload personalizzato in un agente virtuale basato su flusso.

Passaggio 3: definisci il codice JavaScript

Nel codice della pagina che ospita df-messenger, devi creare codice JavaScript che definisce una funzione che indica a df-messenger di eseguire il rendering dei contenuti avanzati. Devi anche registrare la funzione con df-messenger, in modo che sappia di eseguire la funzione quando serve all'agente virtuale.

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

Ecco alcuni esempi di codice 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);