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
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
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
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.
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 jugaurl-allowlist
Penyesuaian HTML)div
- Elemen penampungspan
- 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 |