Action

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"
}

import Courier from "@trycourier/courier";

const courier = new Courier({
  apiKey: process.env.COURIER_API_KEY,
});

await courier.send.message({
  message: {
    to: { email: "user@example.com" },
    content: {
      version: "2022-01-01",
      elements: [
        {
          type: "action",
          content: "View Dashboard",
          href: "https://app.example.com/dashboard",
        },
      ],
    },
  },
});

import os
from courier import Courier

client = Courier(api_key=os.environ["COURIER_API_KEY"])

client.send.message(
    message={
        "to": {"email": "user@example.com"},
        "content": {
            "version": "2022-01-01",
            "elements": [
                {
                    "type": "action",
                    "content": "View Dashboard",
                    "href": "https://app.example.com/dashboard",
                }
            ],
        },
    }
)

Fields

string

required

The type of element. For action elements, this value must be "action".

string

required

The text content of the action shown to the user. This is the label displayed on the button or link.

string

required

The target URL of the action. When clicked, the user will be directed to this URL.

string

A unique identifier used to identify the action when it is executed. Useful for tracking and analytics.

string

The alignment of the action button. One of "center", "left", "right", or "full". Defaults to "center".

string

The background color of the action button. Can be any valid CSS color value (e.g., "#007bff", "rgb(0, 123, 255)").

string

The visual style of the action. Can be "button" or "link". Defaults to "button".

string

Corner radius of the button, as a CSS length (e.g., "6px"). Rounds the button’s corners.

string

Padding inside the button, as a CSS padding value (e.g., "12px 18px").

string

Font size of the button label, as a CSS px value (e.g., "14px"). Email only. Button labels otherwise inherit the document-level font_size from the email channel element, so set this only when one button should differ.

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"
}

Link Style

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

Text Element - For non-interactive text content
Image Element - For images that can also link via href
Control Flow - For conditional rendering and loops
Locales - For localizing action content and URLs

Platform

Developer Tools

Help

Overview

Basic Example

Fields

Examples & Variants

Button Style

Link Style

Styled Button

With Localization

With Conditional Logic

Channel Support

​Overview

​Basic Example

​Fields

​Examples & Variants

​Button Style

​Link Style

​Styled Button

​With Localization

​With Conditional Logic

​Channel Support

​Related Elements

Overview

Basic Example

Fields

Examples & Variants

Button Style

Link Style

Styled Button

With Localization

With Conditional Logic

Channel Support

Related Elements