Halaman ini menjelaskan cara menambahkan teks dan gambar ke kartu atau pesan dialog, dan mengubah cara teks dan gambar muncul dalam pesan.
Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:
Buka Card BuilderPrasyarat
Tambahkan gambar
Widget Image
menampilkan gambar PNG atau JPG yang dihosting di URL HTTPS.
Lebar gambar yang ditampilkan mengisi seluruh lebar kartu yang ditampilkan, dan
tingginya disesuaikan untuk mempertahankan rasio aspek gambar. Widget Image
mendukung tindakan onclick
yang terjadi saat pengguna mengklik gambar. Contoh tindakan onclick
mencakup:
- Buka hyperlink dengan
OpenLink
, seperti hyperlink ke dokumentasi developer Google Chat,https://developers.google.com/chat
. - Menjalankan tindakan yang menjalankan fungsi kustom, seperti memanggil API.
Widget Image
memiliki batasan berikut:
- Hanya gambar PNG dan JPG yang didukung.
- URL host harus
HTTPS
. - Untuk memastikan kartu berperforma tinggi, ukuran gambar maksimum yang direkomendasikan adalah 2 MB.
Berikut adalah kartu yang terdiri dari widget Image
. Halaman ini menampilkan gambar halaman landing dokumentasi developer Google Chat. Saat pengguna mengklik
gambar, dokumentasi developer Google Chat akan terbuka di tab baru.
Menambahkan komponen gambar
Widget Image
adalah gambar dengan gaya yang terbatas. Widget imageCompent
memungkinkan Anda menerapkan cropStyle
dan borderStyle
ke gambar.
Contoh berikut menampilkan dua gambar dalam petak tempat salah satu gambar dipangkas:
Memangkas gambar
Anda dapat menyesuaikan bentuk gambar dengan menerapkan
cropStyle
.
Ada beberapa bentuk untuk diterapkan ke gambar:
- Gunakan
SQUARE
untuk menerapkan pemangkasan persegi. - Gunakan
CIRCLE
untuk menerapkan pemangkasan lingkaran. - Gunakan
RECTANGLE_CUSTOM
untuk menerapkan pemangkasan persegi panjang dengan rasio aspek khusus. Misalnya, Anda dapat menggunakanRECTANGLE_4_3
untuk menerapkan pemangkasan persegi panjang dengan rasio aspek 4:3.
Contoh berikut menampilkan lima gambar dalam petak dengan cropStyle
berbeda yang diterapkan ke setiap gambar:
Tambahkan ikon
Widget Icon
merepresentasikan ikon
bawaan
atau ikon
kustom. Anda dapat menggunakan Icon
dalam
pesan kartu
dan
dialog
dengan cara berikut:
- Menampilkan ikon mandiri.
- Tampilkan ikon di depan teks terkait, sebagai bagian dari widget
DecoratedText
. - Tampilkan ikon sebagai tombol interaktif, sebagai bagian dari widget
ButtonList
.
Berikut adalah kartu yang terdiri dari komponen Icon
dengan ikon bawaan:
Tabel berikut mencantumkan ikon bawaan yang tersedia untuk pesan kartu:
pesawat | BOOKMARK | ||
BUS | MOBIL | ||
JAM | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | DOLAR | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
UNDANG | MAP_PIN | ||
LANGGANAN | MULTIPLE_PEOPLE | ||
ORANG | TELEPON | ||
RESTAURANT_ICON | SHOPPING_CART | ||
BINTANG | TOKO | ||
TIKET | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
Menambahkan paragraf teks berformat
Widget
TextParagraph
menampilkan paragraf teks dengan format HTML opsional. Saat menyetel konten teks widget ini, cukup sertakan tag HTML yang sesuai.
Untuk informasi selengkapnya tentang tag HTML yang didukung, lihat Pemformatan teks kartu.
Misalnya, format berikut tersedia untuk teks paragraf:
- Menampilkan teks tebal, digarisbawahi, atau miring dengan tag HTML
<b>
,<u>
,<i>
. - Link ke situs dengan HTML
<a href="https://www.google.com">hyperlinks</a>
. - Tambahkan beberapa warna dengan HTML
<font color="#ea9999">font tags</font>
.
Setiap widget TextParagraph
dirender sebagai paragraf baru, dan dapat dianggap serupa dengan tag <p>
HTML.
Berikut adalah kartu yang terdiri dari dua widget TextParagraph
yang digunakan untuk menampilkan dua paragraf dengan format HTML sederhana:
Menampilkan teks dengan elemen dekoratif
Widget
DecoratedText
menampilkan teks dengan tata letak dan kemampuan opsional. Contoh:
- Tampilkan
icon
di depan teks denganstartIcon
. - Tampilkan judul sebelum teks dengan
topLabel
. - Tambahkan tombol yang dapat diklik dengan
button
atau tombol yang dapat diganti denganswitchControl
.
Gunakan widget DecoratedText
saat Anda perlu menyajikan informasi dengan
cara yang interaktif dan mudah digunakan. Widget ini cocok untuk kasus penggunaan seperti
kartu kontak, pembaruan status pesanan, dan notifikasi tiket kerja.
Widget DecoratedText
mendukung format HTML teks sederhana. Saat menyetel konten teks widget ini, cukup sertakan tag HTML yang sesuai. Untuk mengetahui informasi selengkapnya tentang tag HTML yang didukung, lihat Pemformatan teks kartu.
Berikut adalah kartu yang terdiri dari widget DecoratedText
yang digunakan untuk menampilkan detail kontak, seperti alamat email, status online, nomor telepon, dan situs:
Memecahkan masalah
Saat aplikasi atau kartu Google Chat menampilkan error, antarmuka Chat akan menampilkan pesan yang menyatakan "Terjadi error". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi atau kartu Chat memberikan hasil yang tidak diharapkan; misalnya, pesan kartu mungkin tidak muncul.
Meskipun pesan error mungkin tidak ditampilkan di UI Chat, pesan error dan data log deskriptif akan tersedia untuk membantu Anda memperbaiki error saat logging error untuk aplikasi Chat diaktifkan. Untuk mendapatkan bantuan dalam melihat, melakukan proses debug, dan memperbaiki error, lihat Memecahkan masalah dan memperbaiki error Google Chat.