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 pemenuhan 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 multimedia. 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 terikat bersama dalam satu kartu visual. Jika array luar berisi beberapa array dalam, beberapa kartu akan ditampilkan—satu untuk setiap array dalam.

Subbagian yang tersisa menjelaskan berbagai jenis respons yang dapat Anda konfigurasi untuk payload kustom.

Respons teks

Screenshot teks Dialogflow CX Messenger

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 dengan tepat.

Tabel:

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

Jenis respons info

Screenshot jenis info Messenger Dialogflow CX

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`	Subtitel 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 penanda, defaultnya 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 Dialogflow CX Messenger

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, di mana 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 CX

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 rujukan
`reference.anchor.href`	`string`	URL chip rujukan
`reference.anchor.target`	`string`	Target penanda dalam 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 diberikan:

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

Jenis respons video

Screenshot jenis video Dialogflow CX 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. Fitur 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 diberikan:

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 yang disematkan (dibatasi oleh `max-width\: 100%`)
`df-messenger-video-embed-height`	Opsional	315 piksel	Tinggi video yang disematkan
`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" (tombol)
`icon`	`object`	Ikon untuk tombol
`icon.type`	`string`	Ikon dari library ikon Material. Ikon default adalah panah
`icon.color`	`string`	Kode heksadesimal warna
`image`	`object`	Gambar untuk tombol, lebih diprioritaskan daripada `icon`
`image.rawUrl`	`string`	URL publik untuk gambar
`mode`	`string`	Opsional, jika disetel ke "blocking", input pengguna 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 penanda, defaultnya adalah `_blank`
`event`	`object`	Peristiwa Dialogflow CX 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 diberikan:

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	Ruang 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 multi-baris

Jenis respons daftar

Screenshot jenis daftar Messenger Dialogflow CX

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`	Subtitel opsi
`event`	`object`	Peristiwa Dialogflow CX yang dipicu saat opsi diklik
`anchor`	`object`	Anchor yang akan diikuti saat elemen diklik
`anchor.href`	`string`	URL anchor
`anchor.target`	`string`	Target penanda, defaultnya adalah `_blank`
`image`	`object`	Gambar
`image.rawUrl`	`string`	URL publik untuk gambar

Tabel berikut menjelaskan jenis divider:

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

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

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 di antara elemen
`df-messenger-list-spacing`	Opsional	10px	Ruang vertikal di antara elemen daftar
`df-messenger-list-border-bottom`	Opsional	1px solid #e0e0e0	Batas antara elemen daftar

Jenis respons accordion

Screenshot jenis akordeon Dialogflow CX Messenger

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 akordeon
`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 CX 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 dinonaktifkan hingga pengguna mengklik chip
`options[].text`	`string`	Teks opsi
`options[].image`	`object`	Opsional, opsi Gambar
`options[].image.rawUrl`	`string`	URL publik opsi untuk gambar
`options[].anchor`	`object`	Opsional, Anchor yang akan diikuti saat elemen diklik
`options[].anchor.href`	`string`	URL anchor
`options[].anchor.target`	`string`	Target penanda, defaultnya 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 diberikan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-chips-spacing`	Opsional	10px	Ruang 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 kursor diarahkan
`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 kursor diarahkan ke chip
`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 kursor diarahkan ke chip
`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	Penyejajaran 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 CX Messenger

Jenis respons kutipan memberikan daftar link kutipan yang dapat diklik kepada pengguna akhir.

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`	Subtitel 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 penanda, defaultnya 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 diberikan:

Properti	Kebijakan input	Nilai default	Deskripsi
`df-messenger-citations-spacing`	Opsional	10px	Ruang di atas kutipan untuk pesan sebelumnya
`df-messenger-citations-message-display`	Opsional	memblokir	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 jeda baris) 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	Pengisian 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 kursor diarahkan ke kutipan
`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 kursor diarahkan ke atasnya
`df-messenger-citations-icon-spacing`	Opsional	4px	Ruang antara ikon dan teks dalam kutipan
`df-messenger-citations-box-shadow`	Opsional	tidak ada	Bayangan kotak kutipan

Jenis respons file

Screenshot jenis file Dialogflow CX Messenger

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 penanda, defaultnya 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	Ruang 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 jeda baris) 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 kursor diarahkan ke file
`df-messenger-files-border-hover`	Opsional	1px solid #e0e0e0	Batas file saat kursor diarahkan ke file
`df-messenger-files-font-weight-hover`	Opsional	normal	Ketebalan font file saat kursor diarahkan ke file
`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 gambar-teks di sebelah kiri dan teks-ikon 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 CX

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 Heading 3 (digunakan untuk sub-subjudul)
p - Elemen paragraf (digunakan untuk membuat paragraf teks)
br - Elemen pemisah baris (digunakan untuk membuat pemisah 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 berurutan (digunakan untuk membuat daftar berbutir)
ol - Elemen daftar berurutan (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 diberikan:

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 HTML table dan tabel Markdown), variabel CSS berikut dapat diberikan:

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 dalam sel tabel
`df-messenger-table-border-collapse`	Opsional	{i>separate <i}(memisahkan	Mode penyusutan 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 dalam elemen header tabel
`df-messenger-table-header-font-weight`	Opsional	tebal	Ketebalan font dalam elemen header tabel
`df-messenger-table-header-font-color`	Opsional	#1f1f1f	Warna teks dalam 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 Messenger Dialogflow CX

Jenis respons template kustom merender elemen kustom yang ditentukan di situs pelanggan. Elemen 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 untuk 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 penerapan 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 Messenger Dialogflow CX

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

Berikut contoh penggunaan beberapa elemen yang tercantum di bagian pemenuhan:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Dialogflow CX across platforms"
      },
      {
        "type": "info",
        "title": "Dialogflow CX",
        "subtitle": "Build natural and rich conversational experiences",
        "anchor": {
          "href": "https://cloud.google.com/dialogflow/docs"
        }
      },
      {
        "type": "chips",
        "options": [
          {
            "text": "Case Studies",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/case-studies"
            }
          },
          {
            "text": "Docs",
            "anchor": {
              "href": "https://cloud.google.com/dialogflow/docs"
            }
          }
        ]
      }
    ]
  ]
}

Variabel CSS berikut dapat diberikan:

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 berurutan menggantikan radius kiri atas
`df-messenger-card-stack-border-top-right-radius`	Opsional	8px	Radius batas kanan atas untuk kartu kustom berurutan menggantikan radius kanan atas
`df-messenger-card-stack-border-bottom-left-radius`	Opsional	8px	Radius batas kiri bawah untuk kartu kustom berurutan menggantikan radius kiri bawah
`df-messenger-card-stack-border-bottom-right-radius`	Opsional	8px	Radius batas kanan bawah untuk kartu kustom berurutan 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 Dialogflow CX Messenger.

Langkah 1: Buat alat addRichContent di agen Anda

Buat alat fungsi bernama 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 tersebut 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 multimedia sama dengan yang akan Anda gunakan jika Anda ingin 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 multimedia. Anda juga perlu mendaftarkan fungsi tersebut dengan df-messenger, sehingga fungsi tersebut tahu cara menjalankan 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);

Fulfillment Messenger Dialogflow CX Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Respons teks

Jenis respons info

Jenis respons deskripsi

Jenis respons gambar

Jenis respons video

Jenis respons tombol

Jenis respons daftar

Jenis respons accordion

Jenis respons chip saran

Jenis respons kutipan

Jenis respons file

Jenis respons HTML

Menata gaya HTML dan Markdown

Jenis respons Template Kustom

Menggabungkan jenis respons

Konten lengkap dari alat playbook

Langkah 1: Buat alat addRichContent di agen Anda

Langkah 2: Beri tahu agen Anda cara menggunakan alat ini

Langkah 3: Tentukan JavaScript

Fulfillment Messenger Dialogflow CX