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

Catatan: Respons teks tidak memerlukan payload, respons dapat dimasukkan langsung sebagai respons agen.

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

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

Catatan: Jika Anda menggunakan agen penyimpanan data untuk fulfillment, nilai Link maximum di Data store response options harus dihapus atau ditetapkan ke 1 agar dapat menggunakan jenis respons ini.

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

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

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

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

Jenis respons video

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 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 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 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	Spasi antara ikon tombol dan teks
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

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

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

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

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

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

Catatan: Jika Anda menggunakan agen penyimpanan data untuk fulfillment, nilai Link maximum di Data store response options harus ditetapkan ke 2 atau lebih untuk menggunakan jenis respons ini.

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

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

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

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

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

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

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