Einige Produkte und Funktionen werden umbenannt. Außerdem werden die Funktionen für generative Playbooks und Flows zu einer einzigen konsolidierten Konsole migriert.

Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Dialogflow CX-Messenger-Auftragsausführung

Wenn Sie eine benutzerdefinierte Karte für die Ausführung erstellen, können Sie Textantworten und benutzerdefinierte Nutzlasten erstellen. Textantworten werden für Nur-Text- und Markdown-Agent-Antworten verwendet. Benutzerdefinierte Nutzlasten werden für Rich-Antworten verwendet. Das benutzerdefinierte Nutzlastformat für alle Antworttypen hat die folgende grundlegende Struktur:

{
  "richContent": [
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ],
    [
      {
        "type": "type-id",
        ...
      },
      {
        "type": "type-id",
        ...
      }
    ]
  ]
}

In den folgenden Abschnitten werden die verschiedenen Antworttypen beschrieben, die Sie für eine benutzerdefinierte Nutzlast konfigurieren können.

Textantwort

Screenshot: Dialogflow CX Messenger-Text

Die Textantwort unterstützt Nur-Text und Markdown. Hier einige Markdown-Beispiele:

*Italic*
**Bold**
# Title
[Link text](Link URL)
![](Image URL)

Hinweis: Wenn Sie Bilder in Markdown aktivieren möchten, müssen Sie das Attribut url-allowlist angeben.

Tabellen:

Header 1 | Header 2
-------- | --------
Cell 1   | Cell 2

Antworttyp "info"

Screenshot des Dialogflow CX Messenger-Infotyps

Der Antworttyp „info“ ist eine informative 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`	Untertitel der Karte.
`image`	`object`	Bild.
`image.rawUrl`	`string`	Öffentliche URL für das Bild.
`anchor`	`object`	Anker, dem beim Klicken auf das Element gefolgt werden soll.
`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"

Screenshot des Dialogflow CX Messenger-Beschreibungstyps

Der Antworttyp „Beschreibung“ ist eine informative Karte, auf der Sie mehrere Textzeilen anzeigen können.

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"

Screenshot des Dialogflow CX Messenger-Bildtyps

Der Antworttyp "image" ist eine Bildkarte, auf die Nutzer klicken oder tippen können. Der Antworttyp unterstützt einen Referenz-Chip, mit dem Sie die Quelle des Bildes als Ankerlink zusammen mit einem kurzen beschreibenden Text und einem Symbol hinzufügen können.

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	`string`	Antworttyp: „image“.
`rawUrl`	`string`	Öffentliche URL für das Bild.
`accessibilityText`	`string`	Alt-Text für das Bild.
`reference.text`	`string`	Text, der im Referenz-Chip angezeigt werden soll.
`reference.anchor.href`	`string`	URL des Referenz-Chips.
`reference.anchor.target`	`string`	Ziel des Ankers im Referenz-Chip, standardmäßig `_blank`.
`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"
          }
        }
      }
    ]
  ]
}

Sie können die folgenden CSS-Variablen verwenden:

Attribute	Eingaberichtlinie	Standardwert	Beschreibung
`df-messenger-image-border-radius`	Optional	8 Pixel	Rahmenradius des Bildes.

Videoantworttyp

Screenshot des Dialogflow CX Messenger-Videotyps

Der Antworttyp „Video“ rendert ein Videoelement, das ein direktes Video von einer URL sein kann, das direkt im Messenger abgespielt wird, oder ein Link zu einem Video.

In der folgenden Tabelle werden die Felder beschrieben:

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 ist nur für eine bekannte Gruppe von Playern implementiert und unterstützt `youtube`.
`source.thumbnail`	`object`	Miniaturansicht, die für `anchor` angezeigt werden soll.
`source.thumbnail.rawUrl`	`string`	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=example"
          }
        }
      }
    ]
  ]
}

Sie können die folgenden CSS-Variablen verwenden:

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 px	Breite eines eingebetteten Videos (begrenzt durch `max-width\: 100%`).
`df-messenger-video-embed-height`	Optional	315 px	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 ein kleiner Button mit einem Symbol, auf den Sie 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 Schaltfläche.
`icon.type`	`string`	Symbol aus der Material Design-Symbolbibliothek. Das Standardsymbol ist ein Pfeil.
`icon.color`	`string`	Hexadezimalcode der Farbe.
`image`	`object`	Bild für die Schaltfläche, hat Vorrang vor `icon`.
`image.rawUrl`	`string`	Öffentliche URL für das Bild der Schaltfläche.
`mode`	`string`	Optional. Wenn „blocking“ festgelegt ist, wird die Nutzereingabe deaktiviert, bis der Nutzer auf die Schaltfläche klickt.
`text`	`string`	Text des Buttons.
`anchor`	`object`	Anker, dem beim Klicken auf das Element gefolgt werden soll.
`anchor.href`	`string`	URL des Ankers.
`anchor.target`	`string`	Ziel des Ankers, standardmäßig `_blank`.
`event`	`object`	Dialogflow CX-Ereignis, das ausgelöst wird, wenn auf den Button geklickt wird

Beispiel:

{
  "richContent": [
    [
      {
        "type": "button",
        "icon": {
          "type": "chevron_right",
          "color": "#FF9800"
        },
        "mode": "blocking",
        "text": "Button text",
        "anchor": {
          "href": "https://example.com"
        },
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

Sie können die folgenden CSS-Variablen verwenden:

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	Padding eines Buttons.
`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 Button-Symbols.
`df-messenger-button-image-size`	Optional	24 Pixel	Größe des Button-Bilds.
`df-messenger-button-image-offset`	Optional	0	Versatz des Schaltflächenbilds. Negative Werte sind zulässig, um den Abstand auszugleichen.
`df-messenger-button-text-align`	Optional	center	Textausrichtung einer Schaltfläche.
`df-messenger-button-text-wrap`	Optional	normal	Verwenden Sie `nowrap`, um mehrzeilige Schaltflächen zu deaktivieren.

Antworttyp "list"

Screenshot des Listentyps in Dialogflow CX Messenger

Der Antworttyp „Liste“ ist eine Karte, auf der Sie aus mehreren Optionen auswählen können. Die Antwort enthält ein Array von list- und divider-Antworttypen.

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, dem beim Klicken auf das Element gefolgt werden soll.
`anchor.href`	`string`	URL des Ankers.
`anchor.target`	`string`	Ziel des Ankers, standardmäßig `_blank`.
`image`	`object`	Bild.
`image.rawUrl`	`string`	Öffentliche URL für das Referenzbild.
`event.event`	`string`	Name des Ereignisses, das ausgelöst wird, wenn auf die Option geklickt wird.

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": ""
        }
      }
    ]
  ]
}

Sie können die folgenden CSS-Variablen verwenden:

Attribute	Eingaberichtlinie	Standardwert	Beschreibung
`df-messenger-list-padding`	Optional	16 Pixel	Abstand eines Listenelements.
`df-messenger-list-inset`	Optional	0	Zusätzlicher horizontaler „Einzug“ 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	Trennlinie zwischen Listenelementen.

Antworttyp "accordion"

Screenshot des Dialogflow CX Messenger-Akkordeontyps

Der Antworttyp „accordion“ ist eine kleine Karte, auf die Sie tippen oder klicken können, um sie zu maximieren und mehr Text anzuzeigen.

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	`string`	Antworttyp: „Akkordeon“.
`title`	`string`	Titel des Akkordeons.
`subtitle`	`string`	Untertitel des Akkordeons.
`image`	`object`	Bild.
`image.rawUrl`	`string`	Öffentliche URL für das Bild.
`text`	`string`	Akkordeontext.

Beispiel:

{
  "richContent": [
    [
      {
        "type": "accordion",
        "title": "Accordion title",
        "subtitle": "Accordion subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "text": "Accordion text"
      }
    ]
  ]
}

Antworttyp "chips"

Screenshot: Dialogflow CX Messenger-Chips-Typ

Mit dem Antworttyp „Vorschlags-Chip“ können Sie eine Liste anklickbarer Vorschlags-Chips bereitstellen.

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 die Richtlinie auf „Blockieren“ festgelegt ist, wird die Nutzereingabe deaktiviert, bis der Nutzer auf den Chip klickt.
`options[].text`	`string`	Text der Option.
`options[].image`	`object`	Optional. Bild.
`options[].image.rawUrl`	`string`	Optionale öffentliche URL für das Bild.
`options[].anchor`	`object`	Optional. Anker, 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"
            }
          }
        ]
      }
    ]
  ]
}

Sie können die folgenden CSS-Variablen angeben:

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	6px 16px	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 beim Bewegen des Mauszeigers darauf.
`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	Verwenden Sie `normal`, um mehrzeilige Chips zuzulassen.

Antworttyp „Zitate“

Screenshot des Zitationstyps in Dialogflow CX Messenger

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 Zitationsobjekten.
`citations[].title`	`string`	Titel des Zitats.
`citations[].subtitle`	`string`	Untertitel des Zitats (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, 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"
            }
          }
        ]
      }
    ]
  ]
}

Sie können die folgenden CSS-Variablen verwenden:

Attribute	Eingaberichtlinie	Standardwert	Beschreibung
`df-messenger-citations-spacing`	Optional	10 Pixel	Abstand über den Quellenangaben zur vorherigen Nachricht.
`df-messenger-citations-message-display`	Optional	Block	Definiert die Anzeige des Hinweises über den Zitaten. Zulässige Werte sind `block` oder `none`.
`df-messenger-citations-message-font-color`	Optional	#041e49	Textfarbe des Hinweises über den Zitationen.
`df-messenger-citations-message-font-size`	Optional	12 Pixel	Textgröße des Hinweises über den Zitationen.
`df-messenger-citations-flex-direction`	Optional	Zeile	Flex-Direction-Property der Zitate. Wir empfehlen, `row` (horizontal mit Zeilenumbrüchen) oder `column` (vertikal) zu verwenden.
`df-messenger-citations-border-color`	Optional	#3279f9	Rahmenfarbe eines Zitats.
`df-messeenger-citations-border-color-hover`	Optional	#3279f9	Rahmenfarbe eines Zitats beim Bewegen des Mauszeigers darauf.
`df-messenger-citations-border-radius`	Optional	4 Pixel	Rahmenradius einer Zitation.
`df-messenger-citations-padding`	Optional	8 Pixel	Padding einer Zitation.
`df-messenger-citations-background`	Optional	Weiß	Hintergrund einer Zitation.
`df-messenger-citations-background-hover`	Optional	`rgba(68, 71, 70, 0.08)`	Hintergrund eines Zitats, wenn der Mauszeiger darauf bewegt wird.
`df-messenger-citations-font-color`	Optional	#3279f9	Textfarbe eines Zitats.
`df-messenger-citations-font-family`	Optional	"Google Sans", "Helvetica Neue", sans-serif	Schriftfamilie eines Zitats.
`df-messenger-citations-font-size`	Optional	11 Pixel	Textgröße eines Zitats.
`df-messenger-citations-icon-font-size`	Optional	14 Pixel	Textgröße des Symbols eines Zitats.
`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 Quellenangabe.
`df-messenger-citations-box-shadow`	Optional	Keine	Rahmenschatten einer Zitation.

Antworttyp für Dateien

Screenshot: Dialogflow CX Messenger-Dateityp

Der Antworttyp „Dateien“ rendert eine Liste von Dateielementen, die Sie herunterladen können. Der Nutzer kann die Datei herunterladen, indem er auf das Ankerelement klickt.

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`	Bilddatei.
`files[].image.rawUrl`	`string`	Öffentliche URL der Bilddatei.
`files[].anchor`	`object`	Anker, 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-Direction-Attribut der Dateien. Es wird empfohlen, `row` (horizontal mit Zeilenumbrüchen) oder `column` (vertikal) zu verwenden.
`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 2px 2px 0 `rgba(0, 0, 0, 0.24)`	Rahmenschatten einer Datei.
`df-messenger-files-padding`	Optional	6px 16px	Padding 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, 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 Bildes 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	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

Screenshot des HTML-Typs von Dialogflow CX Messenger

Der HTML-Antworttyp stellt dem Nutzer eine HTML-Nachricht bereit.

In der folgenden Tabelle werden die Felder beschrieben:

Name	Typ	Beschreibung
`type`	`string`	Antworttyp: „html“.
`html`	`string`	Textinhalt der Nachricht, HTML wird unterstützt.

Unterstützte HTML-Tags:

a: Ankerelement (zum Erstellen von Hyperlinks verwendet)
b: Element für Fettdruck (zum Formatieren von Text in Fettdruck)
i: Kursives Element (zum Kursivieren von Text).
u: Unterstreichungselement (zum Unterstreichen von Text).
h1 – Überschrift 1 (für die Hauptüberschrift einer Seite verwendet).
h2: Überschrift 2-Element (für Unterüberschriften verwendet).
h3 – Überschrift 3-Element (für Unter-Unterüberschriften verwendet).
p – Absatz-Element (zum Erstellen von Textabsätzen).
br – Zeilenumbruchelement (wird verwendet, um Zeilenumbrüche innerhalb eines Absatzes zu erstellen).
table: Tabellenelement (zum Erstellen von Tabellen).
tr: Tabellenzeilenelement (zum Erstellen von Zeilen in einer Tabelle).
thead: Tabellenkopf-Element (zum Erstellen eines Headers in einer Tabelle).
th: Tabellenkopfdaten oder Zellenelement (zum Erstellen von Zellen innerhalb einer Tabellenkopfzeile).
tbody: Tabellenkörper-Element (zum Erstellen eines Körpers innerhalb einer Tabelle).
td – Tabellendaten- oder Zellenelement (zum Erstellen von Zellen innerhalb einer Tabellenzeile).
ul: Element für eine unsortierte Liste (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 Bildes, siehe auch url-allowlist HTML-Anpassung).
div: Containerelement.
span – Inline-Containerelement.

Beispiel:

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>"
      }
    ]
  ]
}

HTML und Markdown formatieren

Für Ankerelemente, einschließlich HTML-a-Elementen und Markdown-Links, können Sie die folgenden CSS-Variablen angeben:

Attribute	Eingaberichtlinie	Standardwert	Beschreibung
`df-messenger-link-decoration`	Optional	Unterstrichen	Gestaltung eines Link-Elements.
`df-messenger-link-font-color`	Optional	#0b57d0	Schriftfarbe eines noch nicht besuchten Link-Elements.
`df-messenger-link-visited-font-color`	Optional	#0b57d0	Schriftfarbe eines besuchten Link-Elements.
`df-messenger-link-hover-font-color`	Optional	#0b57d0	Schriftfarbe, wenn der Mauszeiger auf ein Link-Element bewegt wird.
`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 Link-Elements.
`df-messenger-link-border-radius`	Optional	0	Rahmenradius eines Link-Elements.

Sie können die folgenden CSS-Variablen für Tabellenelemente (HTML-table-Element und Markdown-Tabellen) verwenden:

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 des Texts in einer Tabellenzelle.
`df-messenger-table-padding`	Optional	0	Abstand in einer Tabellenzelle.
`df-messenger-table-border-collapse`	Optional	separate	Modus „Rahmen zusammenfassen“ 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 Tabellenkopfzeile.
`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	Unterer Rahmen der letzten Tabellenzeile.
`df-messenger-table-border-left`	Optional	Keine	Rahmenlinie links von einer Tabellenzelle.
`df-messenger-table-border-left-first`	Optional	Keine	Rahmenlinie links von 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	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 ungerader Tabellenzeilen.
`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 Tabellenüberschriftenelement.
`df-messenger-table-header-font-color`	Optional	#1f1f1f	Textfarbe in einem Tabellenkopfzeilenelement.
`df-messenger-table-header-align`	Optional	links	Ausrichtung des Texts in einer Tabellenkopfzelle.
`df-messenger-table-header-padding`	Optional	0	Abstand in einer Tabellenkopfzelle.
`df-messenger-table-header-border-top`	Optional	Keine	Oberer Rahmen der Kopfzeile der Tabelle.
`df-messenger-table-header-border-bottom`	Optional	Keine	Unterer Rahmen der Kopfzeile der Tabelle.
`df-messenger-table-header-border-left`	Optional	Keine	Rahmen links von einer Zelle in der Tabellenkopfzeile.
`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	Rechter Rahmen einer Zelle in der Tabellenkopfzeile.
`df-messenger-table-header-border-right-last`	Optional	Keine	Rahmen rechts neben der letzten Zelle in einer Tabellenkopfzeile.
`df-messenger-table-header-background`	Optional	transparent	Hintergrund der Kopfzeile der Tabelle.

Antworttyp für benutzerdefinierte Vorlage

Screenshot des benutzerdefinierten Vorlagentyps für Dialogflow CX Messenger

Der Antworttyp „Benutzerdefinierte Vorlage“ rendert ein auf Ihrer Website definiertes benutzerdefiniertes Element. Das Element wird nicht in einer 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 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 beliebige JSON-Daten enthalten. Außerdem wird dfResponseId an das Element übergeben.

Hier ist eine Beispielimplementierung eines benutzerdefinierten Elements, die die Antwort aus dem Beispiel verwendet:

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

Screenshot einer benutzerdefinierten Dialogflow CX Messenger-Karte

Sie können die einzelnen Rich-Message-Elemente für Dialogflow CX Messenger verwenden, um eine benutzerdefinierte Karte zu erstellen, die Ihren Anforderungen entspricht.

Hier ist ein Beispiel, in dem einige der im Abschnitt „Auftragsausführung“ aufgeführten Elemente verwendet werden:

{
  "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"
            }
          }
        ]
      }
    ]
  ]
}

Sie können die folgenden CSS-Variablen verwenden:

Attribute	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	Rahmenradius oben links einer benutzerdefinierten Karte.
`df-messenger-card-border-top-right-radius`	Optional	8 Pixel	Rahmenradius oben rechts einer benutzerdefinierten Karte.
`df-messenger-card-border-bottom-left-radius`	Optional	8 Pixel	Rahmenradius unten links einer benutzerdefinierten Karte.
`df-messenger-card-border-bottom-right-radius`	Optional	8 Pixel	Rahmenradius unten rechts einer benutzerdefinierten Karte.
`df-messenger-card-stack-border-top-left-radius`	Optional	8 Pixel	Der Rahmenradius oben links für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius oben links.
`df-messenger-card-stack-border-top-right-radius`	Optional	8 Pixel	Der Rahmenradius oben rechts für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius oben rechts.
`df-messenger-card-stack-border-bottom-left-radius`	Optional	8 Pixel	Der Rahmenradius unten links für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius unten links.
`df-messenger-card-stack-border-bottom-right-radius`	Optional	8 Pixel	Der 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.

Rich Content aus einem Playbook-Tool

Verwenden Sie Playbook-Tools, um Rich Content an Dialogflow CX Messenger zu senden.

Schritt 1: Tool „addRichContent“ im Agenten erstellen

Verwenden Sie die folgenden Daten, um ein Funktionstool namens addRichContent zu erstellen:

Tooleingabe:

properties: {}
type: object

Toolausgabe:

properties:
  status:
    type: string
  reason:
    type: string
type: object

Schritt 2: Dem KI-Agenten mitteilen, wie er dieses Tool verwenden soll

Erklären Sie Ihrem KI-Agenten in Anweisungen und Beispielen, 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:

Beispiel für Rich Content für Dialogflow CX Messenger

Schritt 3: JavaScript definieren

Erstellen Sie im Code für die Seite, auf der df-messenger gehostet wird, JavaScript-Code, der eine Funktion definiert, die df-messenger anweist, den Rich Content zu rendern. Registrieren Sie diese Funktion bei df-messenger, 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 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);

Dialogflow CX-Messenger-Auftragsausführung Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Textantwort

Antworttyp "info"

Antworttyp "description"

Antworttyp "image"

Videoantworttyp

Antworttyp "button"

Antworttyp "list"

Antworttyp "accordion"

Antworttyp "chips"

Antworttyp „Zitate“

Antworttyp für Dateien

HTML-Antworttyp

HTML und Markdown formatieren

Antworttyp für benutzerdefinierte Vorlage

Antworttypen kombinieren

Rich Content aus einem Playbook-Tool

Schritt 1: Tool „addRichContent“ im Agenten erstellen

Schritt 2: Dem KI-Agenten mitteilen, wie er dieses Tool verwenden soll

Schritt 3: JavaScript definieren

Dialogflow CX-Messenger-Auftragsausführung