Menambahkan teks dan gambar ke kartu (original) (raw)

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

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

Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan dan antarmuka pengguna untuk aplikasi Chat:

Buka Pembuat Kartu

Prasyarat

Aplikasi Google Chat yang dikonfigurasi untuk menerima dan merespons peristiwa interaksi. Untuk membuat aplikasi Chat interaktif, selesaikan salah satu panduan memulai berikut berdasarkanarsitektur aplikasi yang ingin Anda gunakan:

• Layanan HTTP dengan Google Cloud Functions
• Google Apps Script
• Google Cloud Dialogflow CX
• Google Cloud Pub/Sub

Menambahkan gambar atau ikon

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

Tambahkan gambar

Widget Imagemenampilkan 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 Imagemendukungtindakan onclickyang terjadi saat pengguna mengklik gambar. Contoh tindakan onclick meliputi:

• Buka hyperlink denganOpenLink, seperti hyperlink ke dokumentasi developer Google Chat,https://developers.google.com/chat.
• Jalankantindakanyang 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 terbatas. Widget imageCompent memungkinkan Anda menerapkan cropStyle dan borderStyle ke gambar.

Contoh berikut menunjukkan dua gambar dalam petak dengan salah satu gambar dipangkas:

Anda dapat menyesuaikan bentuk komponen gambar dengan menerapkancropStyle. Ada beberapa bentuk yang dapat diterapkan ke 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 menggunakan RECTANGLE_4_3 untuk menerapkan pemangkasan persegi panjang dengan rasio aspek 4:3.

Contoh berikut menunjukkan lima gambar dalam petak dengan cropStyleyang berbeda diterapkan ke setiap gambar:

Tambahkan ikon

Widget Icon mewakili ikon bawaan atau ikon kustom. Anda menambahkan ikon ke kartu untuk melakukan salah satu tindakan berikut:

• Menampilkan ikon mandiri.
• Menampilkan 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:

Bagian ini menjelaskan cara menambahkan dan memformat teks di kartu.

Menambahkan paragraf teks berformat

Widget TextParagraph menampilkan paragraf teks dengan pemformatan HTML opsional. Saat menetapkan konten teks widget ini, cukup sertakan tag HTML yang sesuai. Untuk mengetahui informasi selengkapnya tentang tag HTML yang didukung, lihatMemformat teks yang muncul di kartu.

Misalnya, format berikut tersedia untuk teks paragraf:

• Menampilkan teks tebal, bergaris bawah, 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 <font color="#ea9999">font tags</font> HTML.

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 pemformatan HTML sederhana:

Menambahkan paragraf teks yang dapat diciutkan

Paragraf teks yang dapat diciutkan memungkinkan pengguna menampilkan informasi lebih lanjut sesuai permintaan. Widget ini sangat cocok untuk menampilkan konten panjang atau detail tambahan yang dapat dijelajahi saat dipilih, sehingga menciptakan pengalaman pengguna yang dinamis dan interaktif.

Menampilkan teks dengan elemen dekoratif

WidgetDecoratedText menampilkan teks dengan tata letak dan kemampuan opsional. Contoh:

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

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 pemformatan HTML teks sederhana. Saat menetapkan konten teks widget ini, cukup sertakan tag HTML yang sesuai. Untuk mengetahui informasi selengkapnya tentang tag HTML yang didukung, lihatPemformatan 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 Google Chat ataukartu menampilkan error, antarmuka Chat akan menampilkan pesan yang bertuliskan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error, tetapi aplikasi atau kartu Chat menghasilkan hasil yang tidak terduga; 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, lihatMemecahkan masalah dan memperbaiki error Google Chat.

• Lihat contoh aplikasi Chat yang menggunakan kartu.
• Image
• imageCompent
• cropStyle
• Icon
• TextParagraph
• DecoratedText