Designing Slack Notifications using Block Kit and Jsonnet
Aydrian Howard
September 02, 2020
Table of contents
Earlier this summer, Riley Napier from our engineering team joined me for our June 24th Courier Live to help me build a Slack Slash Command to display estimated departure times for BART Stations. We created a Glitch ExpressJS app to accept the commands and Courier to handle the responses. We designed the messages by dynamically generating Block Kit using Jsonnet.
Check out the video below to watch us:
- Walk through setting up a Glitch App that handles Slack Slash Commands
- Create a notification for Slack
- Use the Jsonnet Block to dynamically create Block Kit elements
Find the full project code on the Courier Slack Slash Bart Glitch App.
Be sure to Like the video and Subscribe to our YouTube channel.
What is Jsonnet?
Jsonnet is a powerful data templating language for JSON. It has a Python-like syntax that allows you to build JSON output using variables, functions, conditionals, etc. This comes in handy when dynamically creating Block Kit elements for Slack. Courier provides the following functions that allow you to grab data and profile information.
Copied!
# Grab values by JSON path from data passed during sendlocal data = data("path", "default");# Grab values by JSON path from merged recipient profilelocal profile = profile("path", "default");
For an overview of the basics of Jsonnet syntax, check out Learn Jsonnet in Y minutes.
Displaying BART Station Departure Times
To display the Departure Times passed to the notification, we used variables, functions, and list comprehensions to generate the resulting Block Kit sections. We started with the following data originating from the BART API:
Copied!
{"data": {"date": "09/01/2020","time": "06:50:01 AM PDT","station": {"name": "Powell St.","abbr": "POWL","etd": [{"destination": "Antioch","abbreviation": "ANTC","limited": "0","estimate": [{"minutes": "7","platform": "2","direction": "North","length": "10","color": "YELLOW","hexcolor": "#ffff33","bikeflag": "1","delay": "0"},{"minutes": "37","platform": "2","direction": "North","length": "10","color": "YELLOW","hexcolor": "#ffff33","bikeflag": "1","delay": "0"},{"minutes": "66","platform": "2","direction": "North","length": "10","color": "YELLOW","hexcolor": "#ffff33","bikeflag": "1","delay": "0"}]},{"destination": "Berryessa","abbreviation": "BERY","limited": "0","estimate": [{"minutes": "9","platform": "2","direction": "North","length": "10","color": "GREEN","hexcolor": "#339933","bikeflag": "1","delay": "0"},{"minutes": "39","platform": "2","direction": "North","length": "10","color": "GREEN","hexcolor": "#339933","bikeflag": "1","delay": "0"}]}]},"message": ""}}
Using a Jsonnet block, we used the following Jsonnet code to render the Block Kit Sections
Copied!
local station = data("station");local get_image(color, direction) ="https://dummyimage.com/100x100/%s/000000.png&text=%s" % [color[1:], direction];local get_cars(length) = std.join("", [ ":train:" for x in std.range(1, std.parseInt(length))]);local is_bike(flag) =if flag == "1" then "\n:bike:" else "";local get_estimate(estimate) ={"type": "section","text": {"type": "mrkdwn","text": ":clock4: *%s min*\nPlatform %s\n%s %s" % [estimate.minutes, estimate.platform, get_cars(estimate.length), is_bike(estimate.bikeflag)]},"accessory": {"type": "image","image_url": get_image(estimate.hexcolor, estimate.direction),"alt_text": "%s %s" % [estimate.direction, estimate.color]}};local get_estimates(estimates) =[get_estimate(estimate)for estimate in estimates];local get_destinations(etd) =[{"type": "section","text": {"type": "mrkdwn","text": "*%s*" % etd.destination}}] + get_estimates(etd.estimate) +[{"type": "divider"}];std.flattenArrays([get_destinations(etd)for etd in station.etd])
This results in Block Kit that looks like the following:
Feel free to remix our Glitch app and create your own Slack Slash Command. Be sure to let us know what you create.
Is there something you’d like to see us do using Courier? Let us know and it might be the subject of our next Courier Live. We stream a new Courier Live every Wednesday at noon Pacific. Follow us on Twitch to be notified when we go live.
-Aydrian
Similar resources
Vibe Coding Notifications: How to Use Courier with Cursor or Claude Code
Courier's MCP server lets AI coding tools like Cursor and Claude Code interact directly with your notification infrastructure. Unlike Knock and Novu's MCP servers that focus on API operations, Courier's includes embedded installation guides for Node, Python, Flutter, React, and other platforms. When you prompt "add Courier to my app," your AI assistant pulls accurate setup instructions rather than relying on outdated training data. OneSignal's MCP is community-maintained, not official. Courier supports 50+ providers, native Slack/Teams integration, drop-in inbox and preference components, and a free tier of 10,000 notifications/month. Configure in Cursor with "url": "https://mcp.courier.com" and "headers": { "api_key": "YOUR_KEY" }.
By Kyle Seyler
January 22, 2026
The Complete Guide to B2B Customer Engagement
Courier provides the notification infrastructure layer for B2B customer engagement, routing messages across email, SMS, push, in-app, Slack, and Teams based on user preferences and product events. Unlike building notification systems in-house—which takes months of engineering time for features like multi-channel routing, preference management, and delivery tracking—Courier handles this infrastructure so product teams can focus on engagement strategy. B2B customer engagement requires multiple layers: notification infrastructure (Courier), customer data platforms (Segment), product analytics (Mixpanel/Amplitude), and channel-specific tools. Companies with strong engagement programs see 15-25% churn reduction. The key is connecting product events to customer communication at the right moment through the right channel, handling complexity like multiple users per account with different notification needs across work channels.
By Kyle Seyler
January 20, 2026
Customer Engagement Platform vs CRM: Key Differences Explained
A CRM stores customer data: contacts, purchases, support tickets, and pipeline. It answers "who are our customers?" A customer engagement platform (CEP) orchestrates communication across email, push, SMS, in-app, and chat. It answers "what should we tell them next?" CRMs focus on historical records. CEPs process real-time behavior and trigger messages based on actions. Most teams need both, plus a third layer: notification infrastructure for reliable multi-channel delivery. Courier bridges CEP and infrastructure by combining routing, failover, and delivery tracking with engagement features like preference management, visual templates, and in-app notification centers.
By Kyle Seyler
January 07, 2026
© 2026 Courier. All rights reserved.