Beim Erstellen einer Auftragsausführung für eine benutzerdefinierte Karte können Sie Textantworten und benutzerdefinierte Nutzdaten erstellen. Die Textantworten werden für nur Text und Markdown-Agentantworten 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 |
Anchor, dem beim Klicken auf das Element zu folgen ist |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers, standardmäßig _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 Referenzchip, 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 Referenzchips |
reference.anchor.target |
string |
Ziel des Ankers im Referenz-Chip, standardmäßig _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:
| Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-image-border-radius |
Optional | 8 Pixel | Rahmenradius des Bildes |
Antworttyp „video“
Der Videoantworttyp rendert ein Videoelement, das entweder ein direktes Video von einer URL sein kann, 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 |
Der Typ der Videoquelle, entweder link oder raw |
source.anchor |
object |
Anchor, dem beim Klicken auf das Element zu folgen ist |
source.embeddedPlayer |
string |
Videos vom Typ link können eingebettet werden, anstatt einen Link zur Webseite des Players zu enthalten. Diese Funktion ist nur für eine bestimmte 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:
| Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-video-width |
Optional | automatisch | Breite eines Videos (begrenzt auf 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 auf max-width\: 100%) |
df-messenger-video-embed-height |
Optional | 315 px | 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 „blockieren“ festgelegt ist, ist die Nutzereingabe deaktiviert, bis der Nutzer auf die Schaltfläche klickt. |
text |
string |
Text für die Schaltfläche |
anchor |
object |
Anchor, dem beim Klicken auf das Element zu folgen ist |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers, standardmäßig _blank |
event |
object |
Dialogflow-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:
| Attribute | 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“, serifenlos | Schriftfamilie einer Schaltfläche |
df-messenger-button-font-size |
Optional | 14 Pixel | Schriftgröße einer Schaltfläche |
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 ermöglichen einen Abstand zum Text. |
df-messenger-button-text-align |
Optional | center | Textausrichtung einer Schaltfläche |
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-Ereignis, das ausgelöst wird, wenn auf die Schaltfläche geklickt wird |
anchor |
object |
Anchor, dem beim Klicken auf das Element zu folgen ist |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers, standardmäßig _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:
| Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-list-padding |
Optional | 16 Pixel | Ränder eines Listenelements |
df-messenger-list-inset |
Optional | 0 | Zusätzlicher horizontaler „Einzug“ des Listenelements (zusätzlich zum Abstand), um die Ausdehnung des Rahmens zwischen den Elementen zu steuern |
df-messenger-list-spacing |
Optional | 10 Pixel | Vertikale Abstände 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, ist die Nutzereingabe deaktiviert, bis der Nutzer auf den Chip klickt. |
options[].text |
string |
Text der Option |
options[].image |
object |
Optional: Bild für die Option |
options[].image.rawUrl |
string |
Öffentliche URL des Bilds für die Option |
options[].anchor |
object |
Optional: Anchor, dem beim Klicken auf das Element gefolgt werden soll |
options[].anchor.href |
string |
URL des Ankers |
options[].anchor.target |
string |
Ziel des Ankers, standardmäßig _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:
| Attribute | 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 beim Bewegen des Mauszeigers darauf |
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, wenn der Mauszeiger darauf bewegt wird |
df-messenger-chips-padding |
Optional | 6 px 16 px | Padding eines Chips |
df-messenger-chips-font-color |
Optional | Schwarz | Textfarbe eines Chips |
df-messenger-chips-font-family |
Optional | „Google Sans“, „Helvetica Neue“, serifenlos | 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 Bewegen des Mauszeigers darauf |
df-messenger-chips-box-shadow |
Optional | 0 2 px 2 px 0 rgba(0, 0, 0, 0.24) | Rahmenschatten eines Chips |
df-messenger-chips-content-align |
Optional | flex-start | Vertikale Ausrichtung der Inhalte (z.B. des Bilds) in einem Chip |
df-messenger-chips-text-wrap |
Optional | nowrap | normal verwenden, um mehrzeilige Chips zuzulassen |
Antworttyp „Zitate“
Der Antworttyp „Zitate“ bietet dem Endnutzer eine Liste anklickbarer Zitatlinks.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: „match_citations“ |
citations |
array<object> |
Array von Zitatobjekten |
citations[].title |
string |
Titel der Quelle |
citations[].subtitle |
string |
Untertitel der Quelle (wird derzeit ignoriert) |
citations[].anchor |
object |
Anchor, dem beim Klicken auf das Element zu folgen ist |
citations[].anchor.href |
string |
URL des Ankers |
citations[].anchor.target |
string |
Ziel des Ankers, standardmäßig _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:
| Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-citations-spacing |
Optional | 10 Pixel | Leerraum über den Zitaten der vorherigen Nachricht |
df-messenger-citations-message-display |
Optional | Block | Hiermit wird festgelegt, ob der Hinweis über den Zitaten angezeigt wird. Zulässige Werte sind block oder none. |
df-messenger-citations-message-font-color |
Optional | #041e49 | Schriftfarbe des Hinweises über den Quellenangaben |
df-messenger-citations-message-font-size |
Optional | 12 Pixel | Textgröße der Anmerkung über den Zitaten |
df-messenger-citations-flex-direction |
Optional | Zeile | Flex-Achse der Zitate. Wir empfehlen row (horizontal mit Zeilenumbrüchen) oder column (vertikal). |
df-messenger-citations-border-color |
Optional | #1a73e8 | Rahmenfarbe einer Quelle |
df-messeenger-citations-border-color-hover |
Optional | #1a73e8 | Rahmenfarbe einer Quelle beim Hovern |
df-messenger-citations-border-radius |
Optional | 4 Pixel | Rahmenradius einer Quelle |
df-messenger-citations-padding |
Optional | 8 Pixel | Einzug einer Quelle |
df-messenger-citations-background |
Optional | Weiß | Hintergrund einer Quelle |
df-messenger-citations-background-hover |
Optional | rgba(68, 71, 70, 0.08) | Hintergrund einer Quelle, wenn der Mauszeiger darauf bewegt wird |
df-messenger-citations-font-color |
Optional | #1a73e8 | Textfarbe einer Quelle |
df-messenger-citations-font-family |
Optional | „Google Sans“, „Helvetica Neue“, serifenlos | Schriftfamilie einer Quelle |
df-messenger-citations-font-size |
Optional | 11 Pixel | Textgröße einer Quelle |
df-messenger-citations-icon-font-size |
Optional | 14 Pixel | Textgröße des Symbols einer Quelle |
df-messenger-citations-font-weight |
Optional | normal | Schriftstärke einer Quelle |
df-messenger-citations-font-weight-hover |
Optional | normal | Schriftstärke einer Quelle beim Bewegen des Mauszeigers darauf |
df-messenger-citations-icon-spacing |
Optional | 4 Pixel | Abstand zwischen Symbol und Text in einer Quelle |
df-messenger-citations-box-shadow |
Optional | keine | Schatten für eine Quelle |
Antworttyp „files“
Der Antworttyp „Dateien“ gibt eine Liste von Dateielementen mit einem Link zum Herunterladen zurück.
In der folgenden Tabelle werden die Felder beschrieben:
| Name | Typ | Beschreibung |
|---|---|---|
type |
string |
Antworttyp: „files“ |
files |
array<object> |
Array von Dateiobjekten |
files[].name |
string |
Dateiname |
files[].image |
object |
Datei-Image |
files[].image.rawUrl |
string |
Öffentliche URL der Bilddatei |
files[].anchor |
object |
Anchor, um die Datei herunterzuladen |
files[].anchor.href |
string |
URL des Ankers |
files[].anchor.target |
string |
Ziel des Ankers, standardmäßig _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:
| Attribute | 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 | Flex-Achse der Dateien. Wir empfehlen 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 | Rand einer Datei |
df-messenger-files-border-radius |
Optional | 999 px | Rahmenradius einer Datei |
df-messenger-files-box-shadow |
Optional | 0 2 px 2 px 0 rgba(0, 0, 0, 0.24) | Rahmenschatten einer Datei |
df-messenger-files-padding |
Optional | 6 px 16 px | Padding einer Datei |
df-messenger-files-font-color |
Optional | #1f1f1f | Textfarbe einer Datei |
df-messenger-files-font-family |
Optional | „Google Sans“, „Helvetica Neue“, serifenlos | 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 Bewegen des Mauszeigers |
df-messenger-files-border-hover |
Optional | 1px solid #e0e0e0 | Rahmen einer Datei beim Bewegen des Mauszeigers darauf |
df-messenger-files-font-weight-hover |
Optional | normal | Schriftstärke einer Datei beim Bewegen des Mauszeigers darauf |
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 Bilds auf der linken Seite |
df-messenger-files-text-spacing |
Optional | 8 Pixel | Abstand zwischen Bildtext auf der linken und Textsymbol auf der rechten Seite |
df-messenger-files-icon-offset |
Optional | 0 -8px 0 0 | Versatz des Downloadsymbols rechts |
df-messenger-files-icon-size |
Optional | 18 Pixel | Größe des Downloadsymbols rechts |
df-messenger-files-icon-font-color |
Optional | #444746 | Farbe des Downloadsymbols rechts |
HTML-Antworttyp
Der HTML-Antworttyp stellt dem Endnutzer eine HTML-Nachricht zur Verfügung.
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– Ankerelement (zum Erstellen von Hyperlinks)b– Fettdruckelement (wird zum Fettdruck von Text verwendet)i– Kursivelement (wird zum Kursivieren von Text verwendet)u– Unterstrichen-Element (zum Unterstreichen von Text)h1– Heading 1-Element (wird für die Hauptüberschrift einer Seite verwendet)h2– Heading 2-Element (für Zwischenüberschriften)h3– Zwischenüberschrift 3 (für untergeordnete Zwischenüberschriften)p– Absatzelement (zum Erstellen von Textabsätzen)br– Zeilenumbruchelement (wird zum Erstellen von Zeilenumbrüchen innerhalb eines Absatzes verwendet)table– Tabellenelement (zum Erstellen von Tabellen)tr– Tabellenzeilenelement (zum Erstellen von Zeilen in einer Tabelle)thead– Tabellenüberschriftenelement (zum Erstellen einer Überschrift in einer Tabelle)th– Tabellenüberschriftendaten oder Zellenelement (zum Erstellen von Zellen in einer Tabellenüberschriftenzeile)tbody– Tabellenkörperelement (zum Erstellen eines Tabellenkörpers)td– Tabellendaten oder Zellenelement (zum Erstellen von Zellen in einer Tabellenzeile)ul– Element für unsortierte Listen (zum Erstellen von Aufzählungslisten)ol– Element für eine sortierte Liste (zum Erstellen nummerierter Listen)li– Listenelement (zum Erstellen von Elementen in einer Liste)img– Bildelement (zum Anzeigen eines Bilds, 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 stylen
Für Ankerelemente (HTML-a-Element und Markdown-Link) können die folgenden CSS-Variablen angegeben werden:
| Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-link-decoration |
Optional | Unterstrichen | Dekoration eines Link-Elements |
df-messenger-link-font-color |
Optional | #0b57d0 | Schriftfarbe eines nicht besuchten 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 Linkelements |
df-messenger-link-padding |
Optional | 0 | Ränder 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:
| Attribute | 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 | Text in einer Tabellenzelle ausrichten |
df-messenger-table-padding |
Optional | 0 | Textabstand in einer Tabellenzelle |
df-messenger-table-border-collapse |
Optional | getrennt | Modus zum Zusammenführen von Rändern einer Tabelle: Mit separate können Sie border-radius 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 | Rahmen oben in einer Tabellenzeile |
df-messenger-table-border-top-first |
Optional | keine | Rahmen oben in der ersten Tabellenzeile |
df-messenger-table-border-bottom |
Optional | keine | Unterer Rahmen einer Tabellenzeile |
df-messenger-table-border-bottom-last |
Optional | keine | Unterer Rahmen der letzten Tabellenzeile |
df-messenger-table-border-left |
Optional | keine | Rahmen links einer Tabellenzelle |
df-messenger-table-border-left-first |
Optional | keine | Rahmen links neben der ersten Tabellenzelle in einer Zeile |
df-messenger-table-border-right |
Optional | keine | Rahmen rechts einer Tabellenzelle |
df-messenger-table-border-right-last |
Optional | keine | Rahmen rechts neben 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 von Tabellenzeilen mit ungerader Nummer |
df-messenger-table-header-font-size |
Optional | 14 Pixel | Textgröße in einem Tabellenüberschriftenelement |
df-messenger-table-header-font-weight |
Optional | fett | Schriftstärke in einem Tabellenkopfelement |
df-messenger-table-header-font-color |
Optional | #1f1f1f | Textfarbe in einem Tabellenkopfelement |
df-messenger-table-header-align |
Optional | links | Textausrichtung in einer Tabellenüberschriftenzelle |
df-messenger-table-header-padding |
Optional | 0 | Ränder in einer Tabellenüberschriftenzelle |
df-messenger-table-header-border-top |
Optional | keine | Rahmen oben in der Tabellenüberschriftszeile |
df-messenger-table-header-border-bottom |
Optional | keine | Unterer Rahmen der Tabellenüberschriftszeile |
df-messenger-table-header-border-left |
Optional | keine | Rahmen links einer Zelle in der Tabellenüberschriftenzeile |
df-messenger-table-header-border-left-first |
Optional | keine | Rahmen links neben der ersten Zelle in der Tabellenüberschriftenzeile |
df-messenger-table-header-border-right |
Optional | keine | Rahmen rechts neben einer Zelle in der Tabellenüberschriftszeile |
df-messenger-table-header-border-right-last |
Optional | keine | Rahmen rechts neben der letzten Zelle in einer Tabellenüberschriftenzeile |
df-messenger-table-header-background |
Optional | transparent | Hintergrund der Kopfzeile der Tabelle |
Antworttyp der benutzerdefinierten Vorlage
Der Antworttyp „Benutzerdefinierte Vorlage“ rendert ein benutzerdefiniertes Element, das auf der Website des Kunden definiert ist. Das Element wird nicht in eine Karte eingefügt 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 genau mit dem Namen aus dem Feld name der Antwort registriert sein. Das Feld payload wird nach dem Erstellen (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 ist eine Beispielimplementierung 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 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"
}
}
]
}
]
]
}
Die folgenden CSS-Variablen können bereitgestellt werden:
| Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
|---|---|---|---|
df-messenger-card-background |
Optional | Weiß | Hintergrund einer benutzerdefinierten Karte |
df-messenger-card-padding |
Optional | 16 Pixel | Ränder 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 | Rahmenradius links oben auf einer benutzerdefinierten Karte |
df-messenger-card-border-top-right-radius |
Optional | 8 Pixel | Rahmenradius oben rechts auf einer benutzerdefinierten Karte |
df-messenger-card-border-bottom-left-radius |
Optional | 8 Pixel | Rahmenradius links unten auf einer benutzerdefinierten Karte |
df-messenger-card-border-bottom-right-radius |
Optional | 8 Pixel | Ränder rechts unten auf einer Karte |
df-messenger-card-stack-border-top-left-radius |
Optional | 8 Pixel | Der Rahmenradius links oben für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius links oben |
df-messenger-card-stack-border-top-right-radius |
Optional | 8 Pixel | Der Rahmenradius rechts oben für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius rechts oben |
df-messenger-card-stack-border-bottom-left-radius |
Optional | 8 Pixel | Der Rahmenradius links unten für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius links unten |
df-messenger-card-stack-border-bottom-right-radius |
Optional | 8 Pixel | Der Rundungsradius für die rechte untere Ecke bei aufeinanderfolgenden benutzerdefinierten Karten überschreibt den Radius für die rechte untere Ecke |
df-messenger-card-box-shadow |
Optional | 0 2 px 2 px 0 rgba(0, 0, 0, 0.24) | Rahmenschatten einer benutzerdefinierten Karte |
Rich Content aus einem Playbook-Tool
Mit Playbook-Tools können Sie Rich-Text-Inhalte an Dialogflow CX Messenger senden.
Schritt 1: Tool „addRichContent“ in Ihrem Bot erstellen
Erstellen Sie ein Funktionstool namens addRichContent mit den folgenden Daten:
Tool-Eingabe:
properties: {}
type: object
Tool-Ausgabe:
properties:
status:
type: string
reason:
type: string
type: object
Schritt 2: Kundenservicemitarbeiter über die Verwendung des Tools informieren
Erläutern Sie dem Kundenservicemitarbeiter in einer Anleitung und anhand von Beispielen, wie er das Tool verwenden kann.
Fügen Sie Ihrer Anleitung 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 die Rich-Inhalte ist dieselbe, die Sie verwenden würden, wenn Sie eine benutzerdefinierte Nutzlast in einem flussbasierten virtuellen Kundenservicemitarbeiter zurückgeben würden.
Schritt 3: JavaScript definieren
Im Code der Seite, auf der df-messenger gehostet wird, müssen Sie JavaScript-Code erstellen, der eine Funktion definiert, die df-messenger anweist, den Rich-Content zu rendern.
Sie müssen diese Funktion auch bei df-messenger registrieren, damit sie ausgeführt wird, wenn der virtuelle Kundenservicemitarbeiter sie benötigt.
Die Variable dfMessenger muss deklariert sein und auf Ihre Instanz von df-messenger verweisen.
Hier ist ein 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);