Menambahkan teks dan gambar ke kartu atau dialog

Halaman ini menjelaskan cara menambahkan teks dan gambar ke kartu atau pesan dialog, dan mengubah tampilan teks dan gambar dalam pesan.


Desain dan pratinjau kartu dengan Pembuat Kartu.

Buka Pembuat Kartu

Prasyarat

  • Akun Google Workspace dengan akses ke Google Chat.
  • Aplikasi Chat yang dipublikasikan. Untuk mem-build aplikasi Chat, ikuti quickstart ini.
  • 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 menggunakan RECTANGLE_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
    EMAIL 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 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 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.