Dialogflow CX Messenger-Auftragsausführung

Beim Erstellen einer Auftragsausführung für eine benutzerdefinierte Karte können Sie Textantworten und benutzerdefinierte Nutzdaten erstellen. Die Textantworten werden für nur Text und Markdown-Agentantworten verwendet und die benutzerdefinierten Nutzlasten für Rich-Antworten. Das benutzerdefinierte Nutzlastformat für alle Antworttypen hat die 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

Screenshot: Dialogflow Messenger-Text

Die Textantwort unterstützt Nur-Text und Markdown. Hier 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 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"

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 des Bildtyps in Dialogflow Messenger

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 Referenzchips
reference.anchor.target string Ziel des Ankers im Referenz-Chip, standardmäßig _blank
reference.image.rawUrl string Bild, das im Referenzchip angezeigt werden soll

Beispiel:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo",
        "reference": {
          "text": "Logo",
          "anchor": {
            "href": "https://example.com/images/logo.png"
          },
          "image": {
            "rawUrl": "https://example.com/images/logo_small.png"
          }
        }
      }
    ]
  ]
}

Die folgenden CSS-Variablen können bereitgestellt werden:

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

Videoantworttyp

Screenshot des Dialogflow Messenger-Videotyps

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 vom Typ link kann eingebettet werden, anstatt einen Link zur Webseite des Players zu enthalten. 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 auf max-width\: 100%)
df-messenger-video-height Optional automatisch Höhe eines Videos
df-messenger-video-embed-width Optional 560 Pixel Breite eines eingebetteten Videos (begrenzt auf max-width\: 100%)
df-messenger-video-embed-height Optional 315 Pixel Höhe eines eingebetteten Videos
df-messenger-video-border Optional 1px solid #e0e0e0 Rand des Videos
df-messenger-video-border-radius Optional 8 Pixel Rahmenradius des Videos

Antworttyp "button"

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 Bild für die Schaltfläche, hat Vorrang vor icon
image.rawUrl string Öffentliche URL des Bilds
mode string Optional: Wenn „blockieren“ festgelegt ist, ist die Nutzereingabe deaktiviert, bis der Nutzer auf die Schaltfläche klickt.
text string Text für die Schaltfläche
anchor object Anchor, dem beim Klicken auf das Element zu folgen ist
anchor.href string URL des Ankers
anchor.target string Ziel des Ankers. 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, standardmäßig _blank
image object Bild
image.rawUrl string Öffentliche URL des Bilds

In der folgenden Tabelle wird der Typ divider beschrieben:

Name Typ Beschreibung
type string Antworttyp: "divider"

Beispiel:

{
  "richContent": [
    [
      {
        "type": "list",
        "title": "List item 1 title",
        "subtitle": "List item 1 subtitle",
        "event": {
          "event": ""
        }
      },
      {
        "type": "list",
        "title": "List item 2 title",
        "subtitle": "List item 2 subtitle",
        "event": {
          "event": ""
        }
      }
    ]
  ]
}

Die folgenden CSS-Variablen können bereitgestellt werden:

Attribute Eingaberichtlinie Standardwert Beschreibung
df-messenger-list-padding Optional 16 Pixel Padding eines Listenelements
df-messenger-list-inset Optional 0 Zusätzlicher horizontaler „Einzug“ des Listenelements (zusätzlich zum Abstand), um die Ausdehnung des Rahmens zwischen den Elementen zu steuern
df-messenger-list-spacing Optional 10 Pixel 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: Bild für die Option
options[].image.rawUrl string Öffentliche URL des Bilds für die Option
options[].anchor object Optional: Anchor, dem beim Klicken auf das Element gefolgt werden soll
options[].anchor.href string URL des Ankers
options[].anchor.target string Ziel des Ankers. 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 Abstand über den Chips zur vorherigen Nachricht
df-messenger-chips-border-color Optional #e0e0e0 Rahmenfarbe eines Chips
df-messenger-chips-border-color-hover Optional #e0e0e0 Rahmenfarbe eines Chips beim Bewegen des Mauszeigers darauf
df-messenger-chips-border-radius Optional 999 px Rahmenradius eines Chips
df-messenger-chips-background Optional Weiß Hintergrund eines Chips
df-messenger-chips-background-hover Optional rgba(68, 71, 70, 0.08) Hintergrund eines Chips, wenn der Mauszeiger darauf bewegt wird
df-messenger-chips-padding Optional 6 px 16 px Padding eines Chips
df-messenger-chips-font-color Optional Schwarz Textfarbe eines Chips
df-messenger-chips-font-family Optional „Google Sans“, „Helvetica Neue“, serifenlos Schriftfamilie eines Chips
df-messenger-chips-font-size Optional 14 Pixel Textgröße eines Chips
df-messenger-chips-font-weight Optional normal Schriftstärke eines Chips
df-messenger-chips-font-weight-hover Optional normal Schriftstärke eines Chips, wenn der Mauszeiger darauf bewegt wird
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 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 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 der Quelle (wird 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 Leerraum über den Zitaten der vorherigen Nachricht
df-messenger-citations-message-display Optional Block Legt die Anzeige der Zitationen oben in der Notiz fest. Zulässige Werte sind block und none.
df-messenger-citations-message-font-color Optional #041e49 Schriftfarbe des Hinweises über den Quellenangaben
df-messenger-citations-message-font-size Optional 12 Pixel Textgröße der Anmerkung über den Zitaten
df-messenger-citations-flex-direction Optional Zeile Flexible Richtungseigenschaft der Zitate, empfohlen wird row (horizontal mit Zeilenumbrüchen) oder column (vertikal)
df-messenger-citations-border-color Optional #1a73e8 Rahmenfarbe einer Quelle
df-messeenger-citations-border-color-hover Optional #1a73e8 Rahmenfarbe einer Quelle beim Hovern
df-messenger-citations-border-radius Optional 4 Pixel Rahmenradius einer Quelle
df-messenger-citations-padding Optional 8 Pixel Einzug einer Quelle
df-messenger-citations-background Optional Weiß Hintergrund einer Quelle
df-messenger-citations-background-hover Optional rgba(68, 71, 70, 0.08) Hintergrund einer Quelle, wenn der Mauszeiger darauf bewegt wird
df-messenger-citations-font-color Optional #1a73e8 Textfarbe einer Zitation
df-messenger-citations-font-family Optional „Google Sans“, „Helvetica Neue“, serifenlos Schriftfamilie einer Quelle
df-messenger-citations-font-size Optional 11 Pixel Textgröße einer Zitation
df-messenger-citations-icon-font-size Optional 14 Pixel Textgröße des Symbols einer Quelle
df-messenger-citations-font-weight Optional normal Schriftstärke einer 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 Schatten für eine Quelle

Antworttyp „Dateien“

Screenshot vom Dialogflow Messenger-Dateityp

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'
            }
          }
        ]
      }
    ]
  ]
}

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 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 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 6 Pixel 16 Pixel Padding einer Datei
df-messenger-files-font-color Optional #1f1f1f Textfarbe einer Datei
df-messenger-files-font-family Optional „Google Sans“, „Helvetica Neue“, serifenlos Schriftfamilie einer Datei
df-messenger-files-font-size Optional 14 Pixel Textgröße einer Datei
df-messenger-files-font-weight Optional normal Schriftstärke einer Datei
df-messenger-files-background-hover Optional Weiß Hintergrund einer Datei beim Bewegen des Mauszeigers
df-messenger-files-border-hover Optional 1px solid #e0e0e0 Rahmen einer Datei, 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 Offset des Bildes auf der linken Seite
df-messenger-files-image-size Optional 18 Pixel Größe des Bilds auf der linken Seite
df-messenger-files-text-spacing Optional 8 Pixel Abstand zwischen Bildtext auf der linken Seite und Textsymbol auf der rechten Seite
df-messenger-files-icon-offset Optional 0–8 px 0 0 Versatz des Downloadsymbols rechts
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 zur Verfügung.

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 – Fettdruckelement (wird zum Fettdruck von Text verwendet)
  • i – Kursiv formatiertes Element (für kursiv formatierten Text)
  • u – Unterstrich-Element (zum Unterstreichen von Text)
  • h1 – Element der Überschrift 1 (für die Hauptüberschrift einer Seite verwendet)
  • h2 – Element der Überschrift 2 (für Zwischenüberschriften verwendet)
  • h3 – Zwischenüberschrift 3 (für untergeordnete Zwischenüberschriften)
  • p – Absatzelement (zum Erstellen von Textabsätzen)
  • br – Zeilenumbruchelement (wird zum Erstellen von Zeilenumbrüchen innerhalb eines Absatzes verwendet)
  • table – Tabellenelement (zum Erstellen von Tabellen 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 – Tabellenüberschriftendaten oder Zellenelement (zum Erstellen von Zellen in einer Tabellenüberschriftenzeile)
  • tbody – Tabellenkörperelement (zum Erstellen eines Tabellenkörpers)
  • td – Tabellendaten oder Zellenelement (zum Erstellen von Zellen in einer Tabellenzeile)
  • ul – Element für unsortierte Listen (zum Erstellen von Aufzählungslisten)
  • ol – sortiertes Listenelement (zum Erstellen nummerierter Listen verwendet)
  • li – Listenelement (zum Erstellen von Elementen innerhalb einer Liste)
  • img – Bildelement (zum Anzeigen eines Bildes, siehe auch url-allowlist HTML-Anpassung)
  • div – Containerelement
  • span – Inline-Container-Element

Beispiel:

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

HTML und Markdown stylen

Für Ankerelemente (HTML-Element a und Markdown-Link) können die folgenden CSS-Variablen angegeben werden:

Attribute Eingaberichtlinie Standardwert Beschreibung
df-messenger-link-decoration Optional Unterstrichen Dekoration eines Link-Elements
df-messenger-link-font-color Optional #0b57d0 Schriftfarbe eines nicht besuchten Linkelements
df-messenger-link-visited-font-color Optional #0b57d0 Schriftfarbe eines besuchten Linkelements
df-messenger-link-hover-font-color Optional #0b57d0 Schriftfarbe beim Bewegen des Mauszeigers auf ein Linkelement
df-messenger-link-background Optional transparent Hintergrund eines Link-Elements
df-messenger-link-padding Optional 0 Ränder eines Link-Elements
df-messenger-link-border Optional keine Rahmen eines Linkelements
df-messenger-link-border-radius Optional 0 Rahmenradius eines Link-Elements

Für Tabellenelemente (HTML-table-Element und Markdown-Tabellen) können die folgenden CSS-Variablen angegeben werden:

Attribute Eingaberichtlinie Standardwert Beschreibung
df-messenger-table-font-size Optional 14 Pixel Textgröße in einem Tabellenelement
df-messenger-table-font-color Optional #1f1f1f Textfarbe in einem Tabellenelement
df-messenger-table-align Optional links Text in einer Tabellenzelle ausrichten
df-messenger-table-padding Optional 0 Textabstand in einer Tabellenzelle
df-messenger-table-border-collapse Optional trennen Modus zum Zusammenführen von Rändern einer Tabelle: Mit separate können Sie border-radius aktivieren.
df-messenger-table-border-radius Optional 0 Rahmenradius einer Tabelle
df-messenger-table-header-border-radius Optional 0 Rahmenradius der Kopfzeile der Tabelle
df-messenger-table-border-top Optional keine Rahmen einer Tabellenzeile
df-messenger-table-border-top-first Optional keine Rahmen oben in der ersten Tabellenzeile
df-messenger-table-border-bottom Optional keine Unterer Rahmen einer Tabellenzeile
df-messenger-table-border-bottom-last Optional keine Rahmen der letzten Tabellenzeile
df-messenger-table-border-left Optional keine Rahmen links einer Tabellenzelle
df-messenger-table-border-left-first Optional keine Rahmen links von der ersten Tabellenzelle in einer Zeile
df-messenger-table-border-right Optional keine Rahmen rechts einer Tabellenzelle
df-messenger-table-border-right-last Optional keine Rahmen rechts neben der letzten Tabellenzelle in einer Zeile
df-messenger-table-background Optional Transparent Hintergrund einer Tabellenzeile
df-messenger-table-even-background Optional Transparent Hintergrund von 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 einem Tabellenkopfelement
df-messenger-table-header-font-color Optional #1f1f1f Textfarbe in einem Tabellenkopfelement
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 oben in der Tabellenüberschriftszeile
df-messenger-table-header-border-bottom Optional keine Unterer Rahmen der Tabellenüberschriftszeile
df-messenger-table-header-border-left Optional keine Rahmen links neben einer Zelle in der Tabellenüberschriftenzeile
df-messenger-table-header-border-left-first Optional keine Rahmen links neben der ersten Zelle in der Tabellenüberschriftenzeile
df-messenger-table-header-border-right Optional keine 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 Dialogflow Messenger-Typs für benutzerdefinierte Vorlagen

Der Antworttyp der benutzerdefinierten Vorlage rendert benutzerdefiniertes Element die auf der Website des Kunden definiert sind. Das Element wird nicht in eine Karte eingefügt und steht immer für sich.

In der folgenden Tabelle werden die Felder beschrieben:

Name Typ Beschreibung
type string Antworttyp: "custom_template"
name string Name des benutzerdefinierten Elements
payload Object Nutzlast, die an das benutzerdefinierte Element übergeben werden soll

Beispiel:

{
  "richContent": [
    [
      {
        "type": "custom_template",
        "name": "custom-element-example",
        "payload": {
          "text": "Hello World"
        }
      }
    ]
  ]
}

Auf Ihrer Website muss das benutzerdefinierte Element 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 wird dfResponseId an das Element übergeben.

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

Screenshot einer benutzerdefinierten Karte in Dialogflow Messenger

Die einzelnen Rich-Media-Nachrichtenelemente für Dialogflow CX Messenger können verwendet werden, um eine benutzerdefinierte Karte zu erstellen, die Ihren Anforderungen entspricht.

Hier 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 Ränder rechts unten 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 rechts oben für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius rechts oben
df-messenger-card-stack-border-bottom-left-radius Optional 8 Pixel Der Rahmenradius links unten für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius links unten
df-messenger-card-stack-border-bottom-right-radius Optional 8 Pixel Rahmenradius unten rechts für aufeinanderfolgende benutzerdefinierte Karten überschreibt den Radius unten rechts
df-messenger-card-box-shadow Optional 0 2 px 2 px 0 rgba(0, 0, 0, 0.24) Rahmenschatten einer benutzerdefinierten Karte