Designing Slack notification templates

In this guide we'll cover how to design Slack notification templates within Knock.

When you're creating a template for a Slack step within a Knock workflow, you have two options:

  • Knock markdown editor. For simple messages that just use markdown, you can use regular markdown in Knock to write your template.
  • Knock JSON block editor. For advanced messages built using Slack's block kit UI framework, you can switch to our JSON editor to paste in your Slack JSON blocks. Liquid syntax is supported.

Markdown templates

Editing a markdown template for Slack is just like editing any other markdown-based template in Knock. You can use liquid to inject variables and add control tags (e.g. if-then, for-loop) into your template.

🌠
Knock fun fact. Slack uses a markdown-variant syntax called mrkdwn, but Knock handles this for you automatically, so you can write your templates in good old markdown .

Here's an example Slack template written in Knock using markdown.

In the example above we're using liquid's for-loop tag to iterate over the activities array produced by a Knock batch function. You can learn more about Knock batch functions and the state they produce in our batch function guide.

Block-based templates

For more advanced layouts in your Slack messages, including images and buttons, you'll need to use Slack's block kit UI framework to build your notification templates. The block kit framework is a set of different JSON objects you can use together and arrange to create Slack app and notification layouts.

Designing block kit templates

To start you'll want to design your block-based Slack message template. The best way to do this today is to use Slack's block kit builder. It gives you a drag-and-drop interface for building out your Slack templates, and outputs the JSON you'll need to bring into your Knock template.

🛣
Knock roadmap alert. In the future you'll be able to use a visual, drag-and-drop editor within Knock to build these block-based Slack templates without having to leave the Knock product.

If you're interested in trying this functionality, please shoot us a note at support@knock.app or use the feedback button at the top of this page.

Once you've designed your Slack template, copy the JSON from the block kit builder and bring it into your Knock notification template. You'll use the "Switch to JSON editor" button at the bottom right of the Knock template editor page to switch to our JSON editor, and then paste in the JSON you copied from the block kit builder.

Knock's JSON template editor

You can use liquid in the Knock JSON template editor just as you would in the markdown editor. This is helpful for both injecting variables into the text of your Slack UI blocks, as well as for for using liquid control tags to control when certain blocks should be displayed and for iterating through an array and mapping its items into a list of Slack blocks.

Here's an example of a block kit UI template with liquid syntax added to iterate through a list of items.

In the template above, we're using the activities array produced by a batch function to iterate over a number of items that we want to display in our Slack message. For each one of those items, we're producing a section that includes both text and an image, both of which are injected with variables from the activity from our activities array.

Here's an example of a Slack message produced with this template. Note: this template was produced by three separate workflow trigger calls to the Knock API, all of which were batched into a single message automatically using our batch function.

An example Slack message built with block kit UI