> For the complete documentation index, see [llms.txt](https://docs.csml.dev/studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.csml.dev/studio/channels/google-chat/features.md).

# Features

## Text

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

````cpp
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```" 

````

![Regular text](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOlz6z4KoN6cSnudad4%2FText%20simple%20-%20google.png?alt=media\&token=77a06d3e-7f2e-405c-be66-a35b5ceb0885)

![Formatted text](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOlz4tSXgtRjY51rm1Z%2FText%20formatte%CC%81%20-%20google.png?alt=media\&token=bfa26115-47c8-4bc2-beaa-54a1e1c0630a)

## 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:

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

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOlzWXLZELse9UiBBOU%2FUrl.png?alt=media\&token=fbe753a8-e5c6-4439-9519-cae3040b41cc)

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

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

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOlzjUNPFQqY9BcwSn4%2FImage.png?alt=media\&token=fd4782f1-8b56-42bb-85e1-f5361fdeb862)

## 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.

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOm0Nmar1ZFbFQ2cU36%2FVideo%20-%20player%20known%20by%20google.png?alt=media\&token=5a5186ce-2958-4fb7-8efc-51346891ee49)

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

```cpp
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"
)

```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOm0H9PbMjuYO-ze5WV%2FVideo%20-%20wrapped%20in%20a%20card.png?alt=media\&token=b825fcfb-2c0d-4c78-9618-587adb25f8fe)

## 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:

```cpp

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])
```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOlyaIarX6i_ih_aEZq%2FCarousel.png?alt=media\&token=d02fbfc7-f6f2-4a2c-8270-3664e617fb85)

## Raw objects

You can send any valid message as per [Google Chat's API reference](https://developers.google.com/hangouts/chat/reference/message-formats/basic) as a raw object:

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

This example renders a raw image:

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOm-Na8irdZco7HQZFY%2FRaw%20image%20object.png?alt=media\&token=5131aa2b-00b5-4a98-891c-672972ba1044)

## 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:

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOlxAaQFp0LNTWigjIZ%2Fimage.png?alt=media\&token=684f593a-6f0b-4ba4-8eed-dd6f36e48ae8)

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

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2F-MOlpuTY_yxL-V7mU4St%2F-MOlxSyvSgcVRiciabkl%2Fimage.png?alt=media\&token=ca933020-c4d1-4270-978d-e36f779ca82b)

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

```javascript
{
    "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:

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


```