Telegram Keyboard Button Styling

For Telegram bots, you can customize the color of keyboard buttons. This lets you visually highlight important actions and improve scenario UX.

Context and Problem

Many scenarios need a visually clear interface for Telegram users:

  • Highlight the main action (e.g., "Book appointment")
  • Mark negative or destructive actions (e.g., "Cancel")
  • Emphasize successful completion (e.g., "Confirm")

Telegram button styling addresses this by letting you choose the color for each button.

Main Concepts

Available Colors

Telegram supports three button styles:

StyleColorPurpose
primaryBlueMain action, primary option
successGreenConfirmation, successful actions
dangerRedCancellation, destructive actions

Scope

  • Channel: Telegram only
  • Keyboard types: inline keyboard and regular (reply) keyboard
  • Widget and Viber: button styles are not supported

JSON Configuration Format

The button style is set in the button's json field via the telegram.style object.

Minimal Example

Button with blue style (primary):

{
  "telegram": {
    "style": "primary"
  }
}

Combined with Other Parameters

The style can be combined with other button settings:

Link button with green style:

{
  "ActionType": "open-url",
  "ActionBody": "https://example.com/booking",
  "telegram": {
    "style": "success"
  }
}

Transition button with red style (for cancellation):

{
  "ActionType": "reply",
  "ActionBody": "Cancel",
  "telegram": {
    "style": "danger"
  }
}

Multiple styles in one message block:

Each button has its own json field. For example, three buttons with different styles:

  • Button 1 — {"telegram": {"style": "primary"}}
  • Button 2 — {"telegram": {"style": "success"}}
  • Button 3 — {"telegram": {"style": "danger"}}

Allowed Values

ValueDescription
primaryBlue button
successGreen button
dangerRed button
(empty)Default appearance (no color)

If another value is specified or the field is missing — the button uses the default appearance.

How to Configure in Scenario Builder

  1. Open a "Message with keyboard" block or another block with buttons.
  2. In each button section, find the Style field.
  3. Select the desired style from the dropdown: Primary, Success, or Danger.
  4. Changes are saved automatically to the button's JSON configuration.

The style is stored in the button's json field in the format {"telegram": {"style": "..."}}.

Implications for Users and Implementation

For Integrators

When using button styling in Telegram:

  1. Check the channel — styles work only for Telegram
  2. Use semantics — primary for main actions, danger for cancellation
  3. Avoid overload — too many colored buttons reduces readability

Common Mistakes

Issue: Button does not change color
Cause: Channel is not Telegram or incorrect JSON format
Solution: Ensure the scenario is sent to Telegram and that telegram.style contains one of the allowed values

Issue: Style ignored on older clients
Cause: Very old Telegram versions may not support styles
Solution: In such cases, the button is displayed with the default appearance

Limitations

  • Styles work only for the Telegram channel
  • Only three styles are allowed: primary, success, danger
  • Widget and Viber do not support button styling