Among other implementation options, you can create a Hangouts Chat bot using Google Apps Script. By building your bot in Apps Script, you can easily access other Google services like Drive, Gmail, Calendar, Docs, Sheets, and much more.

In this code lab, you learn how to create a simple Hangouts Chat bot—"Attendance Bot"—using Google Apps Script. The bot integrates with Gmail to set a user's vacation responder and integrates with Calendar to put a meeting on the user's calendar.

What you'll learn

How to add handlers in events raised in Hangouts Chat

How to parse event objects sent from Hangouts Chat

How to respond back to Hangouts Chat with card-formatted responses

How to define and react to custom actions for button clicks in cards

What you'll need

Access to the internet and a web browser.

A G Suite account.

Basic JavaScript skills—Google Apps Script only supports JavaScript.

Warning: You must use a G Suite account to complete this codelab. Using an @gmail.com account will result in an error when you attempt to enable the API.

You can either download a ZIP file or clone the GitHub repository to see the code for each step in this sample.

The step-NN folders contain the desired end state of each step of this codelab. They are there for reference.

Note: You can also create a new Hangouts Chat bot from a template. To do so, in the Apps Script Editor click Help > Welcome screen. In the dialog box under Create a script for, click Hangouts Chat Bot.

Events in Hangouts Chat

Most Apps Script bot interactions with Hangouts Chat are event-driven. The interaction between the user, the bot, and Hangouts chat typically follows this sequence:

A user initiates an action, like adding a bot to a room, starting a direct message (DM) with a bot, or removing the bot from a room.

ADDED_TO_SPACE: This event occurs when a human user adds a bot to a room or a direct message (DM). In Apps Script, you define an onAddToSpace() function to handle this event.

REMOVED_FROM_SPACE: This event occurs when a user removes the bot from a room or DM. This event does not post a response back to Hangouts Chat. In Apps Script, you define an onRemoveFromSpace() function to handle this event.

MESSAGE: This event occurs when a user messages the bot, either directly in a DM or as an @mention in a room. In Apps Script, you define an onMessage() function to respond to this event.

CARD_CLICKED: This event occurs when the user clicks a button with a custom action assigned to it. In Apps Script, you define an onCardClick() function to respond to this event.

Replace the contents of the Code.gs file with the following code that defines handlers for the ADDED_TO_SPACE and REMOVE_FROM_SPACE events. (You'll add handlers for the MESSAGE and CARD_CLICKED events later in this codelab.)

Under Permissions, select Specific people and group in your domain. In the text box under the drop-down menu, enter your email address associated with your G Suite organization.

Click Save changes.

Note: If you attempt to enable the Hangouts Chat API with an @gmail.com account you will see the error:

The API "chat.googleapis.com" doesn't exist or you don't have permission to access it

Ensure you are logged in with a G Suite account and/or use the account switcher at the top right of the Cloud Console to switch to a G Suite account. If you created your script with an @gmail.com account you will need to share it with your G Suite account as well.

After you save your changes, verify that the status on the Hangouts Chat API page shows the Bot Status to be LIVE – available to users.

Test the bot

When the direct message thread opens, you should see a message from the bot thanking you for adding it to a DM, as shown in the following image.

Note: The code for this bot logs the event objects received from Hangouts Chat. You can look at the structure of the event objects by viewing the logs. To open the logs, in the Apps Script editor click View > Stackdriver Logging.

In the previous step, your bot responded to Hangouts Chat events a simple text response. In this step, you will update your bot to respond with cards.

Card responses

Hangouts Chat supports the use of cards for responses. Cards are visual containers that allow you to group sets of user interface widgets together. Cards can display headers, text paragraphs, sets of buttons, images, and key/value text. Your bot can define one or many cards in its JSON response to Hangouts Chat, which then translates your response into the corresponding UI elements.

The following image shows a card response with three sections, that includes a header, a key/value widget, an image widget, and a text button.

To respond to user messages with a card response, add the following code to your bot's Code.gs file.

The onMessage() function, added in this step, reads the user's original message and constructs a response as a simple TextParagragh widget. The onMessage() function then calls createCardResponse(), which places the TextParagraph widget within a section of a single card. The bot returns the JavaScript object constructed with the card response back to Hangouts Chat.

Test the bot

To test this bot, simply go back to your direct message with the bot in Hangouts Chat and type a message (any message will do).

Note that the onMessage() event handler parses the event object passed to it by Hangouts Chat to extract the user's original message. You can also get other types of information about the event, including the name of the user that initiated the event, their email address, the name of the room that the event occurred in, and much more.

For more information about the structure of the event objects sent by Hangouts Chat, see the Event formats reference.

In the previous step, your bot responded to a message from a user—a MESSAGE event—with a simple card that contained a TextParagragh widget. In this step, you will create a response that includes buttons, where each button has a custom action defined for it.

Interactive cards

Card responses can contain one of two types of buttons: TextButton widgets, which display text-only buttons; and ImageButton widgets, which display a button with a simple icon or image without text. Both TextButton and ImageButton widgets support one of two onClick behaviors (as defined in the JSON response sent back to Hangouts Chat): either openLink or action. As the name implies, openLink opens a specified link in a new browser tab.

The action object, however, specifies a custom action for the button to perform. You can specify several arbitrary values in the action object, including a unique actionMethodName and a set of key / value parameter pairs.

Specifying an action object for the button creates an interactive card. When the user clicks the button in the message, Hangouts Chat raises a CARD_CLICKED event and sends a request back to the bot that sent the original message. The bot then needs to handle the event raised from Hangouts Chat and return a response back to the space.

Replace the onMessage() function in Code.gs with the following code. This code creates two buttons, a Set vacation in Gmail and a Block out day in Calendar button in the card sent to Hangouts Chat.

In responding to user clicks, now the bot does one of two things: it sets the user's vacation responder in Gmail to an "out of office" message; or it schedules an all-day meeting on the user's Calendar. To accomplish these tasks, the bot calls the Gmail advanced service and the Calendar Apps Script API.

Add the following code to your script to integrate the bot with Gmail and Calendar.