How to add a option with checkbox in Google Chat aPI

Question

I'm using the Google Chat API to send daily updates. I want to have a UI like this:

Like this, I want the UI should appear, https://developers.google.com/hangouts/chat/reference/message-formats/cards I'm referring this sheet to generate those UIs.

Answer 1

Checkbox is not an available card message. You can use button widget in a card message. But there are only 2 types of buttons that you can use, its either an image button or a text button.

Buttons

• a widget may contain one or more buttons.
• buttons in the same widget will be laid out horizontally.
• buttons in a different widget will be laid out vertically.
• there are two types of buttons: ImageButton and TextButton.
• A button can specify a URL that will be opened when a user clicks on it, or an action to be handled by the bot's CARD_CLICKED event handler, as shown in Creating interactive cards.

An ImageButton may specify either a built-in icon or a custom image URL.

You can create card message using spaces.messages.create.

Sample Message Request Body: (card message)

In this example, there are 3 widgets created having 1 button in each widget so that the buttons will be aligned vertically.

{
  "cards": [
    {
      "header": {
        "title": "ChatBot",
        "imageUrl": "https://www.gstatic.com/images/icons/material/system/1x/face_black_24dp.png",

      },
      "sections": [
        {
          "widgets": [
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "I have a bike",
                    "onClick": {
                      "action": {
                        "actionMethodName": "optionClick",
                        "parameters": [
                          {
                            "key": "mode",
                            "value": "bike"
                          }
                        ]
                      }
                    }
                  }
                }
              ]
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "I have a car",
                    "onClick": {
                      "action": {
                        "actionMethodName": "optionClick",
                        "parameters": [
                          {
                            "key": "mode",
                            "value": "car"
                          }
                        ]
                      }
                    }
                  }
                }
              ]
            },
            {
              "buttons": [
                {
                  "textButton": {
                    "text": "I have a boat",
                    "onClick": {
                      "action": {
                        "actionMethodName": "optionClick",
                        "parameters": [
                          {
                            "key": "mode",
                            "value": "boat"
                          }
                        ]
                      }
                    }
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

OUTPUT: