# Message formats

## Text

Slack has partial markdown support in text components.

```cpp
say "His palms are sweaty, knees weak, arms are heavy"
say Text("There's vomit on his sweater already, mom's spaghetti")
say "He's _nervous_, but **on the surface** he looks ~calm and ready~"
```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6OZMoZlXP9VSWYMW_T%2Fuploads%2F4zxcC1U5FLWYx2P93Yvf%2Fimage.png?alt=media\&token=c81f7f83-65dd-4db6-8841-036528d587b6)

## Typing, Wait

In Slack, `Wait` and `Typing` have the same behavior. No typing indicator exists in slack, so the bot will simply wait for the duration given (in milliseconds) before the next message is processed.

```cpp
say Typing(1000)
say Wait(1000)
```

## Question, Button

Slack makes it possible to style your buttons and define a custom payload that is sent to the chatbot on click. Available styles are "danger" and "primary". Slacks recommends to only use primary on one button in a list, and danger even less often.

```cpp
say Question(
  "Hi! My name is:",
  buttons=[
    Button("What?", payload="btn1"),
    Button("Who?", payload="btn2", style="danger"),
    Button("Slim Shady", payload="btn3", style="primary"),
  ]
)
hold
say "User selected: {{event}}"
```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6OZMoZlXP9VSWYMW_T%2Fuploads%2F7gDLRP1O0YX96NVmPHPm%2Fimage.png?alt=media\&token=daafb1a5-9486-4fbb-872d-b2308486dd12)

CSML Studio will also take advantage of Slack's features to update the content of the component when an option is chosen, so that the user's choice appears clearly after they select an option.

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6OZMoZlXP9VSWYMW_T%2Fuploads%2FUZ6PKqluRtlt8KjBm6kM%2Fimage.png?alt=media\&token=8c8d4e47-3050-46f4-8f4e-632a9363d1e7)

## Image

Send the URL of an image. Slack will attempt to display it.

```cpp
say Image(
  "http://placekitten.com/500/500",
  title="Nice kitten", // optional
  alt="this is a photo of a cute kitten", // optional
)
```

![Both title and alt text are optional but will be available on Slack!](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6OZMoZlXP9VSWYMW_T%2Fuploads%2F9j6yXtmVxOnfXh5ketKl%2Fimage.png?alt=media\&token=816e46be-247d-45bb-ac51-a038314d3be5)

## Video, Audio, Url

Generic files will render as standard URLs. When it can, Slack will try to display the URL nicely, such as the Wikipedia link below.

```cpp
say Video("https://cdn.csml.dev/customers/93bfb0df-fb6b-4ed2-87b0-8d93a09b0ad8/files/cbaa0959-fe58-4a2a-89c3-c414a1f38748/big_buck_bunny.mp4")
say Audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3")
say Url("https://www.wikipedia.org/")
```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6OZMoZlXP9VSWYMW_T%2Fsync%2Ff842054a1d6db8f2feff2cc76abcaa40cc82fddf.jpg?generation=1590013358663401\&alt=media)

## Carousel, Card

A `Carousel` is essentially a collection of `Card` elements A single `Card` will display as a `Carousel` of 1 element.

```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",
  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",
  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",
  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%2Fsync%2F0cc77e0599f7f4ac6ceb993d834eeca214a84ce1.png?generation=1590013359395902\&alt=media)

You can add several `Button` or `Url` buttons to your `Card` components.

## Input, Textarea

```cpp
// the same works with Textarea()
say Input(
  title="Enter something below",
  description="This is a simple text field, and you can say whatever you want",
  placeholder="Whatever you want",
  submit_label="Submit",
)
```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6OZMoZlXP9VSWYMW_T%2Fuploads%2FjwmvCfS0DivNW4nplX8z%2Fimage.png?alt=media\&token=51390e6e-02ee-4e1e-b992-4972d13e2a0d)

## Radio, Dropdown

```cpp
// the same works with Dropdown()
say Radio(
  // Mandatory
  options = [
    Button("Cats 🐕", payload="meow"),
    Button("Dogs 🐶", payload="woof"),
    Button("Hot dogs 🌭", payload="yummy"),
  ],

  // Optional fields:
  title="What's your favorite animal?",
  description="You can only pick one!",
)
```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6OZMoZlXP9VSWYMW_T%2Fuploads%2FMPnwaVGLAilmhW9qdJiL%2Fimage.png?alt=media\&token=8ef1b15f-31c0-4df6-9a3c-a25121f9ba28)

## Multiselect, Checkbox

```cpp
// the same works with Multiselect()
say Checkbox(
  // Mandatory
  options = [
    Button("Cats 🐕", payload="meow"),
    Button("Dogs 🐶", payload="woof"),
    Button("Hot dogs 🌭", payload="yummy"),
  ],

  // Optional fields:
  title="What's your favorite animal?",
  description="You can pick many!",
)
```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6OZMoZlXP9VSWYMW_T%2Fuploads%2FJsXucs8MsFSBkSQetwKF%2Fimage.png?alt=media\&token=75db83b3-0a9e-4903-ba56-9f4165e6045f)

## Calendar

```cpp
say Calendar(title="Select your date of birth", submit_label="OK")
```

![](https://2862118938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M6OZMoZlXP9VSWYMW_T%2Fuploads%2Fd7I7uFofESq1qlLl0j9U%2Fimage.png?alt=media\&token=94bc8cad-7a0f-4839-8bd8-dab6cbd0da25)

## Full reference

For a complete reference of all the code presented on this page, refer to the [following gist](https://gist.github.com/frsechet/f2c59db56c149dade53c77598229d188):

{% embed url="<https://gist.github.com/frsechet/f2c59db56c149dade53c77598229d188>" %}

## Event Metadata

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

```javascript
{
  "_channel": {
    "app_id": "YYYYYYYYY",
    "type": "slack",
    "name": "Slack channel"
  },
  "last_name": "Doe",
  "user_id": "XXXXXXXX",
  "email": "john.doe@example.com",
  "first_name": "John"
}
```