Text

Google Chat lets you format text. So you can either use regular text or formatted text:

say "His palms are sweaty, knees weak, arms are heavy" // short form
say Text("There's vomit on his sweater already, mom's spaghetti") // long form

/**
 * Text formatting:
 * bold: * before and after text.
 * italic: _ before and after text.
 * stripe: ~ before and after text.
 * integrated code block: ` before and after text.
 * multiline code block: ``` before and after text.
 */

say "He's _nervous_, but *on the surface* he looks ~calm and ready~  To `drop` candies, but he ```keeps on forgettin```" 

Typing, Wait

Google Chat does not have a typing indicator. Typings are simply interpreted as delays.

Url, Audio, File

Google Chat unfurls URLs and displays a preview of the content of the page. For instance:

say Url("https://www.wikipedia.org/")

Google does not provide a way to display an audio player or to upload a file from the bot. These components will be rendered as simple Urls.

Image

say Image("https://picsum.photos/200")

Video

In some cases, Google Chat will be able to automatically display a video player in the conversation. This is obviously the case with Youtube videos, but it also works with some other players.

In other cases, you can add some optional parameters to the video to wrap it and render it better:

• title - the title that will appear on the video card

• thumbnail_url - the url to the thumbnail image

• button - the clickable button to open the video

say Video("https://www.youtube.com/watch?v=CS58YQaVIaA")
say Video(
  "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4",
  title="Lorem ipsum",
  button=Button("Play this video"),
  thumbnail_url="https://picsum.photos/200"
)

Carousel, Card

There is no concept of Carousel in Google Chat, but cards can be stacked vertically. When using a Carousel component, this is the end result:

do card1 = Card(
  "The Marshall Mathers LP",
  subtitle="Release date: May 23, 2000",
  image_url="https://upload.wikimedia.org/wikipedia/en/a/ae/The_Marshall_Mathers_LP.jpg",
  default_action=Url("https://www.eminem.com/"),
  buttons=[
      Button("Listen to this album", payload="marshallmatherslp1"),
      Url("https://www.eminem.com/", text="Visit eminem.com"),
  ]
)
do card2 = Card(
  "The Slim Shady LP",
  subtitle="Release date: February 23, 1999",
  image_url="https://upload.wikimedia.org/wikipedia/en/3/35/Eminem_-_The_Slim_Shady_LP_CD_cover.jpg",
  default_action=Url("https://www.eminem.com/"),
  buttons=[
      Button("Listen to this album", payload="theslimshadylp"),
      Url("https://www.eminem.com/", text="Visit eminem.com"),
  ]
)
do card3 = Card(
  "The Marshall Mathers LP 2",
  subtitle="Release date: November 5, 2013",
  image_url="https://upload.wikimedia.org/wikipedia/en/8/87/The_Marshall_Mathers_LP_2.png",
  default_action=Url("https://www.eminem.com/"),
  buttons=[
      Button("Listen to this album", payload="marshallmatherslp2"),
  Url("https://www.eminem.com/", text="Visit eminem.com"),
  ]
)

say Carousel(cards=[card1, card2, card3])

Raw objects

You can send any valid message as per Google Chat's API reference as a raw object:

say {
  "cards": [{
    "header": { "imageUrl": "https://picsum.photos/200" },
    "sections": {
      "widgets": [{
        "image": {
          "imageUrl": "https://picsum.photos/200",
        },
      }],
    },
  }],
}

This example renders a raw image:

Slash Commands

In the Google Chat configuration panel, you can setup slash commands for your bot. These are nice ways to force trigger a CSML flow.

To setup a slash command, you need to create the command like so:

Then, in the AI Rules panel in CSML Studio, add a rule for this command triggering a specific flow:

When the command is used, the specified flow will be triggered with the following payload:

{
    "payload": "/mycommand",
    "text": "This is some text",
    "payload_type": "SLASH_COMMAND",
    "original_text": "/mycommand This is some text"
}

Event Metadata

A sample _metadata for an incoming event will be similar to the following object:

{
    "email": "john.doe@company.com",
    "first_name": "John",
    "last_name": "Doe",
    "name": "John Doe",
    "_channel": {
        "name": "My Channel",
        "type": "googlechat"
    }
}

Setup a Google Chat service account

Service accounts are the primary way to interact with Google Cloud resources, and setting up a chatbot is no different.

The first step is to create a new Google Cloud project. Visit https://console.cloud.google.com/projectcreate and fill the required fields:

Then, visit this page to enable the Google Chat API for this project:

Then, go to Identity > Service Accounts in the menu (or visit https://console.cloud.google.com/identity/serviceaccounts) and create a service account for the project.

In the next screen, grant the Project > Editor role to the service account:

The third step (Grant users access to this service account) is optional and can be skipped. Click on Done to create the service account.

Once the service account is created, you will need to generate a key. Select the service account, click on Add Key > Create New Key, select JSON as the Key type, and save the file.

Setup the channel in CSML Studio

In CSML Studio, under Channels > Connect a new channel, select the Google Chat channel. In the next screen, give your channel a name, a description and upload your service account credentials.

In the next screen, you can configure the bot's Welcome Flow, and copy the Chatbot Endpoint URL, which we will use in the next step.

Connect the chatbot with Google Chat

To finalize the configuration, visit https://console.developers.google.com/apis/api/chat.googleapis.com/hangouts-chat (make sure that the selected project is still the same one as before) and fill the information as requested.

You can select Bot works in direct messages or Bot works in rooms... depending on the experience you want to give to users.

Under Bot URL, paste the Chatbot Endpoint URL from the previous step.

Click Save, and you are all set!

Finding the bot in Google Chat

To find your bot in Google Chat, users have to navigate to the Bot catalog, which can be reached either by clicking the + icon next to the bot section of the left sidebar, or by searching for the name of the bot directly:

Upon activating the bot for the first time, the Welcome Message will be displayed: