Ringkasan pesan Google Chat

Halaman ini menjelaskan perbedaan antara pesan teks dan pesan kartu.

Saat aplikasi Chat mengirim pesan teks untuk menyampaikan informasi dasar, pesan akan ditampilkan secara inline, sama seperti cara orang di Google Chat menulis pesan. Untuk membuat pesan yang berisi lebih dari teks, atau untuk membuat pesan yang dapat berinteraksi dengan pengguna, aplikasi Chat dapat menggunakan kartu. Aplikasi chat juga dapat menambahkan pesan teks dengan kartu. Untuk meminta pengguna menyelesaikan proses multi-langkah seperti mengisi formulir, aplikasi Chat juga dapat membuat kartu yang terbuka di jendela baru sebagai dialog.

Anatomi pesan teks

Di Google Chat API, pesan direpresentasikan sebagai objek JSON. Dalam pesan, pesan teks direpresentasikan sebagai objek text.

Dalam contoh berikut, aplikasi Chat membuat pesan teks dalam ruang untuk tim developer software yang mendekati pembekuan kode:

{
  "text": "Attention <users/all>: Code freeze starts at `11:59 am` Pacific Standard Time! If you need a little more time, type `/moreTime` and I'll push the code freeze back one hour."
}

JSON menampilkan pesan berikut:

Anatomi pesan kartu

Di Google Chat API, pesan direpresentasikan sebagai objek JSON. Dalam pesan, kartu direpresentasikan sebagai array cardsV2 dan terdiri dari hal berikut:

• Satu atau beberapa objek CardWithId.
• cardId, digunakan untuk mengidentifikasi kartu dan dicakupkan dalam pesan tertentu. (Kartu dalam pesan yang berbeda dapat memiliki ID yang sama.)

• Objek card, yang terdiri dari hal berikut:

  • Objek header yang menentukan hal-hal seperti judul, subtitel, dan gambar bergaya avatar.
  • Satu atau beberapa objek section yang masing-masing berisi setidaknya satu widget.
  • Satu atau beberapa objek widget. Setiap widget adalah objek gabungan yang dapat mewakili teks, gambar, tombol, dan jenis objek lainnya.

Misalnya, pesan kartu berikut berisi objek header, section, dan widget:

Kode berikut mewakili JSON pesan kartu:

JSON

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl": "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha"
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL"
                  },
                  "text": "[e-mail]"
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON"
                  },
                  "text": "<font color=\"#80e27e\">Online</font>"
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE"
                  },
                  "text": "[phone]"
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share"
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

---

Desain dan pratinjau kartu dengan Pembuat Kartu.

Buka Pembuat Kartu

---

Topik terkait

• Mengirim pesan
• Memformat pesan