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, sedangkan payload kustom digunakan untuk respons lengkap. Format payload kustom untuk semua jenis respons memiliki struktur dasar berikut:

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

Subbagian selanjutnya 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)

  • Tabel:

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

Jenis respons info

Screenshot jenis info Dialogflow CX Messenger

Jenis respons info adalah kartu judul informatif 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, ditetapkan secara default ke _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 memungkinkan Anda menampilkan 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 Dialogflow CX Messenger

Jenis respons gambar adalah kartu gambar yang dapat diklik atau disentuh pengguna. Jenis respons ini mendukung chip referensi yang memungkinkan Anda menambahkan 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"
          }
        }
      }
    ]
  ]
}

Anda dapat menggunakan variabel CSS berikut:

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.

Tabel berikut menjelaskan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "video".
title string Judul video opsional.
source object Sumber video.
source.type string Jenis sumber video, baik link maupun 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 pemutar yang diketahui, yang 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=example"
          }
        }
      }
    ]
  ]
}

Anda dapat menggunakan variabel CSS berikut:

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 560px Lebar video tersemat (dibatasi oleh max-width\: 100%).
df-messenger-video-embed-height Opsional 315px 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

Screenshot jenis tombol Dialogflow CX Messenger

Jenis respons tombol adalah tombol kecil dengan ikon yang dapat Anda klik atau sentuh.

Tabel berikut menjelaskan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "tombol".
icon object Ikon untuk tombol.
icon.type string Ikon dari library ikon Material. Ikon defaultnya adalah panah.
icon.color string Kode warna heksadesimal.
image object Gambar untuk tombol, lebih diprioritaskan daripada icon.
image.rawUrl string URL publik untuk gambar tombol.
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, ditetapkan secara default ke _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": ""
        }
      }
    ]
  ]
}

Anda dapat menggunakan variabel CSS berikut:

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 AI Perataan teks tombol.
df-messenger-button-text-wrap Opsional normal Gunakan nowrap untuk melarang tombol multi-baris.

Jenis respons daftar

Screenshot jenis daftar Dialogflow CX Messenger

Jenis respons daftar adalah kartu yang memungkinkan Anda memilih dari beberapa opsi. 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 CX yang dipicu saat opsi diklik.
anchor object Anchor yang akan diikuti saat elemen diklik.
anchor.href string URL anchor.
anchor.target string Target anchor, ditetapkan secara default ke _blank.
image object Gambar.
image.rawUrl string URL publik untuk gambar referensi.
event.event string Nama peristiwa yang dipicu saat opsi diklik.

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

Anda dapat menggunakan variabel CSS berikut:

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 accordion

Screenshot jenis akordeon Dialogflow CX Messenger

Jenis respons akordeon adalah kartu kecil yang dapat Anda ketuk atau klik untuk meluaskan dan menampilkan lebih banyak teks.

Tabel berikut menjelaskan kolom:

Nama Jenis Deskripsi
type string Jenis respons: "accordion".
title string Judul akordeon.
subtitle string Subjudul 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 memungkinkan Anda memberikan daftar chip saran yang dapat diklik.

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. Gambar.
options[].image.rawUrl string URL publik opsional 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, ditetapkan secara default ke _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"
            }
          }
        ]
      }
    ]
  ]
}

Anda dapat memberikan variabel CSS berikut:

Properti Kebijakan Input Nilai Default Deskripsi
df-messenger-chips-spacing Opsional 10px Ruang di atas chip hingga 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 999px 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 Gunakan normal untuk mengizinkan chip multibaris.

Jenis respons kutipan

Screenshot jenis kutipan Dialogflow CX 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 (diabaikan).
citations[].anchor object Anchor yang akan diikuti saat elemen diklik.
citations[].anchor.href string URL anchor.
citations[].anchor.target string Target anchor, ditetapkan secara default ke _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"
            }
          }
        ]
      }
    ]
  ]
}

Anda dapat menggunakan variabel CSS berikut:

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 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 flex kutipan, sebaiknya gunakan row (horizontal dengan pemisah baris) atau column (vertikal).
df-messenger-citations-border-color Opsional #3279f9 Warna batas kutipan.
df-messeenger-citations-border-color-hover Opsional #3279f9 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 #3279f9 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 Dialogflow CX Messenger

Jenis respons file merender daftar elemen file yang dapat Anda download. Pengguna dapat mendownload file dengan mengklik elemen anchor.

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, ditetapkan secara default ke _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 diberikan:

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 antara file dalam daftar.
df-messenger-files-flex-direction Opsional baris Properti arah flex file, sebaiknya gunakan row (horizontal dengan pemisah 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 999px 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 gambar-teks 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 Dialogflow CX Messenger

Jenis respons HTML memberikan pesan HTML kepada pengguna.

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 Judul 2 (digunakan untuk subjudul).
  • h3 - Elemen Judul 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 - Elemen sel atau data header tabel (digunakan untuk membuat sel dalam baris header tabel).
  • tbody - Elemen isi tabel (digunakan untuk membuat isi dalam tabel).
  • td - Elemen data tabel atau sel (digunakan untuk membuat sel dalam baris tabel).
  • ul - Elemen daftar yang tidak diurutkan (digunakan untuk membuat daftar berbutir).
  • ol - Elemen daftar yang diurutkan (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, termasuk elemen a HTML dan link Markdown, Anda dapat menyediakan variabel CSS berikut:

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.

Anda dapat menggunakan variabel CSS berikut untuk elemen tabel (elemen table HTML dan tabel Markdown):

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 separate Mode border-collapse 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 Dialogflow CX Messenger

Jenis respons template kustom merender elemen kustom yang ditentukan di situs Anda. 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 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 CX Messenger

Anda dapat menggunakan setiap elemen pesan multimedia untuk Dialogflow CX Messenger guna 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 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"
            }
          }
        ]
      }
    ]
  ]
}

Anda dapat menggunakan variabel CSS berikut:

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

Gunakan alat playbook untuk mengirim konten lengkap ke Dialogflow CX Messenger.

Langkah 1: Buat alat addRichContent di agen Anda

Untuk membuat alat fungsi bernama addRichContent, gunakan 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 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:

Contoh konten lengkap untuk Dialogflow CX Messenger

Langkah 3: Tentukan JavaScript

Dalam kode untuk halaman yang menghosting df-messenger, buat kode JavaScript yang menentukan fungsi yang memberi tahu df-messenger untuk merender konten lengkap. Daftarkan fungsi ini dengan df-messenger agar fungsi tersebut dijalankan 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);