Tổng quan về tin nhắn trong Google Chat

Trang này giải thích sự khác biệt giữa thông báo văn bản và thông báo thẻ.

Khi các ứng dụng trong Google Chat gửi tin nhắn văn bản để truyền tải thông tin cơ bản, các tin nhắn đó sẽ xuất hiện cùng dòng, giống như cách mọi người trong Google Chat viết tin nhắn. Để tạo tin nhắn không chỉ chứa văn bản hoặc tạo tin nhắn mà người dùng có thể tương tác, các ứng dụng trong Chat có thể sử dụng thẻ. Ứng dụng nhắn tin cũng có thể thêm một tin nhắn văn bản bằng thẻ. Để nhắc người dùng hoàn tất các quy trình nhiều bước như hoàn thành biểu mẫu, các ứng dụng trong Chat cũng có thể tạo thẻ mở trong một cửa sổ mới dưới dạng hộp thoại.

Phân tích thành phần của tin nhắn văn bản

Trong API Google Chat, tin nhắn được biểu thị dưới dạng đối tượng JSON. Trong một tin nhắn, tin nhắn văn bản sẽ được biểu thị dưới dạng đối tượng text.

Trong ví dụ sau, ứng dụng Chat sẽ tạo một tin nhắn văn bản trong không gian cho một nhóm nhà phát triển phần mềm sắp bị treo mã:

{
  "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 trả về thông báo sau:

Tin nhắn văn bản mẫu trong Google Chat thông báo việc đóng mã.

Phân tích các thành phần của thông báo bằng thẻ

Trong API Google Chat, tin nhắn được biểu thị dưới dạng đối tượng JSON. Trong tin nhắn, thẻ được biểu thị dưới dạng mảng cardsV2 và bao gồm các thành phần sau:

  • Một hoặc nhiều đối tượng CardWithId.
  • cardId, dùng để xác định thẻ và nằm trong phạm vi của một tin nhắn nhất định. (Thẻ trong các thư khác nhau có thể có cùng một mã.)
  • Đối tượng card bao gồm các thành phần sau:

    • Đối tượng header chỉ định các thông tin như tiêu đề, phụ đề và hình ảnh kiểu hình đại diện.
    • Một hoặc nhiều đối tượng section mà mỗi đối tượng chứa ít nhất một tiện ích.
    • Một hoặc nhiều đối tượng widget. Mỗi tiện ích là một đối tượng kết hợp có thể biểu thị văn bản, hình ảnh, nút và các loại đối tượng khác.

Ví dụ: thông báo thẻ sau đây chứa các đối tượng header, sectionwidget:

Ứng dụng Chat chạy cuộc thăm dò ý kiến trong phòng Chat bằng thông báo bằng thẻ

Mã sau đây thể hiện JSON của thông báo thẻ:

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": "sasha@example.com"
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON"
                  },
                  "text": "<font color=\"#80e27e\">Online</font>"
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE"
                  },
                  "text": "+1 (555) 555-1234"
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share"
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}


Thiết kế và xem trước thẻ bằng Trình tạo thẻ.

Mở Trình tạo thẻ