Halaman ini menjelaskan cara menambahkan teks dan gambar ke kartu atau pesan dialog, dan mengubah tampilan teks dan gambar dalam pesan.
Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:
Buka Pembuat KartuPrasyarat
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 akan disesuaikan untuk mempertahankan rasio aspek gambar. Widget Image
mendukung
tindakan onclick
yang terjadi saat pengguna mengklik gambar. Contoh tindakan onclick
meliputi:
- Buka hyperlink dengan
OpenLink
, seperti hyperlink ke dokumentasi developer Google Chat,https://developers.google.com/chat
. - Menjalankan tindakan yang menjalankan fungsi khusus, 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 visual terbatas. Widget imageCompent
memungkinkan Anda menerapkan cropStyle
dan borderStyle
ke gambar.
Contoh berikut menampilkan dua gambar dalam petak dengan salah satu gambar dipangkas:
Memangkas gambar
Anda dapat menyesuaikan bentuk gambar dengan menerapkan
cropStyle
.
Ada beberapa bentuk untuk diterapkan pada gambar:
- Gunakan
SQUARE
untuk menerapkan pemangkasan persegi. - Gunakan
CIRCLE
untuk menerapkan pemangkasan melingkar. - Gunakan
RECTANGLE_CUSTOM
untuk menerapkan pemangkasan persegi panjang dengan rasio aspek kustom. Misalnya, Anda dapat menggunakanRECTANGLE_4_3
untuk menerapkan pemangkasan persegi panjang dengan rasio aspek 4:3.
Contoh berikut menunjukkan lima gambar dalam petak dengan cropStyle
berbeda yang diterapkan ke setiap gambar:
Tambahkan ikon
Widget Icon
mewakili 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
. - Menampilkan 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 |
Tambahkan paragraf teks berformat
Widget TextParagraph
menampilkan paragraf teks dengan format HTML opsional. Saat menyetel konten teks dari 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
<b>
,<u>
,<i>
HTML. - Tautkan 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 mirip 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 mudah digunakan dan interaktif. Widget ini sangat 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 dari widget ini, cukup sertakan tag HTML yang sesuai. Untuk
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 masalah". 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 deskriptif dan data log tersedia untuk membantu Anda memperbaiki error saat logging error untuk aplikasi Chat diaktifkan. Untuk mendapatkan bantuan dalam melihat, men-debug, dan memperbaiki error, lihat Memecahkan masalah dan memperbaiki error Google Chat.