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 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 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.

Risposta di testo

Screenshot del testo di Dialogflow Messenger

La risposta di testo supporta il 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 Messenger

Il tipo di risposta informativa è una semplice scheda del titolo 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 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 Messenger

Il tipo di risposta descrizione è una scheda informativa che può 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, 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

Screenshot del tipo di immagine di Dialogflow Messenger

Il tipo di risposta immagine è una scheda di immagini 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.

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
`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'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"
          }
        }
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Norme relative all'input	Valore predefinito	Descrizione
`df-messenger-image-border-radius`	Facoltativo	8 px	Raggio 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 del video facoltativo
`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`	Un video di tipo `link` può essere incorporato anziché collegato alla pagina web del player. È implementato solo per un insieme noto di lettori 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"
          }
        }
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Norme relative all'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	560px	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 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 si attiva 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": ""
        }
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Norme relative all'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", senza grazie	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 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

Tipo di risposta dell'elenco

Screenshot del tipo di elenco di Dialogflow 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 attivato quando si fa clic sull'opzione
`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`
`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à	Norme relative all'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 dell'elenco a scomparsa
`subtitle`	`string`	Sottotitolo dell'elenco a scomparsa
`image`	`object`	Immagine
`image.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": {
          "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.

La seguente tabella descrive i campi:

Nome	Tipo	Descrizione
`type`	`string`	Tipo di risposta: "chips"
`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`	Facoltativo, opzione Immagine
`options[].image.rawUrl`	`string`	Opzione URL pubblico 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"
            }
          }
        ]
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Norme relative all'input	Valore predefinito	Descrizione
`df-messenger-chips-spacing`	Facoltativo	10px	Spazio sopra i chip fino al 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	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 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", "Helvetica Neue", senza grazie	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.

La seguente tabella 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`	Ancora 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"
            }
          }
        ]
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS:

Proprietà	Norme relative all'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", "Helvetica Neue", senza grazie	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	Spessore del carattere di una citazione quando si passa il mouse sopra
`df-messenger-citations-icon-spacing`	Facoltativo	4 px	Spazio tra icona e 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: "files"
`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'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"
            }
          }
        ]
      }
    ]
  ]
}

È possibile fornire le seguenti variabili CSS

Proprietà	Norme relative all'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à direzione flessibile dei file. Ti consigliamo di 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	999px	Raggio 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	6px 16px	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	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 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 del testo del messaggio, supporta HTML

Tag HTML supportati:

a - Elemento di ancoraggio (utilizzato per creare link ipertestuali)
b - Elemento in grassetto (utilizzato per applicare il grassetto al testo)
i - Elemento in 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 intestazione 2 (utilizzato per le sottotitoli)
h3 - Elemento di intestazione 3 (utilizzato per le 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 intestazione tabella (utilizzato per creare un'intestazione all'interno di una tabella)
th - Dati dell'intestazione della tabella o elemento di cella (utilizzato per creare celle all'interno di una riga di intestazione della tabella)
tbody - Elemento corpo tabella (utilizzato per creare un corpo all'interno di una tabella)
td - Dati della tabella o elemento di cella (utilizzato per creare celle all'interno di una riga di tabella)
ul - Elemento di 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 di ancoraggio (elemento HTML a e link Markdown), è possibile fornire le seguenti variabili CSS:

Proprietà	Norme relative all'input	Valore predefinito	Descrizione
`df-messenger-link-decoration`	Facoltativo	sottolineato	Decorazione di un elemento link
`df-messenger-link-font-color`	Facoltativo	#0b57d0	Colore dei caratteri di un elemento link non visitato
`df-messenger-link-visited-font-color`	Facoltativo	#0b57d0	Colore dei caratteri di un elemento link visitato
`df-messenger-link-hover-font-color`	Facoltativo	#0b57d0	Colore del carattere quando si passa 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 bordo di un elemento link

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

Proprietà	Norme relative all'input	Valore predefinito	Descrizione
`df-messenger-table-font-size`	Facoltativo	14px	Dimensioni del testo in un elemento della tabella
`df-messenger-table-font-color`	Facoltativo	#1f1f1f	Colore del testo in un elemento di 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 della 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 destro 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 delle righe della tabella con numeri pari
`df-messenger-table-odd-background`	Facoltativo	trasparente	Sfondo delle righe della tabella con numeri 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 del 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 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 dell'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 sinistro di una cella nella riga dell'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 destro di una cella nella riga dell'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 dell'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 mostra un elemento personalizzato definito sul sito web del cliente. L'elemento non è inserito in 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 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 passato all'elemento.

Utilizzando la risposta dell'esempio, di seguito è riportato un esempio di implementazione 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 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.

Ecco un esempio che utilizza alcuni degli elementi elencati nella sezione relativa all'evasione:

{
  "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à	Norme relative all'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	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 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)	Ombra riquadro di una scheda personalizzata

Contenuti avanzati di uno strumento Playbook

Puoi utilizzare gli strumenti di 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 come il 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 questa funzione con df-messenger, in modo che sappia di eseguirla 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);