Beberapa produk dan fitur sedang dalam proses penggantian nama. Fitur playbook dan alur generatif juga dimigrasikan ke satu konsol gabungan. Lihat detailnya.

Halaman ini diterjemahkan oleh Cloud Translation API.

Fulfillment Messenger Dialogflow CX

Saat membuat fulfillment kartu kustom, Anda dapat membuat Respons Teks dan Payload Kustom. Respons teks digunakan untuk respons agen teks biasa dan Markdown, dan payload kustom digunakan untuk respons yang kaya. Format payload kustom untuk semua jenis respons memiliki struktur dasar berikut:

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

Perhatikan bahwa nilai richContent memungkinkan satu array luar dan beberapa array dalam. Respons dalam array dalam diikat bersama dalam satu kartu visual. Jika array luar berisi beberapa array dalam, beberapa kartu akan ditampilkan—satu untuk setiap array dalam.

Subbagian lainnya menjelaskan berbagai jenis respons yang dapat Anda konfigurasikan untuk payload kustom.

Respons teks

Screenshot teks Messenger Dialogflow

Respons teks mendukung teks biasa dan Markdown. Berikut beberapa contoh Markdown:

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

Catatan: Untuk mengaktifkan gambar di Markdown, atribut url-allowlist harus ditentukan sebagaimana mestinya.

Tabel:

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

Jenis respons info

Screenshot jenis info Dialogflow Messenger

Jenis respons info adalah kartu judul sederhana yang dapat diklik atau disentuh pengguna.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "info"
`title`	`string`	Judul kartu
`subtitle`	`string`	Subjudul kartu
`image`	`object`	Gambar
`image.rawUrl`	`string`	URL publik untuk gambar
`anchor`	`object`	Anchor yang akan diikuti saat elemen diklik
`anchor.href`	`string`	URL anchor
`anchor.target`	`string`	Target anchor, default-nya adalah `_blank`

Contoh:

{
  "richContent": [
    [
      {
        "type": "info",
        "title": "Info item title",
        "subtitle": "Info item subtitle",
        "image": {
          "rawUrl": "https://example.com/images/logo.png"
        },
        "anchor": {
          "href": "https://example.com"
        }
      }
    ]
  ]
}

Jenis respons deskripsi

Screenshot jenis deskripsi Messenger Dialogflow

Jenis respons deskripsi adalah kartu informatif yang dapat memiliki beberapa baris teks.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "description"
`title`	`string`	Judul kartu
`text`	`array<string>`	Array string, dengan setiap string dirender di baris baru

Contoh:

{
  "richContent": [
    [
      {
        "type": "description",
        "title": "Description title",
        "text": [
          "This is text line 1.",
          "This is text line 2."
        ]
      }
    ]
  ]
}

Jenis respons gambar

Screenshot jenis gambar Messenger Dialogflow

Jenis respons gambar adalah kartu gambar yang dapat diklik atau disentuh pengguna. Jenis respons mendukung chip referensi yang memungkinkan penambahan sumber gambar sebagai link anchor bersama dengan teks deskriptif singkat dan ikon.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "image"
`rawUrl`	`string`	URL publik untuk gambar
`accessibilityText`	`string`	Teks alternatif untuk gambar
`reference.text`	`string`	Teks yang akan ditampilkan di chip referensi
`reference.anchor.href`	`string`	URL chip referensi
`reference.anchor.target`	`string`	Target anchor di chip referensi, defaultnya adalah `_blank`
`reference.image.rawUrl`	`string`	Gambar yang akan ditampilkan di chip referensi

Contoh:

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

Variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-image-border-radius`	Opsional	8px	Radius batas gambar

Jenis respons video

Screenshot jenis video Dialogflow Messenger

Jenis respons video merender elemen video yang dapat berupa video langsung dari URL, diputar langsung di messenger, atau link ke video.

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "video"
`title`	`string`	Judul video opsional
`source`	`object`	Sumber video
`source.type`	`string`	Jenis sumber video, `link` atau `raw`
`source.anchor`	`object`	Anchor yang akan diikuti saat elemen diklik
`source.embeddedPlayer`	`string`	Video jenis `link` dapat disematkan, bukan ditautkan ke halaman web pemutar. Ini hanya diterapkan untuk kumpulan pemain yang diketahui, mendukung `youtube`.
`source.thumbnail`	`object`	Thumbnail yang akan ditampilkan untuk `anchor`
`source.thumbnail.rawUrl`	`string`	URL thumbnail
`source.rawUrl`	`string`	URL untuk video jenis `raw`

Contoh:

{
  "richContent": [
    [
      {
        "type": "video",
        "source": {
          "type": "link",
          "anchor": {
            "href": "https://www.youtube.com/watch?v=cNfINi5CNbY"
          }
        }
      }
    ]
  ]
}

Variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-video-width`	Opsional	otomatis	Lebar video (dibatasi oleh `max-width\: 100%`)
`df-messenger-video-height`	Opsional	otomatis	Tinggi video
`df-messenger-video-embed-width`	Opsional	560 piksel	Lebar video tersemat (dibatasi oleh `max-width\: 100%`)
`df-messenger-video-embed-height`	Opsional	315 piksel	Tinggi video tersemat
`df-messenger-video-border`	Opsional	1px solid #e0e0e0	Batas video
`df-messenger-video-border-radius`	Opsional	8px	Radius batas video

Jenis respons tombol

Jenis respons tombol adalah tombol kecil dengan ikon yang dapat diklik atau disentuh pengguna.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "button"
`icon`	`object`	Ikon untuk tombol
`icon.type`	`string`	Ikon dari Library ikon material. Ikon default adalah panah
`icon.color`	`string`	Heksadesimal warna
`image`	`object`	Gambar untuk tombol, lebih diutamakan daripada `icon`
`image.rawUrl`	`string`	URL publik untuk gambar
`mode`	`string`	Opsional, jika disetel ke "blocking", input pengguna akan dinonaktifkan hingga pengguna mengklik tombol
`text`	`string`	Teks tombol
`anchor`	`object`	Anchor yang akan diikuti saat elemen diklik
`anchor.href`	`string`	URL anchor
`anchor.target`	`string`	Target anchor, default-nya adalah `_blank`
`event`	`object`	Peristiwa Dialogflow yang dipicu saat tombol diklik.

Contoh:

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

Variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-button-border`	Opsional	tidak ada	Batas tombol
`df-messenger-button-border-radius`	Opsional	8px	Radius batas tombol
`df-messenger-button-font-color`	Opsional	#1f1f1f	Warna teks tombol
`df-messenger-button-font-family`	Opsional	"Google Sans", "Helvetica Neue", sans-serif	Jenis font tombol
`df-messenger-button-font-size`	Opsional	14px	Ukuran font tombol
`df-messenger-button-padding`	Opsional	12px	Padding tombol
`df-messenger-button-icon-spacing`	Opsional	12px	Spasi antara ikon dan teks tombol
`df-messenger-button-icon-font-size`	Opsional	24px	Ukuran ikon tombol
`df-messenger-button-image-size`	Opsional	24px	Ukuran gambar tombol
`df-messenger-button-image-offset`	Opsional	0	Offset gambar tombol, memungkinkan nilai negatif untuk mengimbangi padding
`df-messenger-button-text-align`	Opsional	center	Perataan teks tombol
`df-messenger-button-text-wrap`	Opsional	normal	Menggunakan `nowrap` untuk melarang tombol multibaris

Mencantumkan jenis respons

Screenshot jenis daftar Messenger Dialogflow

Jenis respons daftar adalah kartu dengan beberapa opsi yang dapat dipilih pengguna.

Respons berisi array jenis respons list dan divider. Tabel berikut menjelaskan jenis list:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "list"
`title`	`string`	Judul opsi
`subtitle`	`string`	Subjudul opsi
`event`	`object`	Peristiwa Dialogflow yang dipicu saat opsi diklik
`anchor`	`object`	Anchor yang akan diikuti saat elemen diklik
`anchor.href`	`string`	URL anchor
`anchor.target`	`string`	Target anchor, default-nya adalah `_blank`
`image`	`object`	Gambar
`image.rawUrl`	`string`	URL publik untuk gambar

Tabel berikut menjelaskan jenis divider:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "pemisah"

Contoh:

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

Variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-list-padding`	Opsional	16px	Padding elemen daftar
`df-messenger-list-inset`	Opsional	0	"Inset" horizontal tambahan dari elemen daftar (selain padding), untuk mengontrol perluasan batas antar-elemen
`df-messenger-list-spacing`	Opsional	10px	Ruang vertikal antara elemen daftar
`df-messenger-list-border-bottom`	Opsional	1px solid #e0e0e0	Batas antara elemen daftar

Jenis respons akordeon

Screenshot jenis akordeon Messenger Dialogflow

Jenis respons akordeon adalah kartu kecil yang dapat diklik atau disentuh pengguna untuk meluaskan dan menampilkan lebih banyak teks.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "accordion"
`title`	`string`	Judul accordion
`subtitle`	`string`	Subtitel accordion
`image`	`object`	Gambar
`image.rawUrl`	`string`	URL publik untuk gambar
`text`	`string`	Teks akordeon

Contoh:

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

Jenis respons chip saran

Screenshot jenis chip Dialogflow Messenger

Jenis respons chip saran memberikan daftar chip saran yang dapat diklik kepada pengguna akhir.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "chips"
`options`	`array<object>`	Array objek Opsi
`options[].mode`	`string`	Opsional, jika disetel ke "blocking", input pengguna akan dinonaktifkan hingga pengguna mengklik chip
`options[].text`	`string`	Teks opsi
`options[].image`	`object`	Opsional, opsi Gambar
`options[].image.rawUrl`	`string`	Opsi URL publik untuk gambar
`options[].anchor`	`object`	Opsional, Anchor yang akan diikuti saat elemen diklik
`options[].anchor.href`	`string`	URL anchor
`options[].anchor.target`	`string`	Target anchor, default-nya adalah `_blank`

Contoh:

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

Variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-chips-spacing`	Opsional	10px	Spasi di atas chip ke pesan sebelumnya
`df-messenger-chips-border-color`	Opsional	#e0e0e0	Warna batas chip
`df-messenger-chips-border-color-hover`	Opsional	#e0e0e0	Warna batas chip saat diarahkan kursor
`df-messenger-chips-border-radius`	Opsional	999 piksel	Radius batas chip
`df-messenger-chips-background`	Opsional	putih	Latar belakang chip
`df-messenger-chips-background-hover`	Opsional	rgba(68, 71, 70, 0,08)	Latar belakang chip saat diarahkan kursor
`df-messenger-chips-padding`	Opsional	6px 16px	Padding chip
`df-messenger-chips-font-color`	Opsional	hitam	Warna teks chip
`df-messenger-chips-font-family`	Opsional	"Google Sans", "Helvetica Neue", sans-serif	Jenis font chip
`df-messenger-chips-font-size`	Opsional	14px	Ukuran teks chip
`df-messenger-chips-font-weight`	Opsional	normal	Ketebalan font chip
`df-messenger-chips-font-weight-hover`	Opsional	normal	Ketebalan font chip saat diarahkan kursor
`df-messenger-chips-box-shadow`	Opsional	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Bayangan kotak chip
`df-messenger-chips-content-align`	Opsional	flex-start	Perataan vertikal konten (misalnya gambar) dalam chip
`df-messenger-chips-text-wrap`	Opsional	nowrap	Menggunakan `normal` untuk mengizinkan chip multi-baris

Jenis respons kutipan

Screenshot jenis kutipan Dialogflow Messenger

Jenis respons kutipan memberi pengguna akhir daftar link kutipan yang dapat diklik.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "match_citations"
`citations`	`array<object>`	Array objek Citation
`citations[].title`	`string`	Judul kutipan
`citations[].subtitle`	`string`	Subjudul kutipan (saat ini diabaikan)
`citations[].anchor`	`object`	Anchor yang akan diikuti saat elemen diklik
`citations[].anchor.href`	`string`	URL anchor
`citations[].anchor.target`	`string`	Target anchor, default-nya adalah `_blank`

Contoh:

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

Variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-citations-spacing`	Opsional	10px	Spasi di atas kutipan ke pesan sebelumnya
`df-messenger-citations-message-display`	Opsional	block	Menentukan tampilan catatan di atas kutipan, nilai yang diizinkan adalah `block` atau `none`
`df-messenger-citations-message-font-color`	Opsional	#041e49	Warna teks catatan di atas kutipan
`df-messenger-citations-message-font-size`	Opsional	12px	Ukuran teks catatan di atas kutipan
`df-messenger-citations-flex-direction`	Opsional	baris	Properti arah fleksibel kutipan, sebaiknya gunakan `row` (horizontal dengan baris baru) atau `column` (vertikal)
`df-messenger-citations-border-color`	Opsional	#1a73e8	Warna batas kutipan
`df-messeenger-citations-border-color-hover`	Opsional	#1a73e8	Warna batas kutipan saat kursor diarahkan
`df-messenger-citations-border-radius`	Opsional	4px	Radius batas kutipan
`df-messenger-citations-padding`	Opsional	8px	Padding kutipan
`df-messenger-citations-background`	Opsional	putih	Latar belakang kutipan
`df-messenger-citations-background-hover`	Opsional	rgba(68, 71, 70, 0,08)	Latar belakang kutipan saat diarahkan kursor
`df-messenger-citations-font-color`	Opsional	#1a73e8	Warna teks kutipan
`df-messenger-citations-font-family`	Opsional	"Google Sans", "Helvetica Neue", sans-serif	Jenis font kutipan
`df-messenger-citations-font-size`	Opsional	11px	Ukuran teks kutipan
`df-messenger-citations-icon-font-size`	Opsional	14px	Ukuran teks ikon kutipan
`df-messenger-citations-font-weight`	Opsional	normal	Ketebalan font kutipan
`df-messenger-citations-font-weight-hover`	Opsional	normal	Ketebalan font kutipan saat diarahkan kursor
`df-messenger-citations-icon-spacing`	Opsional	4px	Spasi antara ikon dan teks dalam kutipan
`df-messenger-citations-box-shadow`	Opsional	tidak ada	Bayangan kotak kutipan

Jenis respons file

Screenshot jenis file Messenger Dialogflow

Jenis respons file merender daftar elemen file yang berisi link yang dapat didownload.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "files"
`files`	`array<object>`	Array objek File
`files[].name`	`string`	Nama file
`files[].image`	`object`	Gambar file
`files[].image.rawUrl`	`string`	URL publik file untuk gambar
`files[].anchor`	`object`	Anchor untuk mendownload file
`files[].anchor.href`	`string`	URL anchor
`files[].anchor.target`	`string`	Target anchor, default-nya adalah `_blank`

Contoh:

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

Variabel CSS berikut dapat disediakan

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-files-spacing`	Opsional	10px	Spasi di atas file ke pesan sebelumnya
`df-messenger-files-distance`	Opsional	8px	Jarak antar-file dalam daftar
`df-messenger-files-flex-direction`	Opsional	baris	Properti arah fleksibel file, sebaiknya gunakan `row` (horizontal dengan baris baru) atau `column` (vertikal)
`df-messenger-files-background`	Opsional	putih	Latar belakang file
`df-messenger-files-border`	Opsional	1px solid #e0e0e0	Batas file
`df-messenger-files-border-radius`	Opsional	999 piksel	Radius batas file
`df-messenger-files-box-shadow`	Opsional	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Bayangan kotak file
`df-messenger-files-padding`	Opsional	6px 16px	Padding file
`df-messenger-files-font-color`	Opsional	#1f1f1f	Warna teks file
`df-messenger-files-font-family`	Opsional	"Google Sans", "Helvetica Neue", sans-serif	Jenis font file
`df-messenger-files-font-size`	Opsional	14px	Ukuran teks file
`df-messenger-files-font-weight`	Opsional	normal	Ketebalan font file
`df-messenger-files-background-hover`	Opsional	putih	Latar belakang file saat diarahkan kursor
`df-messenger-files-border-hover`	Opsional	1px solid #e0e0e0	Batas file saat diarahkan kursor
`df-messenger-files-font-weight-hover`	Opsional	normal	Ketebalan font file saat diarahkan kursor
`df-messenger-files-image-offset`	Opsional	0 0 0 -8px	Offset gambar di sebelah kiri
`df-messenger-files-image-size`	Opsional	18px	Ukuran gambar di sebelah kiri
`df-messenger-files-text-spacing`	Opsional	8px	Jarak antara teks gambar di sebelah kiri dan ikon teks di sebelah kanan
`df-messenger-files-icon-offset`	Opsional	0 -8px 0 0	Offset ikon download di sebelah kanan
`df-messenger-files-icon-size`	Opsional	18px	Ukuran ikon download di sebelah kanan
`df-messenger-files-icon-font-color`	Opsional	#444746	Warna ikon download di sebelah kanan

Jenis respons HTML

Screenshot jenis html Messenger Dialogflow

Jenis respons HTML memberikan pesan HTML kepada pengguna akhir.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "html"
`html`	`string`	Konten teks pesan, mendukung HTML

Tag HTML yang didukung:

a - Elemen anchor (digunakan untuk membuat hyperlink)
b - Elemen tebal (digunakan untuk menebalkan teks)
i - Elemen miring (digunakan untuk memiringkan teks)
u - Elemen garis bawah (digunakan untuk menggarisbawahi teks)
h1 - Elemen Heading 1 (digunakan untuk judul utama halaman)
h2 - Elemen Heading 2 (digunakan untuk subjudul)
h3 - Elemen judul 3 (digunakan untuk sub-subjudul)
p - Elemen paragraf (digunakan untuk membuat paragraf teks)
br - Elemen jeda baris (digunakan untuk membuat jeda baris dalam paragraf)
table - Elemen tabel (digunakan untuk membuat tabel)
tr - Elemen baris tabel (digunakan untuk membuat baris dalam tabel)
thead - Elemen header tabel (digunakan untuk membuat header dalam tabel)
th - Data header tabel atau elemen sel (digunakan untuk membuat sel dalam baris header tabel)
tbody - Elemen isi tabel (digunakan untuk membuat isi dalam tabel)
td - Data tabel atau elemen sel (digunakan untuk membuat sel dalam baris tabel)
ul - Elemen daftar yang tidak diurutkan (digunakan untuk membuat daftar berbutir)
ol - Elemen daftar urut (digunakan untuk membuat daftar bernomor)
li - Elemen item daftar (digunakan untuk membuat item dalam daftar)
img - Elemen gambar (digunakan untuk menampilkan gambar, lihat juga url-allowlist penyesuaian HTML)
div - Elemen penampung
span - Elemen penampung inline

Contoh:

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

Menata gaya HTML dan Markdown

Untuk elemen anchor (elemen a HTML dan link Markdown), variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-link-decoration`	Opsional	garis bawah	Dekorasi elemen link
`df-messenger-link-font-color`	Opsional	#0b57d0	Warna font elemen link yang belum dikunjungi
`df-messenger-link-visited-font-color`	Opsional	#0b57d0	Warna font elemen link yang dikunjungi
`df-messenger-link-hover-font-color`	Opsional	#0b57d0	Warna font saat mengarahkan kursor ke elemen link
`df-messenger-link-background`	Opsional	transparan	Latar belakang elemen link
`df-messenger-link-padding`	Opsional	0	Padding elemen link
`df-messenger-link-border`	Opsional	tidak ada	Batas elemen link
`df-messenger-link-border-radius`	Opsional	0	Radius batas elemen link

Untuk elemen tabel (elemen table HTML dan tabel Markdown), variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-table-font-size`	Opsional	14px	Ukuran teks dalam elemen tabel
`df-messenger-table-font-color`	Opsional	#1f1f1f	Warna teks dalam elemen tabel
`df-messenger-table-align`	Opsional	lagi	Perataan teks dalam sel tabel
`df-messenger-table-padding`	Opsional	0	Padding di sel tabel
`df-messenger-table-border-collapse`	Opsional	terpisah	Mode penggabungan batas tabel, gunakan `separate` untuk mengaktifkan `border-radius`
`df-messenger-table-border-radius`	Opsional	0	Radius batas tabel
`df-messenger-table-header-border-radius`	Opsional	0	Radius batas header tabel
`df-messenger-table-border-top`	Opsional	tidak ada	Batas atas baris tabel
`df-messenger-table-border-top-first`	Opsional	tidak ada	Batas atas baris tabel pertama
`df-messenger-table-border-bottom`	Opsional	tidak ada	Batas bawah baris tabel
`df-messenger-table-border-bottom-last`	Opsional	tidak ada	Batas bawah baris tabel terakhir
`df-messenger-table-border-left`	Opsional	tidak ada	Batas kiri sel tabel
`df-messenger-table-border-left-first`	Opsional	tidak ada	Batas kiri sel tabel pertama dalam baris
`df-messenger-table-border-right`	Opsional	tidak ada	Batas kanan sel tabel
`df-messenger-table-border-right-last`	Opsional	tidak ada	Batas kanan sel tabel terakhir dalam baris
`df-messenger-table-background`	Opsional	transparan	Latar belakang baris tabel
`df-messenger-table-even-background`	Opsional	transparan	Latar belakang baris tabel bernomor genap
`df-messenger-table-odd-background`	Opsional	transparan	Latar belakang baris tabel bernomor ganjil
`df-messenger-table-header-font-size`	Opsional	14px	Ukuran teks di elemen header tabel
`df-messenger-table-header-font-weight`	Opsional	tebal	Ketebalan font di elemen header tabel
`df-messenger-table-header-font-color`	Opsional	#1f1f1f	Warna teks di elemen header tabel
`df-messenger-table-header-align`	Opsional	lagi	Perataan teks dalam sel header tabel
`df-messenger-table-header-padding`	Opsional	0	Padding di sel header tabel
`df-messenger-table-header-border-top`	Opsional	tidak ada	Batas atas baris header tabel
`df-messenger-table-header-border-bottom`	Opsional	tidak ada	Batas bawah baris header tabel
`df-messenger-table-header-border-left`	Opsional	tidak ada	Batas kiri sel di baris header tabel
`df-messenger-table-header-border-left-first`	Opsional	tidak ada	Batas kiri sel pertama di baris header tabel
`df-messenger-table-header-border-right`	Opsional	tidak ada	Batas kanan sel di baris header tabel
`df-messenger-table-header-border-right-last`	Opsional	tidak ada	Batas kanan sel terakhir di baris header tabel
`df-messenger-table-header-background`	Opsional	transparan	Latar belakang baris header tabel

Jenis respons Template Kustom

Screenshot jenis template kustom Dialogflow Messenger

Jenis respons template kustom merender elemen kustom yang ditentukan di situs pelanggan. Elemen ini tidak ditempatkan di dalam kartu dan selalu berdiri sendiri.

Tabel berikut menjelaskan kolom:

Nama	Jenis	Deskripsi
`type`	`string`	Jenis respons: "custom_template"
`name`	`string`	Nama elemen kustom
`payload`	`Object`	Payload yang akan diteruskan ke elemen kustom

Contoh:

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

Di situs Anda, elemen kustom harus didaftarkan dengan nama yang sama persis dari kolom name respons. Kolom payload diteruskan ke elemen kustom sebagai dfPayload setelah konstruksi (tetapi sebelum connectedCallback). Kolom ini dapat berisi JSON arbitrer. Selain itu, dfResponseId diteruskan ke elemen.

Dengan menggunakan respons dari contoh, berikut adalah contoh implementasi elemen kustom:

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);
})();

Menggabungkan jenis respons

Screenshot kartu kustom Dialogflow Messenger

Setiap elemen pesan multimedia untuk Messenger Dialogflow CX dapat digunakan untuk membuat kartu kustom yang sesuai dengan kebutuhan Anda.

Berikut adalah contoh yang menggunakan beberapa elemen yang tercantum di bagian fulfillment:

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

Variabel CSS berikut dapat disediakan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-card-background`	Opsional	putih	Latar belakang kartu kustom
`df-messenger-card-padding`	Opsional	16px	Padding elemen dalam kartu kustom
`df-messenger-card-border`	Opsional	1px solid #e0e0e0	Batas kartu kustom
`df-messenger-card-border-radius`	Opsional	8px	Radius batas kartu kustom
`df-messenger-card-border-top-left-radius`	Opsional	8px	Radius batas kiri atas kartu kustom
`df-messenger-card-border-top-right-radius`	Opsional	8px	Radius batas kanan atas kartu kustom
`df-messenger-card-border-bottom-left-radius`	Opsional	8px	Radius batas kiri bawah kartu kustom
`df-messenger-card-border-bottom-right-radius`	Opsional	8px	Radius batas kanan bawah kartu
`df-messenger-card-stack-border-top-left-radius`	Opsional	8px	Radius batas kiri atas untuk kartu kustom berturut-turut akan menggantikan radius kiri atas
`df-messenger-card-stack-border-top-right-radius`	Opsional	8px	Radius batas kanan atas untuk kartu kustom berturut-turut akan menggantikan radius kanan atas
`df-messenger-card-stack-border-bottom-left-radius`	Opsional	8px	Radius batas kiri bawah untuk kartu kustom berturut-turut akan menggantikan radius kiri bawah
`df-messenger-card-stack-border-bottom-right-radius`	Opsional	8px	Radius batas kanan bawah untuk kartu kustom berturut-turut akan menggantikan radius kanan bawah
`df-messenger-card-box-shadow`	Opsional	0 2px 2px 0 rgba(0, 0, 0, 0.24)	Bayangan kotak kartu kustom

Konten lengkap dari alat playbook

Anda dapat menggunakan alat playbook untuk mengirim konten multimedia ke Messenger Dialogflow CX.

Langkah 1: Buat alat addRichContent di agen Anda

Buat alat fungsi yang disebut addRichContent dengan data berikut:

Input alat:

properties: {}
type: object

Output alat:

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

Langkah 2: Beri tahu agen Anda cara menggunakan alat ini

Beri tahu agen Anda cara menggunakan alat ini dalam petunjuk dan contoh.

Misalnya, tambahkan sesuatu seperti berikut ke petunjuk Anda:

-  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

Misalnya, buat contoh seperti berikut:

Screenshot contoh

Perhatikan bahwa sintaksis untuk konten kaya sama dengan yang akan Anda gunakan jika Anda menampilkan payload kustom di agen virtual berbasis alur.

Langkah 3: Tentukan JavaScript

Dalam kode untuk halaman yang menghosting df-messenger, Anda perlu membuat kode JavaScript yang menentukan fungsi yang memberi tahu df-messenger untuk merender konten kaya. Anda juga perlu mendaftarkan fungsi tersebut dengan df-messenger, sehingga fungsi tersebut tahu untuk mengeksekusi fungsi saat agen virtual membutuhkannya.

Pastikan variabel dfMessenger dideklarasikan dan mengarah ke instance df-messenger Anda.

Berikut beberapa contoh kode yang dapat Anda gunakan untuk tujuan ini:

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