Product
Docs
Resources
Log InSign Up
All Posts
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!

More from Courier

pride-hiring-2022-thumbnail
COURIER

How LGBTQ+ Diversity Builds Better Companies

In honor of Pride month, let’s talk about the power of diversity and how tech companies should improve i...

Nathalia Sandoval

June 30, 2022

series-b-thumbnail
COURIER

Courier Raised a $35M Series B to Make Notifications Delightful

We’re excited to announce that we’ve raised $35M to provide engineering teams with fantastic notificatio...

Troy Goode

June 21, 2022

Build your first notification in minutes

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

Email & push notification

Build your first notification in minutes

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

Email & push notification

Product

Pricing

Providers

Developers

Documentation

API

Libraries

Status

© 2022 Courier. All rights reserved.