Beim Erstellen einer benutzerdefinierten Karte Fulfillment, können Sie Textantworten und benutzerdefinierte Nutzlasten erstellen. Die Textantworten werden für Nur-Text- und Markdown-Agent-Antworten verwendet. und die benutzerdefinierten Nutzlasten werden für umfangreiche Antworten verwendet. Das benutzerdefinierte Nutzlastformat für alle Antworttypen hat die folgenden grundlegenden Struktur:
{
"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 sind einige Markdown-Elemente, Beispiele:
*Italic*
**Bold**
# Title
[Link text](Link URL)
![](Image 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, der folgen soll, wenn auf das Element geklickt wird |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers. Der 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. Die Der Antworttyp unterstützt einen Referenzchip, mit dem die Quelle des Bildes hinzugefügt werden kann. als Ankerlink zusammen mit einem kurzen Beschreibungstext und einem Symbol.
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 |
Im Referenz-Chip anzuzeigender Text |
reference.anchor.href |
string |
URL des Referenz-Chips |
reference.anchor.target |
string |
Das Ziel des Ankers im Referenzchip wird standardmäßig auf _blank gesetzt |
reference.image.rawUrl |
string |
Bild, das im Referenz-Chip 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 |
Videoantworttyp
Mit dem Antworttyp "Videoantwort" wird ein Videoelement gerendert, das entweder ein direktes Video von URL, direkt in der Messenger-Nachricht abgespielt oder über einen Link zu einem Video.
Name | Typ | Beschreibung |
---|---|---|
type |
string |
Antworttyp: „video“ |
title |
string |
Optionaler Videotitel |
source |
object |
Die Quelle des Videos |
source.type |
string |
Eine Art der Videoquelle, entweder link oder raw |
source.anchor |
object |
Anker, der folgen soll, wenn auf das Element geklickt wird |
source.embeddedPlayer |
string |
Ein Video des Typs link kann eingebettet werden, anstatt zur Webseite des Players zu verlinken. Diese Option ist nur für eine bekannte Gruppe von Playern implementiert und unterstützt youtube . |
source.thumbnail |
object |
Für anchor anzuzeigendes Thumbnail |
source.thumbnail.rawUrl |
string |
URL der Miniaturansicht |
source.rawUrl |
string |
URL für ein Video des Typs 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 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 | Rahmen 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 |
Das Bild für die Schaltfläche hat Vorrang vor icon |
image.rawUrl |
string |
Öffentliche URL des Bilds |
mode |
string |
Optional: Bei der Einstellung „Blockieren“ ist die Nutzereingabe deaktiviert, bis der Nutzer auf die Schaltfläche klickt. |
text |
string |
Text für die Schaltfläche |
anchor |
object |
Anker, der folgen soll, wenn auf das Element geklickt wird |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers. Der Standardwert ist _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 | Textfarbe einer Schaltfläche |
df-messenger-button-font-family |
Optional | „Google Sans“, „Helvetica Neue“, Sans Serif | 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; ermöglicht negative Werte, um den Abstand zu verschieben |
df-messenger-button-text-align |
Optional | center | Textausrichtung einer Schaltfläche |
df-messenger-button-text-wrap |
Optional | normal | Mit nowrap kannst du mehrzeilige Schaltflächen nicht zulassen |
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 |
Anker, der folgen soll, wenn auf das Element geklickt wird |
anchor.href |
string |
URL des Ankers |
anchor.target |
string |
Ziel des Ankers. Der 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:
Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
---|---|---|---|
df-messenger-list-padding |
Optional | 16 Pixel | Padding eines Listenelements |
df-messenger-list-inset |
Optional | 0 | Zusätzlicher horizontaler Einsatz des Listenelements (zusätzlich zum Abstand), um die Erweiterung 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: Bei der Einstellung „Blockieren“ ist 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: Anchor folgt, wenn auf das Element geklickt wird. |
options[].anchor.href |
string |
URL des Ankers |
options[].anchor.target |
string |
Ziel des Ankers. Der 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:
Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
---|---|---|---|
df-messenger-chips-spacing |
Optional | 10 Pixel | Leerzeichen über den Chips bis zur vorangehenden Nachricht |
df-messenger-chips-border-color |
Optional | #e0e0e0 | Rahmenfarbe eines Chips |
df-messenger-chips-border-color-hover |
Optional | #e0e0e0 | Rahmenfarbe eines Chips, wenn der Mauszeiger darauf bewegt wird |
df-messenger-chips-border-radius |
Optional | 999 Pixel | 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 Pixel 16 Pixel | Padding 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, wenn der Mauszeiger darauf bewegt wird |
df-messenger-chips-box-shadow |
Optional | 0 2px 2px 0 rgba(0, 0, 0, 0,24) | Box-Schatten eines Chips |
df-messenger-chips-content-align |
Optional | Flex-Start | Vertikale Ausrichtung der Inhalte (z.B. des Bildes) in einem Chip |
df-messenger-chips-text-wrap |
Optional | nowrap | normal verwenden, um mehrzeilige Chips zuzulassen |
Antworttyp „Zitationen“
Der Antworttyp „Zitationen“ liefert dem Endnutzer eine Liste von anklickbaren Elementen 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 |
Zitattitel |
citations[].subtitle |
string |
Untertitel des Zitats (derzeit ignoriert) |
citations[].anchor |
object |
Anker, der folgen soll, wenn auf das Element geklickt wird |
citations[].anchor.href |
string |
URL des Ankers |
citations[].anchor.target |
string |
Ziel des Ankers. Der 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:
Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
---|---|---|---|
df-messenger-citations-spacing |
Optional | 10 Pixel | Leerzeichen über den Zitationen der vorangehenden Nachricht |
df-messenger-citations-message-display |
Optional | Block | Legt die Anzeige der Zitationen der oben stehenden Notiz fest. Zulässige Werte sind block und none . |
df-messenger-citations-message-font-color |
Optional | #041e49 | Textfarbe der Notiz über Zitationen |
df-messenger-citations-message-font-size |
Optional | 12 Pixel | Textgröße der Notiz oben mit Zitaten |
df-messenger-citations-flex-direction |
Optional | Zeile | Flexible Richtungseigenschaft der Zitate, empfohlen wird row (horizontal mit Zeilenumbrüchen) oder column (vertikal) |
df-messenger-citations-border-color |
Optional | #1a73e8 | Rahmenfarbe einer Zitation |
df-messeenger-citations-border-color-hover |
Optional | #1a73e8 | Rahmenfarbe einer Zitation, wenn der Mauszeiger darauf bewegt wird |
df-messenger-citations-border-radius |
Optional | 4 Pixel | Rahmenradius eines Zitats |
df-messenger-citations-padding |
Optional | 8 Pixel | Padding eines Zitats |
df-messenger-citations-background |
Optional | Weiß | Hintergrund einer Zitation |
df-messenger-citations-background-hover |
Optional | RGBa(68, 71, 70, 0,08) | Hintergrund einer Zitation, wenn der Mauszeiger darauf bewegt wird |
df-messenger-citations-font-color |
Optional | #1a73e8 | Textfarbe einer Zitation |
df-messenger-citations-font-family |
Optional | „Google Sans“, „Helvetica Neue“, Sans Serif | Schriftfamilie einer Zitation |
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 Zitation |
df-messenger-citations-font-weight |
Optional | normal | Schriftstärke einer Zitation |
df-messenger-citations-font-weight-hover |
Optional | normal | Schriftstärke einer Zitation, wenn der Mauszeiger darauf bewegt wird |
df-messenger-citations-icon-spacing |
Optional | 4 Pixel | Abstand zwischen Symbol und Text in einer Zitation |
df-messenger-citations-box-shadow |
Optional | keine | Feldschatten einer Zitation |
Antworttyp „Dateien“
Mit dem Antworttyp „files“ wird eine Liste von Dateielementen gerendert, die einen Link zum Herunterladen.
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 Bild |
files[].anchor |
object |
Anker zum Herunterladen der Datei |
files[].anchor.href |
string |
URL des Ankers |
files[].anchor.target |
string |
Ziel des Ankers. Der 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'
}
}
]
}
]
]
}
Folgende CSS-Variablen können bereitgestellt werden:
Attribute | Eingaberichtlinie | Standardwert | Beschreibung |
---|---|---|---|
df-messenger-files-spacing |
Optional | 10 Pixel | Freiraum über der Datei bis zur vorangehenden Nachricht |
df-messenger-files-distance |
Optional | 8 Pixel | Abstand zwischen Dateien in der Liste |
df-messenger-files-flex-direction |
Optional | Zeile | Flexible Richtungseigenschaft der Dateien; empfohlen: 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 Pixel | Rahmenradius einer Datei |
df-messenger-files-box-shadow |
Optional | 0 2px 2px 0 rgba(0, 0, 0, 0,24) | Feldschatten einer Datei |
df-messenger-files-padding |
Optional | 6 Pixel 16 Pixel | Padding einer Datei |
df-messenger-files-font-color |
Optional | #1f1f1f | Schriftfarbe 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, wenn der Mauszeiger darauf bewegt wird |
df-messenger-files-border-hover |
Optional | 1px solid #e0e0e0 | Rahmen einer Datei, wenn der Mauszeiger darauf bewegt wird |
df-messenger-files-font-weight-hover |
Optional | normal | Schriftstärke einer Datei, wenn der Mauszeiger darauf bewegt wird |
df-messenger-files-image-offset |
Optional | 0 0 0 -8px | Versatz des Bilds auf der linken Seite |
df-messenger-files-image-size |
Optional | 18 Pixel | Größe des linken Bildes |
df-messenger-files-text-spacing |
Optional | 8 Pixel | Abstand zwischen Bildtext auf der linken Seite und Textsymbol auf der rechten Seite |
df-messenger-files-icon-offset |
Optional | 0–8 px 0 0 | Versatz 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 auf der rechten Seite |
HTML-Antworttyp
Der HTML-Antworttyp stellt dem Endnutzer eine HTML-Nachricht bereit.
In der folgenden Tabelle werden die Felder beschrieben:
Name | Typ | Beschreibung |
---|---|---|
type |
string |
Antworttyp: "html" |
html |
string |
Text der Nachricht, unterstützt HTML |
Unterstützte HTML-Tags:
a
– Ankerelement (zum Erstellen von Hyperlinks verwendet)b
– Fettdruck (für fett formatierten Text verwendet)i
– Kursiv formatiertes Element (für kursiv formatierten Text)u
– Unterstrichenes Element (wird zum Unterstreichen von Text verwendet)h1
– Element der Überschrift 1 (für die Hauptüberschrift einer Seite verwendet)h2
– Element der Überschrift 2 (für Zwischenüberschriften verwendet)h3
– Element der Überschrift 3 (für Unter-Zwischenüberschriften verwendet)p
: Absatzelement (zum Erstellen von Textabsätzen verwendet)br
– Zeilenumbruchelement (zum Erstellen von Zeilenumbrüchen in einem Absatz)table
– Tabellenelement (zum Erstellen von Tabellen verwendet)tr
: Tabellenzeilenelement (zum Erstellen von Zeilen in einer Tabelle verwendet)thead
– Kopfzeilenelement für Tabelle (wird zum Erstellen einer Kopfzeile in einer Tabelle verwendet)th
– Kopfzeilendaten oder Zellenelement der Tabelle (zum Erstellen von Zellen in Kopfzeilen einer Tabelle)tbody
: Tabellentextelement (wird zum Erstellen eines Textkörpers in einer Tabelle verwendet)td
– Tabellendaten oder Zellenelement (zum Erstellen von Zellen in einer Tabellenzeile)ul
– Ungeordnetes Listenelement (zum Erstellen von Aufzählungslisten verwendet)ol
– sortiertes Listenelement (zum Erstellen nummerierter Listen verwendet)li
– Listenelement (zum Erstellen von Elementen innerhalb einer Liste)img
– Bildelement (zur Darstellung eines Bildes verwendet, siehe auchurl-allowlist
HTML-Anpassung)div
– Containerelementspan
– Inline-Containerelement
Beispiel:
{
"richContent": [
[
{
"type": "html",
"html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
}
]
]
}
HTML und Markdown gestalten
Für Ankerelemente (HTML-a
-Element und Markdown-Link) können die folgenden CSS-Variablen bereitgestellt 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 Link-Elements |
df-messenger-link-hover-font-color |
Optional | #0b57d0 | Schriftfarbe beim Bewegen der Maus über ein Link-Element |
df-messenger-link-background |
Optional | Transparent | Hintergrund eines Link-Elements |
df-messenger-link-padding |
Optional | 0 | Padding eines Link-Elements |
df-messenger-link-border |
Optional | keine | Rahmen eines Linkelements |
df-messenger-link-border-radius |
Optional | 0 | Rahmenradius eines Linkelements |
Für Tabellenelemente (HTML-table
-Element und Markdown-Tabellen):
können Variablen bereitgestellt 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 | Ausrichtung von Text in einer Tabellenzelle |
df-messenger-table-padding |
Optional | 0 | Padding in einer Tabellenzelle |
df-messenger-table-border-collapse |
Optional | trennen | Minimierungsmodus der Rahmen einer Tabelle – mit separate aktivieren Sie border-radius |
df-messenger-table-border-radius |
Optional | 0 | Rahmenradius einer Tabelle |
df-messenger-table-header-border-radius |
Optional | 0 | Rahmenradius der Kopfzeile der Tabelle |
df-messenger-table-border-top |
Optional | keine | Rahmen einer Tabellenzeile |
df-messenger-table-border-top-first |
Optional | keine | Rahmen der ersten Tabellenzeile |
df-messenger-table-border-bottom |
Optional | keine | Rahmenlinie am unteren Rand einer Tabellenzeile |
df-messenger-table-border-bottom-last |
Optional | keine | Rahmen der letzten Tabellenzeile |
df-messenger-table-border-left |
Optional | keine | Rahmen links von einer Tabellenzelle |
df-messenger-table-border-left-first |
Optional | keine | Rahmen links von der ersten Tabellenzelle in einer Zeile |
df-messenger-table-border-right |
Optional | keine | Rahmenlinie rechts von einer Tabellenzelle |
df-messenger-table-border-right-last |
Optional | keine | Rahmenlinie 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 geraden nummerierten Tabellenzeilen |
df-messenger-table-odd-background |
Optional | Transparent | Hintergrund von ungeraden nummerierten Tabellenzeilen |
df-messenger-table-header-font-size |
Optional | 14 Pixel | Textgröße in einem Kopfzeilenelement einer Tabelle |
df-messenger-table-header-font-weight |
Optional | fett | Schriftstärke in Kopfzeilenelement der Tabelle |
df-messenger-table-header-font-color |
Optional | #1f1f1f | Textfarbe in einem Kopfzeilenelement einer Tabelle |
df-messenger-table-header-align |
Optional | links | Ausrichtung von Text in einer Kopfzeilenzelle einer Tabelle |
df-messenger-table-header-padding |
Optional | 0 | Padding in einer Kopfzeilenzelle einer Tabelle |
df-messenger-table-header-border-top |
Optional | keine | Rahmen der Kopfzeile der Tabelle |
df-messenger-table-header-border-bottom |
Optional | keine | Rand der Kopfzeile der Tabelle |
df-messenger-table-header-border-left |
Optional | keine | Rahmen links einer Zelle in der Kopfzeile der Tabelle |
df-messenger-table-header-border-left-first |
Optional | keine | Rahmen links von der ersten Zelle in der Kopfzeile der Tabelle |
df-messenger-table-header-border-right |
Optional | keine | Rahmenlinie rechts neben einer Zelle in der Kopfzeile der Tabelle |
df-messenger-table-header-border-right-last |
Optional | keine | Rahmenlinie rechts neben der letzten Zelle in einer Tabellenkopfzeile |
df-messenger-table-header-background |
Optional | Transparent | Hintergrund der Kopfzeile der Tabelle |
Antworttyp der benutzerdefinierten Vorlage
Der Antworttyp der benutzerdefinierten Vorlage rendert benutzerdefiniertes Element die auf der Website des Kunden definiert sind. Das Element wird nicht in eine Karte platziert und steht immer für sich allein.
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 registriert werden.
aus dem Feld name
der Antwort. Das Feld payload
wird an
Das benutzerdefinierte Element nach der Konstruktion (aber vor connectedCallback
) als dfPayload
festlegen. Das Feld kann beliebige JSON-Daten enthalten. Außerdem ist dfResponseId
an das Element übergeben wird.
Hier sehen Sie anhand der Antwort aus dem Beispiel eine beispielhafte Implementierung eines Benutzerdefiniertes Element:
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 Messenger können verwendet werden, um eine benutzerdefinierte Karte zu erstellen, die Ihren Anforderungen entspricht.
Hier ist ein Beispiel mit einigen der im Abschnitt 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 | Padding von Elementen auf 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 oben links 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 unten links auf einer benutzerdefinierten Karte |
df-messenger-card-border-bottom-right-radius |
Optional | 8 Pixel | Rahmenradius unten rechts auf einer Karte |
df-messenger-card-stack-border-top-left-radius |
Optional | 8 Pixel | Der Rahmenradius für aufeinanderfolgende benutzerdefinierte Karten oben links überschreibt den oberen linken Radius |
df-messenger-card-stack-border-top-right-radius |
Optional | 8 Pixel | Der Rahmenradius für aufeinanderfolgende benutzerdefinierte Karten oben rechts hat Vorrang vor dem Radius oben rechts |
df-messenger-card-stack-border-bottom-left-radius |
Optional | 8 Pixel | Rahmenradius unten links für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius unten links |
df-messenger-card-stack-border-bottom-right-radius |
Optional | 8 Pixel | Rahmenradius unten rechts für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius unten rechts |
df-messenger-card-box-shadow |
Optional | 0 2px 2px 0 rgba(0, 0, 0, 0,24) | Rahmenschatten einer benutzerdefinierten Karte |