Menambahkan teks dan gambar ke kartu

Halaman ini menjelaskan cara menambahkan dan memformat teks dan gambar ke kartu.

Untuk mempelajari lebih lanjut cara membuat kartu, lihat Membuat kartu untuk aplikasi Google Chat.

Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:

Membuka Card Builder

Prasyarat

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:

Tambahkan gambar atau ikon

Bagian ini menjelaskan cara menambahkan elemen visual ke kartu seperti gambar, komponen gambar, dan ikon.

Tambahkan gambar

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 terpangkas:

Anda dapat menyesuaikan bentuk komponen 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 menggunakan RECTANGLE_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 menambahkan ikon ke kartu untuk melakukan salah satu hal 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
EMAIL EVENT_SEAT
FLIGHT_ARRIVAL FLIGHT_DEPARTURE
HOTEL HOTEL_ROOM_TYPE
UNDANG MAP_PIN
LANGGANAN MULTIPLE_PEOPLE
ORANG TELEPON
RESTAURANT_ICON SHOPPING_CART
STAR TOKO
TIKET LATIHAN
VIDEO_CAMERA VIDEO_PLAY

Menambahkan teks ke kartu

Bagian ini menjelaskan cara menambahkan dan memformat teks dalam kartu.

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 Memformat teks yang muncul di 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:

Menambahkan paragraf teks yang dapat diciutkan

Paragraf teks yang dapat diciutkan memungkinkan pengguna menampilkan lebih banyak informasi sesuai permintaan. Widget ini cocok untuk menyajikan konten panjang atau detail tambahan yang dapat dieksplorasi saat dipilih, membuat pengguna yang dinamis dan interaktif pengalaman yang lancar bagi developer.

Menampilkan teks dengan elemen dekoratif

Tujuan Widget DecoratedText menampilkan teks dengan tata letak dan kemampuan opsional. Contoh:

  • Tampilkan icon di depan teks dengan startIcon.
  • Tampilkan judul sebelum teks dengan topLabel.
  • Tambahkan tombol yang dapat diklik dengan button atau tombol yang dapat diganti dengan switchControl.

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.