Product
Docs
Resources
Log InSign Up

Still marking up notification emails with HTML?

For more dynamic, delightful omnichannel notifications, you need to get started building with Courier Elemental today!

Sign up

courier-elemental-header
COURIER

Introducing Courier Elemental

Troy Goode

February 23, 2022

Marking up notification emails with HTML out of the 1990s has always been an annoyance, but now notifications need to span across additional channels such as SMS, Slack, Microsoft Teams, mobile push, web push, etc. They also need to accommodate more dynamic use cases like magic login links, multi-language notifications, and location based alerts that have caused the content formatting challenge to become far more complicated and cumbersome.

For example, if you need to trigger a notification that includes a call-to-action for email, SMS, and Slack, the CTA needs to be an HTML button in email, a plain text link in SMS, and a Slack Block element. This task typically is approached by either creating three separate templates or coding up some if/then statements, both of which get very cumbersome very quickly.

That is why we built Courier Elemental, an omni-channel markup language for notifications. Elemental provides a powerful JSON-based syntax to describe the content of your notification for email, push, chat, or any channel you use to notify users (check out the docs). With Courier Elemental, you can customize the look, language, and structure of your notification based on locale, channel, and other more advanced custom logic. Elemental not only makes the tedious parts of notification development simple, but it also enables more dynamic, engaging notification experiences that feel like a natural exetension of the core product experience. Let’s take a look at some of the notifications that Courier Elemental enables for the Bat Signal app.

Examples

A simple email notification

1
{
2
"message":{
3
"to":{
4
"email":"bruce.wayne@gmail.com"
5
},
6
"content":{
7
"title":"Password Reset!",
8
"body":"Hi Bruce, here is your temporary password: {{new_password}}"
9
},
10
"data":{
11
"new_password":"hf73*sh1!hfshjsk"
12
},
13
"routing":{
14
"method":"single",
15
"channels":[
16
"email"
17
]
18
}
19
}
20
}

A Simple Email Using Courier Elemental

A multi-channel notification with image and action

1
{
2
"message": {
3
"to": {
4
"email": "bruce.wayne@gmail.com"
5
},
6
"content": {
7
"title": "Citizen In Need",
8
"body": "Hi Bruce, {{citizen_name}} needs help!",
9
"elements": [
10
{
11
"type": "action",
12
"style": "button",
13
"content": "Directions",
14
"href": "{{directions_to_incident}}"
15
},
16
{
17
"type": "image",
18
"src": "{{citizen_image}}",
19
"href": "{{citizen_profile}}",
20
"align": "center",
21
"altText": "{{citizen_name}} Image"
22
}
23
]
24
},
25
"data": {
26
"citizen_name": "Distressed Damsel",
27
"citizen_profile": "www.bat-signal.com/profile/distressed-damsel",
28
"citizen_image": "www.bat-signal.com/profile/distressed-damsel/profile.png",
29
"directions_to_incident": "https://www.google.com/maps/dir/ghct"
30
},
31
"routing": {
32
"method": "all",
33
"channels": [
34
"email",
35
"sms",
36
"slack",
37
"push"
38
]
39
}
40
}
41
}

A Multichannel Notification With Image and Action using Courier Elemental

An email notification with conditional content

1
{
2
"message":{
3
"to":{
4
"email":"{{citizen_email}}"
5
},
6
"content":{
7
"title":"Rescue Feedback Survey",
8
"elements":[
9
{
10
"type":"text",
11
"content":"Hi {{citizen_name}}, we're so happy that your rescue was successful!
12
Please complete this survey and tell us how we did.",
13
"if":"data.rescue_success === true"
14
},
15
{
16
"type":"text",
17
"content":"Hi {{citizen_name}}, we're so sorry that your Batman was not able to provide you
18
with a successful rescue. Please complete this survey and tell us how we did.",
19
"if":"data.rescue_success === false"
20
},
21
{
22
"type":"action",
23
"style":"link",
24
"content":"Complete Survey",
25
"href":"{{survey_link}}"
26
}
27
]
28
},
29
"data":{
30
"citizen_name":"Distressed Damsel",
31
"citizen_email":"distressed.damsel@gmail.com",
32
"rescue_success": true,
33
"survey_link":"https://bit.ly/3BFUief"
34
},
35
"routing":{
36
"method":"single",
37
"channels":[
38
"email"
39
]
40
}
41
}
42
}

An Email Notification With Conditional Content From Courier Elemental

We've also put together an example app on GitHub called the Courier Alert Center to show what notification built with Elemental look like in a real code base.

What’s next?

This is just the beginning for Courier Elemental. In the coming months, we will be releasing new elements as well as new API functionality to open up even more developer use cases. One exciting use case that Courier Elemental will be enabling soon is the ability for our customers to embed a custom notification designer in their product for their end users. Imagine a teaching platform where teachers want to create notifications for students or a CRM for small businesses that wants to enable business owners to notify their customers. This is just one of many new notification use cases that will be coming to Courier in 2022.

If you want to get started building with Courier Elemental today, you only need to do two things.

  1. You need a Courier API key which you can get for free by signing up here (every developer gets 10,000 free sends per month)

  2. Once you have an account you need to configure one of the many notification providers we integrate with.

If you’d like to attend a more in-depth technical demo and ask any questions, please register for Developing With Elemental and join us next week!

Still marking up notification emails with HTML?

For more dynamic, delightful omnichannel notifications, you need to get started building with Courier Elemental today!

Sign up

More from Courier

troubleshooting-thumbnail
ENGINEERINGCOURIER

Common Courier Troubleshooting Solutions for Developers

In this post, we will discuss example issues around Courier’s Gmail integration and API rate limits, an incomplete data profile, and an incomplete request with Inbox and Toast, and how to fix them.

Rodrigo Rojas

Rodrigo Rojas

July 21, 2022

hipaa-announcement-thumbnail
COURIERENGINEERING

How We Became HIPAA Compliant

Today, we are excited to announce that Courier is now HIPAA compliant and this post will get into why SaaS companies should be HIPAA compliant, why this is important for our company, and the steps we took to get here.

Aman Kandola

Aman Kandola

July 20, 2022

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Build your first notification in minutes

Send up to 10,000 notifications every month, for free.

Get started for free

Email & push notification

Product

Pricing

Providers

Developers

Documentation

API

Libraries

Status

© 2022 Courier. All rights reserved.