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

Screenshot teks Dialogflow Messenger

Respons teks mendukung teks biasa dan Markdown. Berikut adalah 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 Messenger

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

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

Screenshot jenis deskripsi Dialogflow Messenger

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

Screenshot jenis gambar Dialogflow Messenger

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

Screenshot jenis video Dialogflow Messenger

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

Nama Jenis Deskripsi
type string Jenis respons: "video"
title string Judul video opsional
source object Sumber video
source.type string Jenis sumber video, 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

Screenshot jenis tombol Dialogflow Messenger

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

Screenshot jenis daftar Dialogflow Messenger

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

Screenshot jenis akordeon Dialogflow Messenger

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

Screenshot jenis chip Dialogflow Messenger

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

Screenshot jenis kutipan Dialogflow Messenger

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

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

Screenshot jenis html Dialogflow Messenger

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

Screenshot jenis template kustom Dialogflow Messenger

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

Screenshot kartu kustom Dialogflow Messenger

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