Quando crei un fulfillment di schede personalizzate, 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",
...
}
]
]
}
Le sottosezioni rimanenti descrivono i vari tipi di risposte che puoi configurare per un payload personalizzato.
Messaggio di risposta
La risposta di testo supporta il testo normale e Markdown. Ecco alcuni esempi di Markdown:
*Italic***Bold**# Title[Link text](Link URL)Tabelle:
Header 1 | Header 2 -------- | -------- Cell 1 | Cell 2
Tipo di risposta informativa
Il tipo di risposta informativa è un intertitolo informativo su cui gli utenti possono fare clic o toccare.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string |
Tipo di risposta: "info". |
title |
string |
Titolo della scheda. |
subtitle |
string |
Sottotitolo della scheda. |
image |
object |
Immagine. |
image.rawUrl |
string |
URL pubblico dell'immagine. |
anchor |
object |
Ancoraggio da seguire quando si fa 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 della descrizione
Il tipo di risposta Descrizione è una scheda informativa che ti consente di visualizzare più righe di testo.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string |
Tipo di risposta: "description". |
title |
string |
Titolo della scheda. |
text |
array<string> |
Array di stringhe, in cui ogni stringa viene visualizzata su una nuova riga. |
Ad esempio:
{
"richContent": [
[
{
"type": "description",
"title": "Description title",
"text": [
"This is text line 1.",
"This is text line 2."
]
}
]
]
}
Tipo di risposta immagine
Il tipo di risposta con immagine è una scheda con immagine su cui gli utenti possono fare clic o toccare. Il tipo di risposta supporta un chip di riferimento che ti consente di aggiungere la fonte dell'immagine come link di ancoraggio insieme a un breve testo descrittivo e a un'icona.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string |
Tipo di risposta: "image". |
rawUrl |
string |
URL pubblico dell'immagine. |
accessibilityText |
string |
Testo alternativo dell'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'anchor 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"
}
}
}
]
]
}
Puoi utilizzare le seguenti variabili CSS:
| Proprietà | Policy di input | Valore predefinito | Descrizione |
|---|---|---|---|
df-messenger-image-border-radius |
Facoltativo | 8 px | Raggio del bordo dell'immagine. |
Tipo di risposta video
Il tipo di risposta video esegue il rendering di un elemento video che può essere un video diretto da un URL, riprodotto direttamente in Messenger, o un link a un video.
La tabella seguente descrive i campi:
| 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 |
Ancoraggio da seguire quando si fa clic sull'elemento. |
source.embeddedPlayer |
string |
Un video di tipo link può essere incorporato anziché collegato alla pagina web del player. Questa funzionalità è implementata solo per un insieme noto di player e supporta youtube. |
source.thumbnail |
object |
Miniatura da mostrare per anchor. |
source.thumbnail.rawUrl |
string |
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=example"
}
}
}
]
]
}
Puoi utilizzare le seguenti variabili CSS:
| Proprietà | Policy di input | Valore predefinito | Descrizione |
|---|---|---|---|
df-messenger-video-width |
Facoltativo | auto | Larghezza di un video (limitata da max-width\: 100%). |
df-messenger-video-height |
Facoltativo | auto | Altezza di un video. |
df-messenger-video-embed-width |
Facoltativo | 560px | Larghezza di un video incorporato (limitata da max-width\: 100%). |
df-messenger-video-embed-height |
Facoltativo | 315px | Altezza di un video incorporato. |
df-messenger-video-border |
Facoltativo | 1px solid #e0e0e0 | Bordo del video. |
df-messenger-video-border-radius |
Facoltativo | 8 px | Raggio bordo del video. |
Tipo di risposta del pulsante
Il tipo di risposta con pulsante è un piccolo pulsante con un'icona su cui puoi 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 della raccolta di icone Material. L'icona predefinita è una freccia. |
icon.color |
string |
Codice esadecimale del colore. |
image |
object |
Immagine per il pulsante, ha la priorità su icon. |
image.rawUrl |
string |
URL pubblico dell'immagine del pulsante. |
mode |
string |
Facoltativo. Se impostato su "blocking", l'input utente viene disattivato finché l'utente non fa clic sul pulsante. |
text |
string |
Testo del pulsante. |
anchor |
object |
Ancoraggio da seguire quando si fa clic sull'elemento. |
anchor.href |
string |
URL dell'ancora. |
anchor.target |
string |
Target dell'ancora, il valore predefinito è _blank. |
event |
object |
Evento Dialogflow CX che viene attivato quando si fa clic sul pulsante. |
Ad esempio:
{
"richContent": [
[
{
"type": "button",
"icon": {
"type": "chevron_right",
"color": "#FF9800"
},
"mode": "blocking",
"text": "Button text",
"anchor": {
"href": "https://example.com"
},
"event": {
"event": ""
}
}
]
]
}
Puoi utilizzare le seguenti variabili CSS:
| Proprietà | Policy di input | Valore predefinito | Descrizione |
|---|---|---|---|
df-messenger-button-border |
Facoltativo | nessuno | Bordo di un pulsante. |
df-messenger-button-border-radius |
Facoltativo | 8 px | Raggio 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", sans-serif | 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 valori negativi per compensare il padding. |
df-messenger-button-text-align |
Facoltativo | al centro | Allineamento del testo di un pulsante. |
df-messenger-button-text-wrap |
Facoltativo | normale | Utilizza nowrap per non consentire i pulsanti su più righe. |
Tipo di risposta elenco
Il tipo di risposta elenco è una scheda che ti consente di selezionare tra più opzioni. 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: "list". |
title |
string |
Titolo dell'opzione. |
subtitle |
string |
Sottotitolo dell'opzione. |
event |
object |
Evento Dialogflow CX che viene attivato quando si fa clic sull'opzione. |
anchor |
object |
Ancoraggio da seguire quando si fa 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 di riferimento. |
event.event |
string |
Nome dell'evento che viene attivato quando si fa clic sull'opzione. |
La tabella seguente descrive il tipo divider:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string |
Tipo di risposta: "divider". |
Ad esempio:
{
"richContent": [
[
{
"type": "list",
"title": "List item 1 title",
"subtitle": "List item 1 subtitle",
"event": {
"event": ""
}
},
{
"type": "list",
"title": "List item 2 title",
"subtitle": "List item 2 subtitle",
"event": {
"event": ""
}
}
]
]
}
Puoi utilizzare le seguenti variabili CSS:
| Proprietà | Policy 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 | "Inset" 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 a fisarmonica
Il tipo di risposta a fisarmonica è una piccola scheda che puoi toccare o su cui puoi fare clic per espanderla e visualizzare altro testo.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string |
Tipo di risposta: "accordion". |
title |
string |
Titolo della sezione a scomparsa. |
subtitle |
string |
Sottotitolo della sezione a fisarmonica. |
image |
object |
Immagine. |
image.rawUrl |
string |
URL pubblico dell'immagine. |
text |
string |
Testo della sezione comprimibile. |
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
Il tipo di risposta con chip di suggerimento ti consente di fornire un elenco di chip di suggerimento cliccabili.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string |
Tipo di risposta: "chips". |
options |
array<object> |
Array di oggetti opzione. |
options[].mode |
string |
Facoltativo. Se impostato su "blocking", l'input utente viene disattivato finché l'utente non fa clic sul chip. |
options[].text |
string |
Testo dell'opzione. |
options[].image |
object |
Facoltativo. Immagine. |
options[].image.rawUrl |
string |
URL pubblico facoltativo per l'immagine. |
options[].anchor |
object |
Facoltativo. Ancoraggio da seguire quando si fa 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"
}
}
]
}
]
]
}
Puoi fornire le seguenti variabili CSS:
| Proprietà | Policy di input | Valore predefinito | Descrizione |
|---|---|---|---|
df-messenger-chips-spacing |
Facoltativo | 10px | Spazio sopra i chip rispetto 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 | bianco | Sfondo di un chip. |
df-messenger-chips-background-hover |
Facoltativo | rgba(68, 71, 70, 0.08) |
Sfondo di un chip quando viene passato 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", 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 carattere di un chip. |
df-messenger-chips-font-weight-hover |
Facoltativo | normale | Spessore del carattere di un chip quando viene passato 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 | avvio flessibile | Allineamento verticale dei contenuti (ad esempio l'immagine) in un chip. |
df-messenger-chips-text-wrap |
Facoltativo | nowrap | Utilizza normal per consentire i chip su più righe. |
Tipo di risposta Citazioni
Il tipo di risposta Citazioni fornisce all'utente finale un elenco di link di citazione cliccabili.
2
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 (ignorato). |
citations[].anchor |
object |
Ancoraggio da seguire quando si fa 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"
}
}
]
}
]
]
}
Puoi utilizzare le seguenti variabili CSS:
| Proprietà | Policy di input | Valore predefinito | Descrizione |
|---|---|---|---|
df-messenger-citations-spacing |
Facoltativo | 10px | Spazio sopra le citazioni del messaggio precedente. |
df-messenger-citations-message-display |
Facoltativo | blocco | Definisce la visualizzazione della nota sopra le citazioni. I valori consentiti sono block o none. |
df-messenger-citations-message-font-color |
Facoltativo | #041e49 | Colore del testo della nota sopra le citazioni. |
df-messenger-citations-message-font-size |
Facoltativo | 12 px | Dimensioni del testo della nota sopra le citazioni. |
df-messenger-citations-flex-direction |
Facoltativo | riga | Proprietà flex-direction delle citazioni, per cui è consigliabile utilizzare row (orizzontale con interruzioni di riga) o column (verticale). |
df-messenger-citations-border-color |
Facoltativo | #3279f9 | Colore del bordo di una citazione. |
df-messeenger-citations-border-color-hover |
Facoltativo | #3279f9 | Colore del bordo di una citazione al passaggio del mouse. |
df-messenger-citations-border-radius |
Facoltativo | 4 px | Raggio bordo di una citazione. |
df-messenger-citations-padding |
Facoltativo | 8 px | Spaziatura interna 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 ci si passa sopra con il mouse. |
df-messenger-citations-font-color |
Facoltativo | #3279f9 | Colore del testo di una citazione. |
df-messenger-citations-font-family |
Facoltativo | "Google Sans", "Helvetica Neue", sans-serif | Famiglia di caratteri di una citazione. |
df-messenger-citations-font-size |
Facoltativo | 11px | Dimensioni del testo di una citazione. |
df-messenger-citations-icon-font-size |
Facoltativo | 14px | Dimensioni del testo dell'icona di una citazione. |
df-messenger-citations-font-weight |
Facoltativo | normale | Spessore carattere di una citazione. |
df-messenger-citations-font-weight-hover |
Facoltativo | normale | Spessore del carattere di una citazione quando viene passato il mouse sopra. |
df-messenger-citations-icon-spacing |
Facoltativo | 4 px | Spazio tra l'icona e il testo in una citazione. |
df-messenger-citations-box-shadow |
Facoltativo | nessuno | Ombreggiatura della casella di una citazione. |
Tipo di risposta Files
Il tipo di risposta dei file mostra un elenco di elementi di file che puoi scaricare. L'utente può scaricare il file facendo clic sull'elemento di ancoraggio.
La tabella seguente 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 |
Anchor 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à | Policy di input | Valore predefinito | Descrizione |
|---|---|---|---|
df-messenger-files-spacing |
Facoltativo | 10px | Spazio sopra il file fino al messaggio precedente. |
df-messenger-files-distance |
Facoltativo | 8 px | Distanza tra i file nell'elenco. |
df-messenger-files-flex-direction |
Facoltativo | riga | Proprietà flex-direction 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 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 | 6px 16px | Padding di un file. |
df-messenger-files-font-color |
Facoltativo | #1f1f1f | Colore del testo di un file. |
df-messenger-files-font-family |
Facoltativo | "Google Sans", "Helvetica Neue", sans-serif | Famiglia di caratteri di un file. |
df-messenger-files-font-size |
Facoltativo | 14px | Dimensioni del testo di un file. |
df-messenger-files-font-weight |
Facoltativo | normale | Spessore carattere di un file. |
df-messenger-files-background-hover |
Facoltativo | bianco | Sfondo di un file quando ci passi sopra con il mouse. |
df-messenger-files-border-hover |
Facoltativo | 1px solid #e0e0e0 | Bordo di un file quando viene passato il mouse sopra. |
df-messenger-files-font-weight-hover |
Facoltativo | normale | Spessore carattere di un file quando ci passi sopra con il mouse. |
df-messenger-files-image-offset |
Facoltativo | 0 0 0 -8px | Offset dell'immagine a sinistra. |
df-messenger-files-image-size |
Facoltativo | 18 px | Dimensioni dell'immagine a sinistra. |
df-messenger-files-text-spacing |
Facoltativo | 8 px | Distanza tra l'immagine-testo a sinistra e l'icona-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
Il tipo di risposta HTML fornisce all'utente un messaggio HTML.
La tabella seguente descrive i campi:
| Nome | Tipo | Descrizione |
|---|---|---|
type |
string |
Tipo di risposta: "html". |
html |
string |
Contenuto di testo del messaggio, supporta HTML. |
Tag HTML supportati:
a: elemento di ancoraggio (utilizzato per creare link ipertestuali).b: elemento grassetto (utilizzato per applicare il grassetto al testo).i: elemento corsivo (utilizzato per applicare il corsivo al testo).u: elemento di sottolineatura (utilizzato per sottolineare il testo).h1: elemento di intestazione 1 (utilizzato per l'intestazione principale di una pagina).h2: elemento di intestazione 2 (utilizzato per i sottotitoli).h3: elemento di intestazione 3 (utilizzato per i sottotitoli di secondo livello).p: elemento di paragrafo (utilizzato per creare paragrafi di testo).br: elemento di interruzione di riga (utilizzato per creare interruzioni di riga all'interno di un paragrafo).table: elemento tabella (utilizzato per creare tabelle).tr: elemento riga della tabella (utilizzato per creare righe all'interno di una tabella).thead: elemento di intestazione della tabella (utilizzato per creare un'intestazione all'interno di una tabella).th: elemento cella o dati dell'intestazione della tabella (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: elemento di dati della tabella o di cella (utilizzato per creare celle all'interno di una riga della tabella).ul: elemento di elenco non ordinato (utilizzato per creare elenchi puntati).ol: elemento di elenco ordinato (utilizzato per creare elenchi numerati).li: elemento dell'elenco (utilizzato per creare elementi all'interno di un elenco).img: elemento immagine (utilizzato per mostrare un'immagine, vedi ancheurl-allowlistPersonalizzazione 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>"
}
]
]
}
Stile HTML e Markdown
Per gli elementi di ancoraggio, inclusi gli elementi HTML a e i link Markdown, puoi fornire le seguenti variabili CSS:
| Proprietà | Policy di input | Valore predefinito | Descrizione |
|---|---|---|---|
df-messenger-link-decoration |
Facoltativo | sottolineato | Decorazione di un elemento link. |
df-messenger-link-font-color |
Facoltativo | #0b57d0 | Colore del carattere di un elemento link non visitato. |
df-messenger-link-visited-font-color |
Facoltativo | #0b57d0 | Colore del carattere di un elemento 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. |
Puoi utilizzare le seguenti variabili CSS per gli elementi della tabella (elemento HTML table e tabelle Markdown):
| Proprietà | Policy 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 della tabella. |
df-messenger-table-align |
Facoltativo | a sinistra | Allineamento del testo in una cella della tabella. |
df-messenger-table-padding |
Facoltativo | 0 | Spaziatura interna in una cella della tabella. |
df-messenger-table-border-collapse |
Facoltativo | separata | Modalità di compressione dei bordi di una tabella, utilizza separate per attivare border-radius. |
df-messenger-table-border-radius |
Facoltativo | 0 | Raggio bordo di una tabella. |
df-messenger-table-header-border-radius |
Facoltativo | 0 | Raggio del bordo dell'intestazione della tabella. |
df-messenger-table-border-top |
Facoltativo | nessuno | Bordo superiore di una riga della tabella. |
df-messenger-table-border-top-first |
Facoltativo | nessuno | Bordo superiore della prima riga della tabella. |
df-messenger-table-border-bottom |
Facoltativo | nessuno | Bordo inferiore di una riga della tabella. |
df-messenger-table-border-bottom-last |
Facoltativo | nessuno | Bordo inferiore dell'ultima riga della tabella. |
df-messenger-table-border-left |
Facoltativo | nessuno | Bordo sinistro di una cella della tabella. |
df-messenger-table-border-left-first |
Facoltativo | nessuno | Bordo a sinistra della prima cella della tabella in una riga. |
df-messenger-table-border-right |
Facoltativo | nessuno | Bordo destro di una cella della tabella. |
df-messenger-table-border-right-last |
Facoltativo | nessuno | Bordo 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 numero pari. |
df-messenger-table-odd-background |
Facoltativo | trasparente | Sfondo delle righe della tabella con numero dispari. |
df-messenger-table-header-font-size |
Facoltativo | 14px | Dimensioni del testo in un elemento di intestazione della tabella. |
df-messenger-table-header-font-weight |
Facoltativo | grassetto | Spessore 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 di intestazione della 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 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
Il tipo di risposta del modello personalizzato esegue il rendering di un elemento personalizzato definito sul tuo sito web. L'elemento non è inserito 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 |
Il 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 creazione (ma prima di connectedCallback). Il campo può contenere JSON arbitrario. Inoltre, dfResponseId viene passato all'elemento.
Utilizzando la risposta dell'esempio, ecco un'implementazione di esempio di un elemento personalizzato:
class CustomElementExample extends HTMLElement {
constructor() {
super();
// The `dfPayload` field will be provided before `connectedCallback` is
// being called.
this.dfPayload = null;
// The `dfResponseId` field will be provided before `connectedCallback` is
// being called.
this.dfResponseId = null;
// It is not strictly required but recommended to contain the custom
// element in a shadow root.
// https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
this.renderRoot = this.attachShadow({mode: 'open'});
}
/** Web component Lifecycle method. */
connectedCallback() {
const div = document.createElement('div');
// The `.text` must match the payload's structure in `richContent.payload`.
div.innerText = this.dfPayload.text;
this.renderRoot.appendChild(div);
}
}
(function() {
// Registers the element. This name must match the name in
// `richContent.payload`.
customElements.define('custom-element-example', CustomElementExample);
})();
Combinazione dei tipi di risposta
Puoi utilizzare i singoli elementi dei messaggi avanzati per Dialogflow CX Messenger per creare una scheda personalizzata in base alle tue esigenze.
Ecco un esempio che utilizza alcuni degli elementi elencati nella sezione fulfillment:
{
"richContent": [
[
{
"type": "image",
"rawUrl": "https://example.com/images/logo.png",
"accessibilityText": "Dialogflow CX across platforms"
},
{
"type": "info",
"title": "Dialogflow CX",
"subtitle": "Build natural and rich conversational experiences",
"anchor": {
"href": "https://cloud.google.com/dialogflow/docs"
}
},
{
"type": "chips",
"options": [
{
"text": "Case Studies",
"anchor": {
"href": "https://cloud.google.com/dialogflow/case-studies"
}
},
{
"text": "Docs",
"anchor": {
"href": "https://cloud.google.com/dialogflow/docs"
}
}
]
}
]
]
}
Puoi utilizzare le seguenti variabili CSS:
| Proprietà | Policy di input | Valore predefinito | Descrizione |
|---|---|---|---|
df-messenger-card-background |
Facoltativo | bianco | Sfondo di una scheda personalizzata. |
df-messenger-card-padding |
Facoltativo | 16 px | Spaziatura interna degli elementi in una scheda personalizzata. |
df-messenger-card-border |
Facoltativo | 1px solid #e0e0e0 | Bordo di una scheda personalizzata. |
df-messenger-card-border-radius |
Facoltativo | 8 px | Raggio del bordo di una scheda personalizzata. |
df-messenger-card-border-top-left-radius |
Facoltativo | 8 px | Raggio del bordo in alto a sinistra di una scheda personalizzata. |
df-messenger-card-border-top-right-radius |
Facoltativo | 8 px | Raggio del bordo in alto a destra di una scheda personalizzata. |
df-messenger-card-border-bottom-left-radius |
Facoltativo | 8 px | Raggio del bordo in basso a sinistra di una scheda personalizzata. |
df-messenger-card-border-bottom-right-radius |
Facoltativo | 8 px | Raggio del bordo in basso a destra di una scheda personalizzata. |
df-messenger-card-stack-border-top-left-radius |
Facoltativo | 8 px | Il raggio dell'angolo in alto a sinistra per le schede personalizzate consecutive sostituisce il raggio dell'angolo in alto a sinistra. |
df-messenger-card-stack-border-top-right-radius |
Facoltativo | 8 px | Il raggio del bordo in alto a destra per le schede personalizzate consecutive sostituisce il raggio in alto a destra. |
df-messenger-card-stack-border-bottom-left-radius |
Facoltativo | 8 px | Il raggio del bordo in basso a sinistra per le schede personalizzate consecutive sostituisce il raggio in basso a sinistra. |
df-messenger-card-stack-border-bottom-right-radius |
Facoltativo | 8 px | Il raggio del bordo in basso a destra per le schede personalizzate consecutive sostituisce il raggio in basso a destra. |
df-messenger-card-box-shadow |
Facoltativo | 0 2px 2px 0 rgba(0, 0, 0, 0.24) |
Ombra della casella di una scheda personalizzata. |
Contenuti avanzati da uno strumento del playbook
Utilizza gli strumenti del playbook per inviare contenuti avanzati a Dialogflow CX Messenger.
Passaggio 1: crea uno strumento addRichContent nell'agente
Per creare uno strumento di funzione denominato addRichContent, utilizza i seguenti dati:
Input dello strumento:
properties: {}
type: object
Output dello strumento:
properties:
status:
type: string
reason:
type: string
type: object
Passaggio 2: indica all'agente come utilizzare questo strumento
Indica all'agente come utilizzare lo strumento nelle istruzioni e negli esempi.
Ad esempio, aggiungi alle istruzioni qualcosa di simile a quanto segue:
- Greet the user
- Ask the user what their favorite color is.
At the same time run ${TOOL: addRichContent} to display buttons
for blue, red, yellow, and green.
- Thank the user
Ad esempio, crea un esempio come il seguente:
Passaggio 3: definisci il codice JavaScript
Nel codice della pagina che ospita df-messenger, crea un codice JavaScript che definisce una funzione che indica a df-messenger di eseguire il rendering dei contenuti avanzati.
Registra questa funzione con df-messenger in modo che la esegua quando l'agente virtuale ne ha bisogno.
Assicurati che la variabile dfMessenger sia dichiarata e punti alla tua istanza di df-messenger.
Ecco un esempio 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);