Fulfillment Dialogflow Messenger

Durante la creazione di un evasione di carte personalizzate, puoi creare risposte di testo e payload personalizzati. Le risposte di testo vengono utilizzate per le risposte in testo normale e per le risposte dell'agente 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ù interni. Le risposte all'interno di un array interno vengono associate 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 risposte che puoi configurare per un payload personalizzato.

Messaggio di risposta

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)

  • 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 è un semplice intertitolo su cui gli utenti possono fare clic o toccare.

La tabella seguente descrive i campi:

Nome Tipo Descrizione
type string Tipo di risposta: "informazioni"
title string Titolo della scheda
subtitle string Sottotitolo della scheda
image object Image
image.rawUrl string URL pubblico dell'immagine
anchor object Ancoraggio da seguire quando viene fatto clic sull'elemento
anchor.href string URL dell'ancoraggio
anchor.target string Target dell'ancoraggio, 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 della descrizione

Screenshot del tipo di descrizione di Dialogflow Messenger

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

La tabella seguente descrive i campi:

Nome Tipo Descrizione
type string Tipo di risposta: "descrizione"
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 Dialogflow Messenger

Il tipo di risposta dell'immagine è una scheda immagine su cui gli utenti possono fare clic o toccare.

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

Ad esempio:

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

Puoi fornire le seguenti variabili CSS:

Proprietà Criterio 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 Messenger

Il tipo di video di risposta consente di visualizzare un elemento video che può essere un video diretto dall'URL, riprodotto direttamente nel programma di messaggistica o un link a un video.

Nome Tipo Descrizione
type string Tipo di risposta: "video"
title string Titolo video facoltativo
source object L'origine 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 Potrebbe essere incorporato un video di tipo link anziché il link alla pagina web del player. Questa funzionalità è implementata solo per un insieme di player noto, 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"
          }
        }
      }
    ]
  ]
}

Puoi fornire le seguenti variabili CSS:

Proprietà Criterio di input Valore predefinito Descrizione
df-messenger-video-width Facoltativo automatico Larghezza di un video (limitata da max-width\: 100%)
df-messenger-video-height Facoltativo automatico 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 1 px solido #e0e0e0 Bordo del video
df-messenger-video-border-radius Facoltativo 8 px Raggio bordo del video

Tipo di risposta pulsante

Screenshot del tipo di pulsante Dialogflow Messenger

Il tipo di risposta del 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: "button"
icon object Icona del pulsante
icon.type string Icona dalla raccolta di icone Material. L'icona predefinita è una freccia
icon.color string Codice esadecimale del colore
image object Immagine del pulsante, ha la priorità 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'ancoraggio
anchor.target string Target dell'ancoraggio, 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": ""
        }
      }
    ]
  ]
}

Puoi 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 del 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 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 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 a valori negativi di spostare la spaziatura interna

Tipo di risposta dell'elenco

Screenshot del tipo di elenco di Dialogflow Messenger

Il tipo di risposta dell'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 opzione
subtitle string Sottotitolo opzione
event object Evento Dialogflow che viene attivato quando viene fatto clic sull'opzione
anchor object Ancoraggio da seguire quando viene fatto clic sull'elemento
anchor.href string URL dell'ancoraggio
anchor.target string Target dell'ancoraggio, il valore predefinito è _blank
image object Image
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": ""
        }
      }
    ]
  ]
}

Tipo di risposta ad accordion

Screenshot del tipo di accordion Dialogflow Messenger

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

La tabella seguente descrive i campi:

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

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 Dialogflow Messenger

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

La tabella seguente descrive i campi:

Nome Tipo Descrizione
type string Tipo di risposta: "chip"
options array<object> Array di oggetti Opzione
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 opzione
options[].image object Facoltativo, opzione Immagine
options[].image.rawUrl string URL pubblico dell'opzione per l'immagine
options[].anchor object Facoltativo, Ancoraggio da seguire quando viene fatto clic sull'elemento
options[].anchor.href string URL dell'ancoraggio
options[].anchor.target string Target dell'ancoraggio, 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"
            }
          }
        ]
      }
    ]
  ]
}

Puoi fornire le seguenti variabili CSS:

Proprietà Criterio di input Valore predefinito Descrizione
df-messenger-chips-spacing Facoltativo 10px Spazio sopra i chip 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 al passaggio del mouse
df-messenger-chips-border-radius Facoltativo 999px Raggio del bordo di un chip
df-messenger-chips-background Facoltativo di colore 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 di colore 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 Dimensione 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) Ombra riquadro di un chip

Tipo di risposta alle citazioni

Screenshot del tipo di citazioni di Dialogflow Messenger

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

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'ancoraggio
citations[].anchor.target string Target dell'ancoraggio, 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"
            }
          }
        ]
      }
    ]
  ]
}

Puoi 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 il formato 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 Il colore del bordo di una citazione al passaggio del mouse
df-messenger-citations-border-radius Facoltativo 4 px Raggio del bordo di una citazione
df-messenger-citations-padding Facoltativo 8 px Spaziatura interna di una citazione
df-messenger-citations-background Facoltativo di colore bianco Sfondo 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", 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 al passaggio del mouse
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 HTML

Screenshot del tipo HTML di Dialogflow 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 Contenuti di testo del messaggio (supporto 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 corsivo (utilizzato per il testo in corsivo)
  • u: elemento sottolineato (utilizzato per il testo di sottolineatura)
  • h1: elemento intestazione 1 (utilizzato per l'intestazione principale di una pagina)
  • h2: elemento intestazione 2 (utilizzato per i sottotitoli)
  • h3: elemento Intestazione 3 (utilizzato per i sottotitoli)
  • 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 la creazione di 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 di intestazione della tabella o elemento di cella (utilizzati 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 di cella (utilizzato per creare celle all'interno di una riga di tabella)
  • ul: elemento dell'elenco non ordinato (utilizzato per la creazione di elenchi puntati)
  • ol: elemento dell'elenco ordinato (utilizzato per la creazione di elenchi numerati)
  • li: elemento elemento dell'elenco (utilizzato per creare elementi di un elenco)
  • img. Elemento immagine (utilizzato per mostrare un'immagine, consulta 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 anchor (elemento HTML a 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 si passa il mouse sopra un elemento link
df-messenger-link-background Facoltativo transparent 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), possono essere fornite le seguenti variabili CSS:

Proprietà Criterio di 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 tabella
df-messenger-table-align Facoltativo Freccia 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 separare Modalità di compressione del bordo di una tabella; utilizza separate per attivare border-radius
df-messenger-table-border-radius Facoltativo 0 Raggio del bordo di una tabella
df-messenger-table-header-border-radius Facoltativo 0 Raggio bordo dell'intestazione della tabella
df-messenger-table-border-top Facoltativo nessuno Bordo superiore di una riga di una 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 di 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 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 transparent Sfondo di una riga di una tabella
df-messenger-table-even-background Facoltativo transparent Sfondo delle righe di una tabella numerata
df-messenger-table-odd-background Facoltativo transparent Sfondo delle righe di una tabella con numero dispari
df-messenger-table-header-font-size Facoltativo 14px Dimensioni del testo nell'elemento di intestazione di una tabella
df-messenger-table-header-font-weight Facoltativo grassetto Spessore del carattere nell'elemento di intestazione di una tabella
df-messenger-table-header-font-color Facoltativo #1f1f1f Colore del testo in un elemento di intestazione di una tabella
df-messenger-table-header-align Facoltativo Freccia sinistra Allineamento del testo nella 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 sinistro 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 destro di una cella nella riga di intestazione della tabella
df-messenger-table-header-border-right-last Facoltativo nessuno Bordo destro dell'ultima cella in una riga di intestazione della tabella
df-messenger-table-header-background Facoltativo transparent 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 mostra un elemento personalizzato definito sul sito web del cliente. L'elemento non è posizionato all'interno di una scheda ed è sempre indipendente.

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 passato all'elemento.

Utilizzando la risposta dell'esempio, ecco 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 Dialogflow Messenger 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 di 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"
            }
          }
        ]
      }
    ]
  ]
}

Puoi fornire le seguenti variabili CSS:

Proprietà Criterio di input Valore predefinito Descrizione
df-messenger-card-background Facoltativo di colore bianco Sfondo di una carta personalizzata
df-messenger-card-padding Facoltativo 16 px Spaziatura interna degli elementi in una scheda personalizzata
df-messenger-card-border Facoltativo 1 px solido #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 in una scheda
df-messenger-card-stack-border-top-left-radius Facoltativo 8 px Il raggio del bordo in alto a sinistra per 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 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 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 inferiore destro per schede personalizzate consecutive sostituisce il raggio inferiore destro
df-messenger-card-box-shadow Facoltativo 0 2px 2px 0 rgba(0, 0, 0, 0,24) Ombra riquadro di una scheda personalizzata