Beim Erstellen einer benutzerdefinierten Karten-Auftragsausführung können Sie Textantworten und benutzerdefinierte Nutzdaten erstellen. Die Textantworten werden für Agent-Antworten in Nur-Text und Markdown verwendet und die benutzerdefinierten Nutzlasten für Rich-Antworten. Das benutzerdefinierte Nutzlastformat für alle Antworttypen hat die folgende Grundstruktur:
{
"richContent": [
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
],
[
{
"type": "type-id",
...
},
{
"type": "type-id",
...
}
]
]
}
Beachten Sie, dass der Wert richContent ein äußeres und mehrere innere Arrays zulässt.
Antworten innerhalb eines inneren Arrays werden in einer einzelnen visuellen Karte zusammengefasst.
Wenn das äußere Array mehrere interne Arrays enthält, werden mehrere Karten angezeigt. Eine für jedes interne Array.
In den verbleibenden Unterabschnitten werden die verschiedenen Antworttypen beschrieben, die Sie für eine benutzerdefinierte Nutzlast konfigurieren können.
Textantwort
Die Textantwort unterstützt Nur-Text und Markdown. Hier einige Markdown-Beispiele:
*Italic***Bold**# Title[Link text](Link URL)Tabellen:
Header 1 | Header 2 -------- | -------- Cell 1 | Cell 2
Antworttyp "info"
Der Antworttyp "info" ist eine einfache Titelkarte, auf die Nutzer klicken oder tippen können.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: "info" |
title |
string |
Titel der Karte |
subtitle |
string |
Kartenuntertitel |
image |
object |
Bild |
image.rawUrl |
string |
Öffentliche URL des Bilds |
anchor |
object |
Anker, dem beim Klicken auf das Element gefolgt werden soll |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers, Standardwert ist _blank |
Beispiel:
{
"richContent": [
[
{
"type": "info",
"title": "Info item title",
"subtitle": "Info item subtitle",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"anchor": {
"href": "https://example.com"
}
}
]
]
}
Antworttyp "description"
Der Antworttyp "description" ist eine Informationskarte, die mehrere Textzeilen enthalten kann.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: "description" |
title |
string |
Titel der Karte |
text |
array<string> |
Array von Strings, wobei jeder String in einer neuen Zeile gerendert wird |
Beispiel:
{
"richContent": [
[
{
"type": "description",
"title": "Description title",
"text": [
"This is text line 1.",
"This is text line 2."
]
}
]
]
}
Antworttyp "image"
Der Antworttyp "image" ist eine Bildkarte, auf die Nutzer klicken oder tippen können. Der Antworttyp unterstützt einen Referenz-Chip, mit dem die Quelle des Bildes als Ankerlink zusammen mit einem kurzen beschreibenden Text und einem Symbol hinzugefügt werden kann.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: "image" |
rawUrl |
string |
Öffentliche URL des Bilds |
accessibilityText |
string |
Alternativer Text für das Bild |
reference.text |
string |
Text, der im Referenzchip angezeigt werden soll |
reference.anchor.href |
string |
URL des Referenz-Chips |
reference.anchor.target |
string |
Ziel des Ankers im Referenzchip, Standardwert ist _blank |
reference.image.rawUrl |
string |
Bild, das im Referenzchip angezeigt werden soll |
Beispiel:
{
"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"
}
}
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-image-border-radius |
Optional | 8 Pixel | Rahmenradius des Bildes |
Antworttyp "video"
Beim Videotyp wird ein Videoelement gerendert, das entweder ein direktes Video von einer URL ist, das direkt im Messenger wiedergegeben wird, oder ein Link zu einem Video.
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: „video“ |
title |
string |
Optionaler Videotitel |
source |
object |
Die Quelle des Videos |
source.type |
string |
Ein Typ der Videoquelle, entweder link oder raw |
source.anchor |
object |
Anker, dem beim Klicken auf das Element gefolgt werden soll |
source.embeddedPlayer |
string |
Ein Video vom Typ link kann eingebettet werden, anstatt auf die Webseite des Players zu verlinken. Dies wird nur für eine bekannte Gruppe von Playern implementiert und unterstützt youtube. |
source.thumbnail |
object |
Miniaturansicht für anchor |
source.thumbnail.rawUrl |
string |
Die URL der Miniaturansicht |
source.rawUrl |
string |
URL für ein Video vom Typ raw |
Beispiel:
{
"richContent": [
[
{
"type": "video",
"source": {
"type": "link",
"anchor": {
"href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
}
}
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-video-width |
Optional | automatisch | Breite eines Videos (begrenzt durch max-width\: 100%) |
df-messenger-video-height |
Optional | automatisch | Höhe eines Videos |
df-messenger-video-embed-width |
Optional | 560 Pixel | Breite eines eingebetteten Videos (begrenzt durch max-width\: 100%) |
df-messenger-video-embed-height |
Optional | 315 Pixel | Höhe eines eingebetteten Videos |
df-messenger-video-border |
Optional | 1px solid #e0e0e0 | Rand des Videos |
df-messenger-video-border-radius |
Optional | 8 Pixel | Rahmenradius des Videos |
Antworttyp "button"
Der Antworttyp "button" ist eine kleine Schaltfläche mit einem Symbol, auf das Nutzer klicken oder tippen können.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: "button" |
icon |
object |
Symbol für die Schaltfläche |
icon.type |
string |
Symbol aus der Materialsymbol-Bibliothek Das Standardsymbol ist ein Pfeil |
icon.color |
string |
Farb-Hexcode |
image |
object |
Bild für die Schaltfläche, hat Vorrang vor icon |
image.rawUrl |
string |
Öffentliche URL des Bilds |
mode |
string |
Optional: Wenn auf „blocking“ festgelegt, wird die Nutzereingabe deaktiviert, bis der Nutzer auf die Schaltfläche klickt. |
text |
string |
Schaltflächentext |
anchor |
object |
Anker, dem beim Klicken auf das Element gefolgt werden soll |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers, Standardwert ist _blank |
event |
object |
Dialogflow CX-Ereignis, das ausgelöst wird, wenn auf die Schaltfläche geklickt wird. |
Beispiel:
{
"richContent": [
[
{
"type": "button",
"icon": {
"type": "chevron_right",
"color": "#FF9800"
},
"mode": "blocking",
"text": "Button text",
"anchor": {
"href": "https://example.com"
},
"event": {
"event": ""
}
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-button-border |
Optional | Keine | Rahmen einer Schaltfläche |
df-messenger-button-border-radius |
Optional | 8 Pixel | Rahmenradius einer Schaltfläche |
df-messenger-button-font-color |
Optional | #1f1f1f | Schriftfarbe einer Schaltfläche |
df-messenger-button-font-family |
Optional | „Google Sans“, „Helvetica Neue“, Sans Serif | Schriftfamilie eines Buttons |
df-messenger-button-font-size |
Optional | 14 Pixel | Schriftgröße eines Buttons |
df-messenger-button-padding |
Optional | 12 Pixel | Abstand einer Schaltfläche |
df-messenger-button-icon-spacing |
Optional | 12 Pixel | Abstand zwischen Schaltflächensymbol und Text |
df-messenger-button-icon-font-size |
Optional | 24 Pixel | Größe des Schaltflächensymbols |
df-messenger-button-image-size |
Optional | 24 Pixel | Größe des Schaltflächenbilds |
df-messenger-button-image-offset |
Optional | 0 | Offset des Schaltflächenbilds. Negative Werte sind zulässig, um das Padding zu versetzen. |
df-messenger-button-text-align |
Optional | center | Textausrichtung eines Buttons |
df-messenger-button-text-wrap |
Optional | normal | Mit nowrap können Sie mehrzeilige Schaltflächen deaktivieren. |
Antworttyp "list"
Der Antworttyp "list" ist eine Karte mit mehreren Optionen, aus denen Nutzer auswählen können.
Die Antwort enthält ein Array mit den Antworttypen list und divider.
In der folgenden Tabelle wird der Typ list beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: "list" |
title |
string |
Titel der Option |
subtitle |
string |
Untertitel der Option |
event |
object |
Dialogflow CX-Ereignis, das ausgelöst wird, wenn auf die Option geklickt wird |
anchor |
object |
Anker, der beim Klicken auf das Element aufgerufen werden soll |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers, Standardwert ist _blank |
image |
object |
Bild |
image.rawUrl |
string |
Öffentliche URL des Bilds |
In der folgenden Tabelle wird der Typ divider beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: "divider" |
Beispiel:
{
"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": ""
}
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-list-padding |
Optional | 16 Pixel | Abstand eines Listenelements |
df-messenger-list-inset |
Optional | 0 | Zusätzlicher horizontaler „Inset“ des Listenelements (zusätzlich zum Padding), um die Ausdehnung des Rahmens zwischen den Elementen zu steuern |
df-messenger-list-spacing |
Optional | 10 Pixel | Vertikaler Abstand zwischen Listenelementen |
df-messenger-list-border-bottom |
Optional | 1px solid #e0e0e0 | Rahmen zwischen Listenelementen |
Antworttyp "accordion"
Der Antworttyp "accordion" ist eine kleine Karte, auf die ein Nutzer klicken oder tippen kann, um mehr Text einzublenden und anzuzeigen.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: "accordion" |
title |
string |
Titel des "Akkordeons" |
subtitle |
string |
Untertitel des "Akkordeons" |
image |
object |
Bild |
image.rawUrl |
string |
Öffentliche URL des Bilds |
text |
string |
Text für das "Akkordeon" |
Beispiel:
{
"richContent": [
[
{
"type": "accordion",
"title": "Accordion title",
"subtitle": "Accordion subtitle",
"image": {
"rawUrl": "https://example.com/images/logo.png"
},
"text": "Accordion text"
}
]
]
}
Antworttyp "chips"
Der Antworttyp "chips" bietet dem Endnutzer eine Liste anklickbarer Chips mit Vorschlägen.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: "chips" |
options |
array<object> |
Array von Optionsobjekten |
options[].mode |
string |
Optional. Wenn „blocking“ festgelegt ist, wird die Nutzereingabe deaktiviert, bis der Nutzer auf den Chip klickt. |
options[].text |
string |
Text der Option |
options[].image |
object |
Optional, Option „Bild“ |
options[].image.rawUrl |
string |
Öffentliche URL des Bilds für die Option |
options[].anchor |
object |
Optional, Anker, dem gefolgt werden soll, wenn auf das Element geklickt wird |
options[].anchor.href |
string |
URL des Ankers |
options[].anchor.target |
string |
Ziel des Ankers, Standardwert ist _blank |
Beispiel:
{
"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"
}
}
]
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-chips-spacing |
Optional | 10 Pixel | Abstand über den Chips zur vorherigen Nachricht |
df-messenger-chips-border-color |
Optional | #e0e0e0 | Rahmenfarbe eines Chips |
df-messenger-chips-border-color-hover |
Optional | #e0e0e0 | Rahmenfarbe eines Chips bei Mouseover |
df-messenger-chips-border-radius |
Optional | 999 px | Rahmenradius eines Chips |
df-messenger-chips-background |
Optional | Weiß | Hintergrund eines Chips |
df-messenger-chips-background-hover |
Optional | rgba(68, 71, 70, 0.08) | Hintergrund eines Chips beim Hovern |
df-messenger-chips-padding |
Optional | 6 px 16 px | Abstand eines Chips |
df-messenger-chips-font-color |
Optional | Schwarz | Textfarbe eines Chips |
df-messenger-chips-font-family |
Optional | „Google Sans“, „Helvetica Neue“, Sans Serif | Schriftfamilie eines Chips |
df-messenger-chips-font-size |
Optional | 14 Pixel | Textgröße eines Chips |
df-messenger-chips-font-weight |
Optional | normal | Schriftstärke eines Chips |
df-messenger-chips-font-weight-hover |
Optional | normal | Schriftstärke eines Chips beim Hovern |
df-messenger-chips-box-shadow |
Optional | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | Rahmenschatten eines Chips |
df-messenger-chips-content-align |
Optional | flex-start | Vertikale Ausrichtung des Inhalts (z.B. des Bildes) in einem Chip |
df-messenger-chips-text-wrap |
Optional | nowrap | Mit normal können Sie mehrzeilige Chips verwenden. |
Antworttyp „Zitationen“
Der Antworttyp „citations“ bietet dem Endnutzer eine Liste anklickbarer Zitationslinks.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: „match_citations“ |
citations |
array<object> |
Array von „Citation“-Objekten |
citations[].title |
string |
Titel der Quellenangabe |
citations[].subtitle |
string |
Untertitel der Quellenangabe (wird derzeit ignoriert) |
citations[].anchor |
object |
Anker, dem beim Klicken auf das Element gefolgt werden soll |
citations[].anchor.href |
string |
URL des Ankers |
citations[].anchor.target |
string |
Ziel des Ankers, Standardwert ist _blank |
Beispiel:
{
"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"
}
}
]
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-citations-spacing |
Optional | 10 Pixel | Leerraum über den Quellenangaben für die vorherige Nachricht |
df-messenger-citations-message-display |
Optional | Block | Definiert die Darstellung der Notiz über den Quellenangaben. Zulässige Werte sind block oder none. |
df-messenger-citations-message-font-color |
Optional | #041e49 | Schriftfarbe der Anmerkung über den Quellenangaben |
df-messenger-citations-message-font-size |
Optional | 12 Pixel | Textgröße der Anmerkung über den Quellenangaben |
df-messenger-citations-flex-direction |
Optional | Zeile | Flex-Richtung der Zitationen, empfohlen wird row (horizontal mit Zeilenumbrüchen) oder column (vertikal) |
df-messenger-citations-border-color |
Optional | #1a73e8 | Rahmenfarbe einer Quellenangabe |
df-messeenger-citations-border-color-hover |
Optional | #1a73e8 | Rahmenfarbe einer Quellenangabe bei Mouseover |
df-messenger-citations-border-radius |
Optional | 4 Pixel | Rahmenradius einer Quellenangabe |
df-messenger-citations-padding |
Optional | 8 Pixel | Abstand einer Zitation |
df-messenger-citations-background |
Optional | Weiß | Hintergrund einer Zitation |
df-messenger-citations-background-hover |
Optional | rgba(68, 71, 70, 0.08) | Hintergrund einer Zitation beim Hovern |
df-messenger-citations-font-color |
Optional | #1a73e8 | Textfarbe einer Zitation |
df-messenger-citations-font-family |
Optional | „Google Sans“, „Helvetica Neue“, Sans Serif | Schriftfamilie einer Quellenangabe |
df-messenger-citations-font-size |
Optional | 11 Pixel | Textgröße einer Zitation |
df-messenger-citations-icon-font-size |
Optional | 14 Pixel | Textgröße des Symbols einer Quellenangabe |
df-messenger-citations-font-weight |
Optional | normal | Schriftstärke einer Quellenangabe |
df-messenger-citations-font-weight-hover |
Optional | normal | Schriftstärke einer Quellenangabe beim Hovern |
df-messenger-citations-icon-spacing |
Optional | 4 Pixel | Abstand zwischen Symbol und Text in einer Quellenangabe |
df-messenger-citations-box-shadow |
Optional | Keine | Rahmenschatten einer Quellenangabe |
Antworttyp „files“
Der Antworttyp „files“ rendert eine Liste von Dateielementen, die einen herunterladbaren Link enthalten.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: „files“ |
files |
array<object> |
Array von File-Objekten |
files[].name |
string |
Dateiname |
files[].image |
object |
Dateibild |
files[].image.rawUrl |
string |
Öffentliche Datei-URL für das Bild |
files[].anchor |
object |
Anker zum Herunterladen der Datei |
files[].anchor.href |
string |
URL des Ankers |
files[].anchor.target |
string |
Ziel des Ankers, Standardwert ist _blank |
Beispiel:
{
"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"
}
}
]
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-files-spacing |
Optional | 10 Pixel | Abstand über der Datei zur vorherigen Nachricht |
df-messenger-files-distance |
Optional | 8 Pixel | Abstand zwischen Dateien in der Liste |
df-messenger-files-flex-direction |
Optional | Zeile | Eigenschaft „Flex direction“ der Dateien. Wir empfehlen die Verwendung von row (horizontal mit Zeilenumbrüchen) oder column (vertikal). |
df-messenger-files-background |
Optional | Weiß | Hintergrund einer Datei |
df-messenger-files-border |
Optional | 1px solid #e0e0e0 | Rahmen einer Datei |
df-messenger-files-border-radius |
Optional | 999 px | Rahmenradius einer Datei |
df-messenger-files-box-shadow |
Optional | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | Rahmenschatten einer Datei |
df-messenger-files-padding |
Optional | 6 px 16 px | Auffüllen einer Datei |
df-messenger-files-font-color |
Optional | #1f1f1f | Textfarbe einer Datei |
df-messenger-files-font-family |
Optional | „Google Sans“, „Helvetica Neue“, Sans Serif | Schriftfamilie einer Datei |
df-messenger-files-font-size |
Optional | 14 Pixel | Textgröße einer Datei |
df-messenger-files-font-weight |
Optional | normal | Schriftstärke einer Datei |
df-messenger-files-background-hover |
Optional | Weiß | Hintergrund einer Datei beim Hovern |
df-messenger-files-border-hover |
Optional | 1px solid #e0e0e0 | Rahmen einer Datei beim Hovern |
df-messenger-files-font-weight-hover |
Optional | normal | Schriftstärke einer Datei beim Hovern |
df-messenger-files-image-offset |
Optional | 0 0 0 -8px | Offset des Bilds auf der linken Seite |
df-messenger-files-image-size |
Optional | 18 Pixel | Größe des Bildes auf der linken Seite |
df-messenger-files-text-spacing |
Optional | 8 Pixel | Abstand zwischen Bild und Text links und Text und Symbol rechts |
df-messenger-files-icon-offset |
Optional | 0 –8px 0 0 | Offset des Downloadsymbols auf der rechten Seite |
df-messenger-files-icon-size |
Optional | 18 Pixel | Größe des Downloadsymbols auf der rechten Seite |
df-messenger-files-icon-font-color |
Optional | #444746 | Farbe des Downloadsymbols rechts |
HTML-Antworttyp
Der Antworttyp „HTML“ bietet dem Endnutzer eine HTML-Nachricht.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: „html“ |
html |
string |
Textinhalt der Nachricht, unterstützt HTML |
Unterstützte HTML-Tags:
a: Anker-Element (zum Erstellen von Hyperlinks)b– Element für Fettdruck (wird zum Formatieren von Text in Fettdruck verwendet)i: Kursives Element (wird zum Kursivieren von Text verwendet)u– Unterstreichungselement (wird zum Unterstreichen von Text verwendet)h1– Überschrift 1-Element (wird für die Hauptüberschrift einer Seite verwendet)h2– Überschrift 2-Element (für Zwischenüberschriften)h3– Überschrift 3-Element (für Unter-Unterüberschriften)p– Absatzelement (wird zum Erstellen von Textabsätzen verwendet)br: Zeilenumbruch-Element (wird verwendet, um Zeilenumbrüche innerhalb eines Absatzes zu erstellen)table– Tabellenelement (zum Erstellen von Tabellen)tr: Tabellenzeilenelement (wird zum Erstellen von Zeilen in einer Tabelle verwendet)thead: Tabellenüberschriftenelement (wird zum Erstellen einer Überschrift in einer Tabelle verwendet)th– Tabellenheaderdaten oder Zellelement (zum Erstellen von Zellen in einer Tabellenheaderzeile)tbody: Tabellentext-Element (wird zum Erstellen eines Textbereichs in einer Tabelle verwendet)td: Tabellendaten oder Zellenelement (zum Erstellen von Zellen in einer Tabellenzeile)ul– Element für nicht sortierte Listen (zum Erstellen von Aufzählungslisten)ol: Element einer sortierten Liste (wird zum Erstellen nummerierter Listen verwendet)li: Listenelement (wird zum Erstellen von Elementen in einer Liste verwendet)img– Bildelement (wird zum Anzeigen eines Bildes verwendet, siehe auchurl-allowlistHTML-Anpassung)div– Containerelementspan– Inline-Container-Element
Beispiel:
{
"richContent": [
[
{
"type": "html",
"html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
}
]
]
}
HTML und Markdown formatieren
Für Ankerelemente (HTML-Element a und Markdown-Link) können die folgenden CSS-Variablen angegeben werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-link-decoration |
Optional | Unterstrichen | Dekoration eines Link-Elements |
df-messenger-link-font-color |
Optional | #0b57d0 | Schriftfarbe eines noch nicht geöffneten Linkelements |
df-messenger-link-visited-font-color |
Optional | #0b57d0 | Schriftfarbe eines besuchten Linkelements |
df-messenger-link-hover-font-color |
Optional | #0b57d0 | Schriftfarbe beim Bewegen des Mauszeigers auf ein Linkelement |
df-messenger-link-background |
Optional | Transparent | Hintergrund eines Link-Elements |
df-messenger-link-padding |
Optional | 0 | Abstand eines Link-Elements |
df-messenger-link-border |
Optional | Keine | Rahmen eines Link-Elements |
df-messenger-link-border-radius |
Optional | 0 | Rahmenradius eines Link-Elements |
Für Tabellenelemente (HTML-table-Element und Markdown-Tabellen) können die folgenden CSS-Variablen angegeben werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-table-font-size |
Optional | 14 Pixel | Textgröße in einem Tabellenelement |
df-messenger-table-font-color |
Optional | #1f1f1f | Textfarbe in einem Tabellenelement |
df-messenger-table-align |
Optional | links | Ausrichtung von Text in einer Tabellenzelle |
df-messenger-table-padding |
Optional | 0 | Innenabstand in einer Tabellenzelle |
df-messenger-table-border-collapse |
Optional | separat | Border Collapse Mode einer Tabelle. Verwenden Sie separate, um border-radius zu aktivieren. |
df-messenger-table-border-radius |
Optional | 0 | Rahmenradius einer Tabelle |
df-messenger-table-header-border-radius |
Optional | 0 | Rahmenradius der Tabellenüberschrift |
df-messenger-table-border-top |
Optional | Keine | Oberer Rahmen einer Tabellenzeile |
df-messenger-table-border-top-first |
Optional | Keine | Oberer Rahmen der ersten Tabellenzeile |
df-messenger-table-border-bottom |
Optional | Keine | Unterer Rahmen einer Tabellenzeile |
df-messenger-table-border-bottom-last |
Optional | Keine | Rahmenlinie unten der letzten Tabellenzeile |
df-messenger-table-border-left |
Optional | Keine | Rahmenlinie links von einer Tabellenzelle |
df-messenger-table-border-left-first |
Optional | Keine | Linke Rahmenlinie der ersten Tabellenzelle in einer Zeile |
df-messenger-table-border-right |
Optional | Keine | Rechter Rahmen einer Tabellenzelle |
df-messenger-table-border-right-last |
Optional | Keine | Rechter Rahmen der letzten Tabellenzelle in einer Zeile |
df-messenger-table-background |
Optional | Transparent | Hintergrund einer Tabellenzeile |
df-messenger-table-even-background |
Optional | Transparent | Hintergrund von Tabellenzeilen mit gerader Nummer |
df-messenger-table-odd-background |
Optional | Transparent | Hintergrund für Tabellenzeilen mit ungeraden Nummern |
df-messenger-table-header-font-size |
Optional | 14 Pixel | Textgröße in einem Tabellenkopfzeilenelement |
df-messenger-table-header-font-weight |
Optional | fett | Schriftstärke in einem Tabellenkopfzeilenelement |
df-messenger-table-header-font-color |
Optional | #1f1f1f | Textfarbe in einem Tabellenkopfzeilenelement |
df-messenger-table-header-align |
Optional | links | Ausrichtung von Text in einer Tabellenüberschriftenzelle |
df-messenger-table-header-padding |
Optional | 0 | Abstand in einer Tabellenkopfzelle |
df-messenger-table-header-border-top |
Optional | Keine | Oberer Rahmen der Tabellenüberschriftszeile |
df-messenger-table-header-border-bottom |
Optional | Keine | Unterer Rahmen der Tabellenüberschriftszeile |
df-messenger-table-header-border-left |
Optional | Keine | Linker Rahmen einer Zelle in der Tabellenüberschrift |
df-messenger-table-header-border-left-first |
Optional | Keine | Rahmen links von der ersten Zelle in der Tabellenkopfzeile |
df-messenger-table-header-border-right |
Optional | Keine | Rechter Rahmen einer Zelle in der Tabellenüberschriftszeile |
df-messenger-table-header-border-right-last |
Optional | Keine | Rechter Rahmen der letzten Zelle in einer Tabellenüberschriftenzeile |
df-messenger-table-header-background |
Optional | Transparent | Hintergrund der Kopfzeile der Tabelle |
Antworttyp „Benutzerdefinierte Vorlage“
Mit dem benutzerdefinierten Antworttyp für Vorlagen wird ein benutzerdefiniertes Element gerendert, das auf der Website des Kunden definiert ist. Das Element wird nicht in einer Karte platziert und steht immer für sich.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: „custom_template“ |
name |
string |
Name des benutzerdefinierten Elements |
payload |
Object |
Nutzlast, die an das benutzerdefinierte Element übergeben werden soll |
Beispiel:
{
"richContent": [
[
{
"type": "custom_template",
"name": "custom-element-example",
"payload": {
"text": "Hello World"
}
}
]
]
}
Auf Ihrer Website muss das benutzerdefinierte Element unter dem genauen Namen aus dem Feld name der Antwort registriert werden. Das Feld payload wird nach der Erstellung (aber vor connectedCallback) als dfPayload an das benutzerdefinierte Element übergeben. Das Feld kann beliebiges JSON enthalten. Außerdem wird dfResponseId an das Element übergeben.
Hier sehen Sie ein Beispiel für die Implementierung eines benutzerdefinierten Elements anhand der Antwort aus dem Beispiel:
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);
})();
Antworttypen kombinieren
Die einzelnen Rich-Media-Nachrichtenelemente für Dialogflow CX Messenger können verwendet werden, um eine benutzerdefinierte Karte zu erstellen, die Ihren Anforderungen entspricht.
Hier ein Beispiel mit einigen der im Abschnitt zur Auftragsausführung aufgeführten Elemente:
{
"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"
}
}
]
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden:
| Eigenschaften | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-card-background |
Optional | Weiß | Hintergrund einer benutzerdefinierten Karte |
df-messenger-card-padding |
Optional | 16 Pixel | Abstand von Elementen in einer benutzerdefinierten Karte |
df-messenger-card-border |
Optional | 1px solid #e0e0e0 | Rahmen einer benutzerdefinierten Karte |
df-messenger-card-border-radius |
Optional | 8 Pixel | Rahmenradius einer benutzerdefinierten Karte |
df-messenger-card-border-top-left-radius |
Optional | 8 Pixel | Eckenradius oben links einer benutzerdefinierten Karte |
df-messenger-card-border-top-right-radius |
Optional | 8 Pixel | Eckradius oben rechts für eine benutzerdefinierte Karte |
df-messenger-card-border-bottom-left-radius |
Optional | 8 Pixel | Eckradius unten links einer benutzerdefinierten Karte |
df-messenger-card-border-bottom-right-radius |
Optional | 8 Pixel | Eckradius unten rechts auf einer Karte |
df-messenger-card-stack-border-top-left-radius |
Optional | 8 Pixel | Der obere linke Grenzradius für aufeinanderfolgende benutzerdefinierte Karten überschreibt den oberen linken Radius. |
df-messenger-card-stack-border-top-right-radius |
Optional | 8 Pixel | Der obere rechte Grenzradius für aufeinanderfolgende benutzerdefinierte Karten überschreibt den oberen rechten Radius. |
df-messenger-card-stack-border-bottom-left-radius |
Optional | 8 Pixel | Der Radius der unteren linken Ecke für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius der unteren linken Ecke. |
df-messenger-card-stack-border-bottom-right-radius |
Optional | 8 Pixel | Der untere rechte Grenzradius für aufeinanderfolgende benutzerdefinierte Karten überschreibt den unteren rechten Radius. |
df-messenger-card-box-shadow |
Optional | 0 2px 2px 0 rgba(0, 0, 0, 0.24) | Schatten einer benutzerdefinierten Karte |
Rich Content aus einem Playbook-Tool
Mit Playbook-Tools können Sie Rich-Content an Dialogflow CX Messenger senden.
Schritt 1: addRichContent-Tool in Ihrem Agent erstellen
Erstellen Sie ein Funktionstool mit dem Namen addRichContent mit den folgenden Daten:
Tooleingabe:
properties: {}
type: object
Tool-Ausgabe:
properties:
status:
type: string
reason:
type: string
type: object
Schritt 2: Dem KI-Agenten mitteilen, wie er dieses Tool verwenden soll
Geben Sie Ihrem Agenten in Anleitungen und Beispielen vor, wie er das Tool verwenden soll.
Fügen Sie Ihren Anweisungen beispielsweise Folgendes hinzu:
- 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
Erstellen Sie beispielsweise ein Beispiel wie das folgende:
Die Syntax für Rich Content ist dieselbe, die Sie verwenden würden, wenn Sie eine benutzerdefinierte Nutzlast in einem flowbasierten virtuellen Kundenservicemitarbeiter zurückgeben würden.
Schritt 3: JavaScript definieren
Im Code für die Seite, auf der df-messenger gehostet wird, müssen Sie JavaScript-Code erstellen, der eine Funktion definiert, mit der df-messenger angewiesen wird, den Rich-Content zu rendern.
Sie müssen diese Funktion auch bei df-messenger registrieren, damit sie ausgeführt wird, wenn der virtuelle Agent sie benötigt.
Prüfen Sie, ob die Variable dfMessenger deklariert ist und auf Ihre Instanz von df-messenger verweist.
Hier finden Sie Beispielcode, den Sie für diesen Zweck verwenden können:
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);