Fulfillment Dialogflow Messenger

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",
        ...
      }
    ]
  ]
}

Perlu diketahui bahwa nilai richContent memungkinkan satu array luar dan beberapa array dalam. Respons dalam array bagian dalam terikat 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 konfigurasi untuk payload kustom.

Pesan balasan

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

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

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

• ![](Image URL)

  Catatan: Untuk mengaktifkan gambar dalam Markdown, atribut url-allowlist perlu ditentukan dengan tepat.

• 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 Maksimum link di Opsi respons data store harus tidak disetel atau disetel ke 1 agar dapat menggunakan jenis respons ini.

Tabel berikut mendeskripsikan 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 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

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

Tabel berikut mendeskripsikan kolom:

Nama	Jenis	Deskripsi
type	string	Jenis respons: "deskripsi"
title	string	Judul kartu
text	array<string>	Array string, tempat setiap string dirender pada 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.

Tabel berikut mendeskripsikan kolom:

Nama	Jenis	Deskripsi
type	string	Jenis respons: "gambar"
rawUrl	string	URL publik untuk gambar
accessibilityText	string	Teks alternatif untuk gambar

Contoh:

{
  "richContent": [
    [
      {
        "type": "image",
        "rawUrl": "https://example.com/images/logo.png",
        "accessibilityText": "Example logo"
      }
    ]
  ]
}

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, baik 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. Hal ini hanya diterapkan untuk sekumpulan pemain yang diketahui dan 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	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

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

Tabel berikut mendeskripsikan kolom:

Nama	Jenis	Deskripsi
type	string	Jenis tanggapan: "button"
icon	object	Ikon untuk tombol
icon.type	string	Ikon dari library ikon Material. Ikon defaultnya adalah tanda 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 "pemblokiran", 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 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 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

Cantumkan 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: "daftar"
title	string	Judul opsi
subtitle	string	Subtitel 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, ditetapkan secara default ke _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": ""
        }
      }
    ]
  ]
}

Jenis respons akordeon

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

Tabel berikut mendeskripsikan kolom:

Nama	Jenis	Deskripsi
type	string	Jenis respons: "akordeon"
title	string	Judul akordeon
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

Jenis respons chip saran memberi pengguna akhir daftar chip saran yang dapat diklik.

Tabel berikut mendeskripsikan kolom:

Nama	Jenis	Deskripsi
type	string	Jenis respons: "chip"
options	array<object>	Array objek Option
options[].mode	string	Opsional, jika disetel ke "pemblokiran", input pengguna akan dinonaktifkan hingga pengguna mengklik chip
options[].text	string	Teks opsi
options[].image	object	Opsional, Gambar opsi
options[].image.rawUrl	string	URL publik opsi untuk gambar
options[].anchor	object	Opsional, Anchor untuk 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"
            }
          }
        ]
      }
    ]
  ]
}

Variabel CSS berikut dapat diberikan:

Properti	Kebijakan input	Nilai default	Deskripsi
df-messenger-chips-spacing	Opsional	10px	Ruang di atas chip untuk 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 ke atasnya
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 kursor diarahkan
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
df-messenger-chips-box-shadow	Opsional	0 2px 2px 0 rgba(0, 0, 0, 0,24)	Bayangan kotak chip

Jenis respons kutipan

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

Catatan: Jika Anda menggunakan agen penyimpanan data untuk fulfillment, nilai Maksimum link di Opsi respons penyimpanan data harus ditetapkan ke 2 atau lebih agar dapat menggunakan jenis respons ini.

Tabel berikut mendeskripsikan kolom:

Nama	Jenis	Deskripsi
type	string	Jenis respons: "match_citations"
citations	array<object>	Array objek Kutipan
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 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"
            }
          }
        ]
      }
    ]
  ]
}

Variabel CSS berikut dapat diberikan:

Properti	Kebijakan input	Nilai default	Deskripsi
df-messenger-citations-spacing	Opsional	10px	Spasi di atas kutipan pesan sebelumnya
df-messenger-citations-message-display	Opsional	blokir	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, direkomendasikan untuk menggunakan 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 mengarahkan kursor
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 kursor diarahkan ke
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 mengarahkan kursor
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 HTML

Jenis respons HTML memberikan pesan HTML kepada pengguna akhir.

Tabel berikut mendeskripsikan 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 heading 3 (digunakan untuk sub-subheading)
• p - Elemen paragraf (digunakan untuk membuat paragraf teks)
• br - Elemen pemisah 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 berurut (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	transparent	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 di elemen tabel
df-messenger-table-font-color	Opsional	#1f1f1f	Warna teks di elemen tabel
df-messenger-table-align	Opsional	panah kiri	Perataan teks dalam sel tabel
df-messenger-table-padding	Opsional	0	Padding dalam sel tabel
df-messenger-table-border-collapse	Opsional	{i>split<i}	Mode penciutan 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 satu 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 satu baris
df-messenger-table-background	Opsional	transparent	Latar belakang baris tabel
df-messenger-table-even-background	Opsional	transparent	Latar belakang baris tabel bernomor genap
df-messenger-table-odd-background	Opsional	transparent	Latar belakang baris tabel bernomor ganjil
df-messenger-table-header-font-size	Opsional	14px	Ukuran teks di elemen header tabel
df-messenger-table-header-font-weight	Opsional	tebal	Ketebalan font dalam elemen header tabel
df-messenger-table-header-font-color	Opsional	#1f1f1f	Warna teks dalam elemen header tabel
df-messenger-table-header-align	Opsional	panah kiri	Perataan teks dalam sel header tabel
df-messenger-table-header-padding	Opsional	0	Padding dalam 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 dalam baris header tabel
df-messenger-table-header-border-left-first	Opsional	tidak ada	Batas kiri sel pertama dalam baris header tabel
df-messenger-table-header-border-right	Opsional	tidak ada	Pembatas kanan sel dalam baris header tabel
df-messenger-table-header-border-right-last	Opsional	tidak ada	Batas kanan sel terakhir dalam baris header tabel
df-messenger-table-header-background	Opsional	transparent	Latar belakang baris header tabel

Jenis respons Template Kustom

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

Tabel berikut mendeskripsikan 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 tepat dari kolom name respons. Kolom payload diteruskan ke elemen kustom sebagai dfPayload setelah pembuatan (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 rich message untuk Dialogflow Messenger dapat digunakan untuk membuat kartu kustom agar sesuai dengan kebutuhan Anda.

Berikut adalah contoh yang menggunakan beberapa elemen yang tercantum dalam 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 di kiri atas kartu kustom
df-messenger-card-border-top-right-radius	Opsional	8px	Radius batas di kanan atas kartu kustom
df-messenger-card-border-bottom-left-radius	Opsional	8px	Radius batas di kiri bawah kartu kustom
df-messenger-card-border-bottom-right-radius	Opsional	8px	Radius batas di kanan bawah kartu
df-messenger-card-stack-border-top-left-radius	Opsional	8px	Radius batas di kiri atas untuk kartu kustom berturut-turut menggantikan radius kiri atas
df-messenger-card-stack-border-top-right-radius	Opsional	8px	Radius batas di kanan atas untuk kartu kustom yang berurutan akan menggantikan radius kanan atas
df-messenger-card-stack-border-bottom-left-radius	Opsional	8px	Radius batas di kiri bawah untuk kartu kustom berturut-turut menggantikan radius kiri bawah
df-messenger-card-stack-border-bottom-right-radius	Opsional	8px	Radius batas di 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