Elemental HTML element

The HTML element embeds raw HTML in your notification. Use it when the other Elemental elements cannot produce the structure or styling you need. The type value is "html". When to use:

Custom HTML structures (tables, complex layouts)
HTML that requires specific formatting not available in Elemental elements
Legacy HTML content that needs to be preserved
Custom styling that requires direct HTML/CSS

HTML elements only work on email. They do not render on push, SMS, or any other channel. Use standard Elemental elements for cross-channel content.

Basic example

{
  "type": "html",
  "content": "<h1>Hello, <strong>World!</strong></h1>"
}

const { requestId } = await client.send.message({
  message: {
    to: {
      email: "sarah@acme-corp.com",
    },
    content: {
      version: "2022-01-01",
      elements: [
        {
          type: "html",
          content: "<h1>Hello, <strong>World!</strong></h1>",
        },
      ],
    },
  },
});

response = client.send.message(
    message={
      "to": {
        "email": "sarah@acme-corp.com",
      },
      "content": {
        "version": "2022-01-01",
        "elements": [
          {
            "type": "html",
            "content": "<h1>Hello, <strong>World!</strong></h1>",
          },
        ],
      },
    },
)

curl -X POST https://api.courier.com/send \
  -H "Authorization: Bearer $COURIER_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
      "message": {
        "to": {
          "email": "sarah@acme-corp.com"
        },
        "content": {
          "version": "2022-01-01",
          "elements": [
            {
              "type": "html",
              "content": "<h1>Hello, <strong>World!</strong></h1>"
            }
          ]
        }
      }
    }'

response = courier.send_.message(
  message: {
    to: {
      email: "sarah@acme-corp.com"
    },
    content: {
      version: "2022-01-01",
      elements: [
        {
          type: "html",
          content: "<h1>Hello, <strong>World!</strong></h1>"
        }
      ]
    }
  }
)

// Elemental nodes carry no typed content fields, so pass the document as raw JSON.
content := param.Override[shared.ElementalContentParam](json.RawMessage(`{
  "version": "2022-01-01",
  "elements": [
    {
      "type": "html",
      "content": "<h1>Hello, <strong>World!</strong></h1>"
    }
  ]
}`))

response, err := client.Send.Message(context.TODO(), courier.SendMessageParams{
	Message: courier.SendMessageParamsMessage{
		To: courier.SendMessageParamsMessageToUnion{
			OfUserRecipient: &shared.UserRecipientParam{
				Email: courier.String("sarah@acme-corp.com"),
			},
		},
		Content: courier.SendMessageParamsMessageContentUnion{OfElementalContent: &content},
	},
})

SendMessageParams params = SendMessageParams.builder()
    .message(SendMessageParams.Message.builder()
        .to(JsonValue.from(java.util.Map.of("email", "sarah@acme-corp.com")))
        .content(JsonValue.from(java.util.Map.of(
                "version", "2022-01-01",
                "elements", java.util.List.of(
                  java.util.Map.of(
                    "type", "html",
                    "content", "<h1>Hello, <strong>World!</strong></h1>")))))
        .build())
    .build();
SendMessageResponse response = client.send().message(params);

$response = $client->send->message(
  message: [
    'to' => [
      'email' => 'sarah@acme-corp.com',
    ],
    'content' => [
      'version' => '2022-01-01',
      'elements' => [
        [
          'type' => 'html',
          'content' => '<h1>Hello, <strong>World!</strong></h1>',
        ],
      ],
    ],
  ],
);

// Elemental nodes expose no typed content fields, so build the document from raw JSON.
SendMessageParams parameters = new()
{
    Message = new()
    {
        To = new UserRecipient { Email = "sarah@acme-corp.com" },
        Content = ElementalContent.FromRawUnchecked(
            JsonSerializer.Deserialize<Dictionary<string, JsonElement>>("""
            {
              "version": "2022-01-01",
              "elements": [
                {
                  "type": "html",
                  "content": "<h1>Hello, <strong>World!</strong></h1>"
                }
              ]
            }
            """)),
    },
};

var response = await client.Send.Message(parameters);

courier send message \
  --api-key "$COURIER_API_KEY" \
  --message.to '{"email": "sarah@acme-corp.com"}' \
  --message.content '{"version": "2022-01-01", "elements": [{"type": "html", "content": "<h1>Hello, <strong>World!</strong></h1>"}]}'

With Courier MCP, send an email to sarah@acme-corp.com with a raw HTML block.

Fields

string

required

The raw HTML. Any valid HTML markup, including CSS styles.

object

Region-specific content for localization. See the .

string[]

An array of channel names. The HTML element renders only for the listed channels. See .

Examples and variants Simple HTML Basic HTML content:

{
  "type": "html",
  "content": "<h1>Hello, <strong>World!</strong></h1>"
}

HTML table Create custom HTML tables:

{
  "type": "html",
  "content": "<table style='width: 100%; border-collapse: collapse;'><tr><th style='border: 1px solid #ddd; padding: 8px;'>Item</th><th style='border: 1px solid #ddd; padding: 8px;'>Price</th></tr><tr><td style='border: 1px solid #ddd; padding: 8px;'>Product A</td><td style='border: 1px solid #ddd; padding: 8px;'>$99.99</td></tr></table>"
}

HTML with Handlebars Use Handlebars variables in HTML:

{
  "type": "html",
  "content": "<div><h2>Order #{{order_id}}</h2><p>Total: ${{order_total}}</p></div>"
}

HTML with localization Localize HTML content:

{
  "type": "html",
  "content": "<h1>Welcome!</h1>",
  "locales": {
    "es": {
      "content": "<h1>¡Bienvenido!</h1>"
    },
    "fr": {
      "content": "<h1>Bienvenue!</h1>"
    }
  }
}

Channel-specific HTML Only render HTML for email:

{
  "type": "html",
  "channels": ["email"],
  "content": "<div style='background: #f5f5f5; padding: 20px;'>Email-only HTML content</div>"
}

Best practices

Use sparingly: prefer standard Elemental elements for cross-channel compatibility
Email only: HTML elements only work in email channels
Test thoroughly: HTML rendering varies across email clients. Test in several
Use inline styles: email clients often strip <style> tags, so use inline CSS
Keep it simple: complex HTML may not render correctly in all email clients

Channel support

Email: ✅ Full support
Push: ❌ Not supported
SMS: ❌ Not supported
Inbox: ❌ Not supported

Get started

Send messages

Journeys

Broadcasts

Design

Recipients

Tenants

Monitoring

Workspaces

Resources

Elemental HTML element

Best practices

​Best practices

Best practices