Send an app home card message for a Google Chat app

Python

• A Google Workspace account with access to Google Chat.
• A published Chat app. To build a Chat app, see this quickstart.
• A Google Chat app configured for interactivity. For more information, see Configure your Google Chat app to receive interaction events.

Apps Script

• A Google Workspace account with access to Google Chat.
• A published Chat app. To build a Chat app, follow this quickstart.
• A Google Chat app configured for interactivity. For more information, see Configure your Google Chat app to receive interaction events.

Python

1. In the Google Cloud console, go to Menu menu > More products > Google Workspace > Product Library > Google Chat API.

   Go to Google Chat API

2. Click Manage, and then click the Configuration tab.

3. Enable Support App Home.

4. Select the Support App Home checkbox.

5. In the App Home URL field, add a URL. This value is usually the same URL as the App URL. This URL is called for APP_HOME events.

6. Click Save.

Apps Script

1. In the Google Cloud console, go to Menu menu > More products > Google Workspace > Product Library > Google Chat API.

   Go to Google Chat API

2. Click Manage, and then click the Configuration tab.

3. Select the Support App Home checkbox.

4. Click Save.

Python

When a user open a direct message from a Chat app, an APP_HOME event is sent to your Chat app. When an Chat app receives this event, a JSON instance of RenderActions is returned with pushCard navigation.

@app.route('/', methods=['POST'])
def on_event():
  event = request.get_json()
  chat = event.get('chat')
  if chat is not None:
    return handle_chat_event(event)

def handle_chat_event(event):
  if event['chat'].get('type') == 'APP_HOME':
    return get_app_home_card()

def get_app_home_card():
  return {
    "action": {
      "navigations": [
        {
          "pushCard": {
            "sections": [
              {
                "widgets": [
                  {
                    "buttonList": {
                      "buttons": [
                        {
                          "text": "Open documentation",
                          "onClick": {
                            "openLink": {
                              "url": "https://developers.google.com/chat"
                            }
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }

Apps Script

This example sends a card message by returning card JSON. You can also use the Apps Script card service.

Implement an onAppHome function to return a JSON instance of RenderActions with pushCard navigation:

// "onAppHome" is the pre-defined name of the callback that the Chat servers
// execute.
function onAppHome() {
  return {
    action: {
      navigations: [
        {
          pushCard: getCard()
        }
      ]
    }
  };
}

function getCard() {
  return {
    sections: [
      {
        widgets: [
          {
            buttonList: {
              buttons: [
                {
                  text: "Open documentation",
                  onClick: {
                    openLink: {
                      url: "https://developers.google.com/chat"
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  };
}

Python

For HTTP apps, updating the app home card message is similar to Process information inputted by users, but you must return RenderActions. invokedFunction represents the name of the invoked function associated with the Card widget. For more information, see CommonEventObject. In the following example, submitForm shows that the user has submitted form data:

@app.route('/', methods=['POST'])
def on_event():
  event = request.get_json()
  chat = event.get('chat')
  if chat is not None:
    return handle_chat_event(event)

def handle_chat_event(event):
  if event['chat'].get('type') == 'SUBMIT_FORM':
    event_object = event.get('commonEventObject')
    if event_object is not None:
      // Forms
      if 'submitForm' == event_object.get('invokedFunction'):
        return {
          'render_actions': {
            'action': {
              'navigations': [{
                'updateCard': get_update_card()
              }]
            }
          }
        }

def get_update_card():
  return {
      "action": {
          "navigations": [{
              "pushCard": {
                  "sections": [{
                      "widgets": [{
                          "buttonList": {
                              "buttons": [{
                                  "text": "Open documentation",
                                  "onClick": {
                                      "openLink": {
                                          "url": "https://developers.google.com/chat"
                                      }
                                  },
                              }]
                          }
                      }]
                  }]
              }
          }]
      }
  }

Apps Script

This example sends a card message by returning card JSON. You can also use the Apps Script card service.

// Called from elsewhere (i.e. on button press).
function updateAppHomeCard(event) {
  return {
    render_actions: {
      action: {
        navigations: [
          {
            updateCard: getCard()
          }
        ]
      }
    }
  }
}

function getCard() {
  return {
    sections: [
      {
        widgets: [
          {
            buttonList: {
              buttons: [
                {
                  text: "Open documentation",
                  onClick: {
                    openLink: {
                      url: "https://developers.google.com/chat"
                    }
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  };
}