Halaman ini menjelaskan cara menambahkan teks dan gambar ke kartu atau pesan dialog, dan untuk mengubah bagaimana teks dan gambar muncul dalam pesan.
Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:
Membuka Card BuilderPrasyarat
Aplikasi Google Chat yang diaktifkan untuk fitur interaktif. Untuk membuat aplikasi Chat interaktif, selesaikan salah satu panduan memulai berikut berdasarkan pada arsitektur aplikasi yang ingin Anda gunakan:
- Layanan HTTP dengan Google Cloud Functions
- Skrip Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Tambahkan gambar
Tujuan
Widget Image
menampilkan gambar PNG atau JPG yang dihosting di URL HTTPS.
Lebar gambar yang ditampilkan mengisi lebar kartu yang ditampilkan, dan
tingginya akan disesuaikan untuk mempertahankan rasio aspek gambar. Widget Image
mendukung
onclick
tindakan
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
. - Jalankan 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
. 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. Channel
Widget imageCompent
memungkinkan Anda menerapkan cropStyle
dan borderStyle
ke gambar.
Contoh berikut menampilkan dua gambar dalam petak dengan salah satu gambarnya 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 aspek kustom rasio. 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
yang berbeda
yang diterapkan ke setiap gambar:
Tambahkan ikon
Tujuan
Widget Icon
mewakili
bawaan
ikon atau
kustom
ikon. Anda dapat menggunakan Icon
di
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 | PANDUAN BUKU | ||
BUS | MOBIL | ||
JAM | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | DOLAR | ||
EVENT_SEAT | |||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
HOTEL | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
LANGGANAN | MULTIPLE_PEOPLE | ||
ORANG | TELEPON | ||
RESTAURANT_ICON | SHOPPING_CART | ||
STAR | TOKO | ||
TIKET | LATIHAN | ||
VIDEO_CAMERA | VIDEO_PLAY |
Menambahkan paragraf teks berformat
Tujuan
Widget TextParagraph
menampilkan paragraf teks dengan format HTML opsional. Saat menetapkan
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 HTML
<b>
,<u>
,<i>
{i>tag<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
mirip dengan tag <p>
HTML.
Berikut adalah kartu yang terdiri dari dua widget TextParagraph
yang digunakan untuk
menampilkan dua paragraf dengan format HTML yang sederhana:
Menampilkan teks dengan elemen dekoratif
Tujuan
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 di
mudah digunakan dan interaktif. Widget ini cocok untuk kasus penggunaan seperti
kartu kontak, pembaruan status pesanan, dan notifikasi tiket kerja.
Widget DecoratedText
mendukung format HTML teks sederhana. Saat menetapkan
konten teks dari widget ini, cukup sertakan tag HTML yang sesuai. Sebagai
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 web:
Memecahkan masalah
Saat aplikasi Google Chat atau kartu menampilkan error, Antarmuka Chat menampilkan pesan yang bertuliskan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi Chat atau memberikan hasil yang tidak diharapkan; misalnya, pesan kartu mungkin tidak akan 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 bantuan melihat, men-debug, dan memperbaiki error, melihat Memecahkan masalah dan memperbaiki error Google Chat.