Skip to main content

​
Overview

The action element allows users to execute actions in your notifications. It can be rendered as either a button or a link, depending on the channel and styling options you choose. When to use:
  • Add call-to-action buttons (e.g., “Sign Up”, “View Order”, “Confirm Email”)
  • Create clickable links within notifications
  • Provide interactive elements that direct users to specific URLs

​
Basic Example

{
  "type": "action",
  "content": "Click me",
  "href": "https://example.com"
}

​
Fields

​
type
string
required
The type of element. For action elements, this value must be "action".
​
content
string
required
The text content of the action shown to the user. This is the label displayed on the button or link.
​
href
string
required
The target URL of the action. When clicked, the user will be directed to this URL.
​
action_id
string
A unique identifier used to identify the action when it is executed. Useful for tracking and analytics.
​
align
string
The alignment of the action button. One of "center", "left", "right", or "full". Defaults to "center".
​
background_color
string
The background color of the action button. Can be any valid CSS color value (e.g., "#007bff", "rgb(0, 123, 255)").
​
style
string
The visual style of the action. Can be "button" or "link". Defaults to "button".
​
locales
object
Region-specific content for localization. See the Locales documentation for more details.

​
Examples & Variants

​
Button Style

The default button style renders as a clickable button: 
{
  "type": "action",
  "content": "Get Started",
  "href": "https://example.com/start",
  "style": "button"
}
Use link style for a more subtle, text-based link: 
{
  "type": "action",
  "content": "Learn more",
  "href": "https://example.com/docs",
  "style": "link"
}

​
Styled Button

Customize the button appearance with colors and alignment: 
{
  "type": "action",
  "content": "Sign Up Now",
  "href": "https://example.com/signup",
  "style": "button",
  "background_color": "#007bff",
  "align": "center"
}

​
With Localization

Localize action content and URLs: 
{
  "type": "action",
  "content": "View Dashboard",
  "href": "https://app.example.com/dashboard",
  "locales": {
    "es": {
      "content": "Ver Panel",
      "href": "https://app.example.com/es/dashboard"
    },
    "fr": {
      "content": "Voir le Tableau de Bord",
      "href": "https://app.example.com/fr/dashboard"
    }
  }
}

​
With Conditional Logic

Show different actions based on conditions: 
{
  "type": "action",
  "content": "Upgrade Account",
  "href": "https://example.com/upgrade",
  "if": "{{user.plan}} === 'free'"
}

​
Channel Support

Action elements are supported across all channels:
  • Email: Renders as a button or link depending on style
  • Push: Renders as a clickable action button
  • SMS: Renders as a clickable link
  • Inbox: Renders as an interactive button