Skill 139 · Build Zoom Team Chat App
Subchapter 139.5
references/message-cards.mdMarkdown7 KBView on GitHub
Complete reference for building rich interactive messages in Zoom Team Chat chatbots.
Every chatbot message has this structure:
{
"content": {
"head": { // Optional header
"text": "Title",
"sub_head": { "text": "Subtitle" }
},
"body": [ // Array of components
{ "type": "message", "text": "Content" },
{ "type": "actions", "items": [...] }
// ... more components
]
}
}Plain text content.
{
"type": "message",
"text": "Hello, this is plain text"
}Title text with optional styling.
{
"type": "header",
"text": "Main Heading",
"style": {
"bold": true,
"italic": false
}
}Text with markdown-like styling.
{
"type": "styled_text",
"text": "**Bold** *italic* `code`"
}Clickable buttons that trigger webhooks.
{
"type": "actions",
"items": [
{
"text": "Approve",
"value": "approve",
"style": "Primary" // Primary, Danger, Default
},
{
"text": "Reject",
"value": "reject",
"style": "Danger"
}
]
}Styles:
Primary - Blue buttonDanger - Red buttonDefault - Gray buttonSelect menu with options.
{
"type": "dropdown",
"select_items": [
{ "text": "Option 1", "value": "opt1" },
{ "text": "Option 2", "value": "opt2" }
]
}Text input field.
{
"type": "form_field",
"editable": true,
"text": "Enter your name"
}Group components with optional colored sidebar.
{
"type": "section",
"sidebar_color": "#3b82f6", // Hex color
"sections": [
{ "type": "message", "text": "Grouped content" }
]
}Common colors:
#10b981 (green)#ef4444 (red)#f59e0b (orange)#3b82f6 (blue)Key-value pairs displayed in columns.
{
"type": "fields",
"items": [
{ "key": "Status", "value": "Active" },
{ "key": "Priority", "value": "High" },
{ "key": "Assignee", "value": "John Doe" }
]
}Horizontal line separator.
{
"type": "divider"
}Image with optional link.
{
"type": "attachments",
"img_url": "https://example.com/image.jpg",
"resource_url": "https://example.com/full-page",
"information": {
"title": { "text": "Image Title" },
"description": { "text": "Click to view" }
}
}{
"content": {
"head": {
"text": "Build #123 Complete",
"sub_head": { "text": "main branch" }
},
"body": [
{
"type": "section",
"sidebar_color": "#10b981",
"sections": [
{ "type": "message", "text": "✅ Build completed successfully" }
]
},
{
"type": "fields",
"items": [
{ "key": "Branch", "value": "main" },
{ "key": "Commit", "value": "abc123" },
{ "key": "Duration", "value": "2m 34s" }
]
},
{
"type": "actions",
"items": [
{ "text": "View Logs", "value": "view_logs", "style": "Primary" },
{ "text": "Deploy", "value": "deploy", "style": "Default" }
]
}
]
}
}{
"content": {
"head": {
"text": "Expense Approval Required"
},
"body": [
{ "type": "message", "text": "John Doe submitted an expense report" },
{
"type": "fields",
"items": [
{ "key": "Amount", "value": "$500.00" },
{ "key": "Category", "value": "Travel" },
{ "key": "Date", "value": "Feb 9, 2026" }
]
},
{ "type": "divider" },
{
"type": "actions",
"items": [
{ "text": "Approve", "value": "approve_500", "style": "Primary" },
{ "text": "Reject", "value": "reject_500", "style": "Danger" },
{ "text": "View Details", "value": "details_500", "style": "Default" }
]
}
]
}
}{
"content": {
"head": {
"text": "⚠️ Service Alert"
},
"body": [
{
"type": "section",
"sidebar_color": "#ef4444",
"sections": [
{ "type": "message", "text": "Database connection failed" }
]
},
{
"type": "fields",
"items": [
{ "key": "Service", "value": "api-prod" },
{ "key": "Error", "value": "Connection timeout" },
{ "key": "Time", "value": "2026-02-09 18:30:00 UTC" }
]
},
{
"type": "actions",
"items": [
{ "text": "View Logs", "value": "logs", "style": "Primary" },
{ "text": "Acknowledge", "value": "ack", "style": "Default" }
]
}
]
}
}| Component | Limit |
|---|---|
| Message text | 4,096 characters |
| Button text | 40 characters |
| Field key/value | 256 characters each |
| Dropdown options | 100 options |
| Buttons per message | 5 buttons |
✅ DO: Use clear, action-oriented labels
❌ DON’T: Use vague labels
✅ DO: Use semantic colors
#10b981) for success#ef4444) for errors/destructive actions#3b82f6) for info#f59e0b) for warnings❌ DON’T: Use random colors without meaning
✅ DO: Keep keys concise, values informative
{ "key": "Status", "value": "Active" }❌ DON’T: Make keys too long
{ "key": "The current status of the request", "value": "Active" }Use the Team Chat App Card Builder (opens in a new tab) to: