Dialogflow Messenger-Auftragsausführung

Wenn Sie die Auftragsausführung einer benutzerdefinierten Karte erstellen, können Sie Textantworten und benutzerdefinierte Nutzlasten erstellen. Die Textantworten werden für Nur-Text- und Markdown-Agent-Antworten und die benutzerdefinierten Nutzlasten für umfassende Antworten verwendet. 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

Screenshot: Dialogflow Messenger-Text

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

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

  • ![](Image URL)

  • Tabellen:

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

Antworttyp "info"

Screenshot des Dialogflow Messenger-infotyps

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 Untertitel der Karte
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"

Screenshot des Dialogflow Messenger-Beschreibungstyps

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"

Screenshot vom Dialogflow Messenger-Bildtyp

Der Antworttyp "image" ist eine Bildkarte, auf die Nutzer klicken oder tippen können. Der Antworttyp unterstützt einen Referenzchip, mit dem die Bildquelle als Ankerlink zusammen mit einem kurzen Beschreibungstext 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 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

Screenshot des Dialogflow Messenger-Videotyps

Mit dem Videoantworttyp wird ein Videoelement gerendert, das entweder ein direktes Video von einer URL sein kann, das direkt im Messenger abgespielt 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 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"

Screenshot des Dialogflow Messenger-Schaltflächentyps

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"

Screenshot des Dialogflow Messenger-Listentyps

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 Ausweitung 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"

Screenshot: Dialogflow Messenger-Akkordeontyp

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"

Screenshot des Dialogflow Messenger-Chiptyps

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“

Screenshot des Dialogflow Messenger-Zitationstyps

Der Antworttyp „Zitationen“ liefert dem Endnutzer eine Liste anklickbarer Zitationslinks.

In der folgenden Tabelle werden die Felder beschrieben:

Name Typ Beschreibung
type string Antworttyp: „match_citations“
citations array<object> Array von Citation-Objekten
citations[].title string 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 oben mit Zitaten
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“

Screenshot vom Dialogflow Messenger-Dateityp

Mit dem Antworttyp „files“ wird eine Liste von Dateielementen gerendert, die einen Link zum Herunterladen enthalten.

In der folgenden Tabelle werden die Felder beschrieben:

Name Typ Beschreibung
type string Antworttyp: „files“
files array<object> Array von File-Objekten
files[].name string Dateiname
files[].image object Dateibild
files[].image.rawUrl string Öffentliche Datei-URL für 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

Screenshot des Dialogflow Messenger-HTML-Typs

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 – Daten- 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 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 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 Unterstrich 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 die folgenden CSS-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

Screenshot des benutzerdefinierten Vorlagentyps in Dialogflow Messenger

Der Antworttyp der benutzerdefinierten Vorlage rendert ein benutzerdefiniertes Element, das auf der Website des Kunden definiert ist. 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 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 sehen Sie eine Implementierung eines benutzerdefinierten Elements anhand der Antwort aus dem Beispiel:

class CustomElementExample extends HTMLElement {
  constructor() {
    super();
    // The `dfPayload` field will be provided before `connectedCallback` is
    // being called.
    this.dfPayload = null;
    // The `dfResponseId` field will be provided before `connectedCallback` is
    // being called.
    this.dfResponseId = null;
    // It is not strictly required but recommended to contain the custom
    // element in a shadow root.
    // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot
    this.renderRoot = this.attachShadow({mode: 'open'});
  }

  /** Web component Lifecycle method. */
  connectedCallback() {
    const div = document.createElement('div');

    // The `.text` must match the payload's structure in `richContent.payload`.
    div.innerText = this.dfPayload.text;

    this.renderRoot.appendChild(div);
  }
}

(function() {
  // Registers the element. This name must match the name in
  // `richContent.payload`.
  customElements.define('custom-element-example', CustomElementExample);
})();

Antworttypen kombinieren

Screenshot der benutzerdefinierten Dialogflow Messenger-Karte

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 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 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