Skip to main content

​
Edit Template

SuprSend provides two ways to design Slack templates:
  • Text Editor: For simple text-based messages with variable interpolation
  • JSONNET Editor: For rich, interactive templates using Slack’s Block Kit with buttons, images, and complex layouts

​
Text Editor

The text editor is ideal for simple text messages with variable content. You can add variables in Handlebars syntax as {{...}}. If the output has special html text, enclose variable in triple curly braces as {{{url}}} to avoid HTML escaping. 
New Signup request in ABC company

UserName: {{user_name}}
Email: {{user_email}}
Organization: {{org.name}}
Domain: {{org.domain}}

​
JSONNET Editor

The JSONNET editor enables rich template design using Slack Block Kit Builder. This allows you to create interactive templates with buttons, images, checkboxes, and styled text. It is essentially JSON template where variables can be added in JSONNET syntax as data.variable_name or data["$variable_name"]. Slack Editor Demo

​
Template Examples

Slack Text Message Pn
[
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": "New Signup on ABC company"
    }
  },
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": ">_UserName_: *%(user_name)s*\n>_Email_: *%(email)s*\n>_Organization_: *%(org_name)s*\n>_Domain_: *%(domain)s*" % {
        user_name: data.user_name, 
        email: data.user_email, 
        org_name: data.org.name, 
        domain: data.org.domain
      }
    }
  },
  {
    "type": "divider"
  }
]
Slack Approval Template Pn
[
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": "Share access requested for *<%(document_link)s|%(document_name)s>*" % {
        document_link: data.document_link,
        document_name: data.document_name
      }
    }
  },
  {
    "type": "section",
    "fields": [
      {
        "type": "mrkdwn",
        "text": "*Requested by:*\n" + data.requester_name
      },
      {
        "type": "mrkdwn",
        "text": "*When:*\n" + data.submitted_at
      },
      {
        "type": "mrkdwn",
        "text": "*Reason:*\n" + data.access_reason
      }
    ]
  },
  {
    "type": "actions",
    "elements": [
      {
        "type": "button",
        "text": {
          "type": "plain_text",
          "emoji": true,
          "text": "Approve"
        },
        "style": "primary",
        "value": "approve_access"
      },
      {
        "type": "button",
        "text": {
          "type": "plain_text",
          "emoji": true,
          "text": "Deny"
        },
        "style": "danger",
        "value": "deny_access"
      }
    ]
  }
]
Slack Anomaly Alert Pn
[
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": ":warning: *High Error Rate Detected*\nOur system has experienced a spike in errors over the last *30 minutes*."
    }
  },
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": "The error rate has significantly increased, impacting reliability.\nPlease investigate immediately to avoid service degradation."
    }
  },
  {
    "type": "image",
    "title": {
      "type": "plain_text",
      "text": "Request vs Failure Trend (Last 6 Hours)",
      "emoji": true
    },
    "image_url": data.image_url,
    "alt_text": "Graph showing high error rate spike"
  },
  {
    "type": "section",
    "fields": [
      {
        "type": "mrkdwn",
        "text": "*Impacted Services:*\n" + data.impacted_services
      },
      {
        "type": "mrkdwn",
        "text": "*Time Range:*\n" + data.time_range
      },
      {
        "type": "mrkdwn",
        "text": "*Error Rate:*\n" + data.error_rate
      }
    ]
  },
  {
    "type": "divider"
  },
  {
    "type": "context",
    "elements": [
      {
        "type": "mrkdwn",
        "text": "🔍 View logs: <%(log_url)s|Open in Monitoring Tool>\n📊 See metrics dashboard: <%(dashboard_url)s|Error Trends>" % {
          log_url: data.log_url,
          dashboard_url: data.dashboard_url
        }
      }
    ]
  }
]
Slack Task Reminder Pn
[
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": "Hi " + data["$recipient"].name + " :wave:"
    }
  },
  {
    "type": "section",
    "text": {
      "type": "mrkdwn",
      "text": "You have "+data["$batched_events_count"]+" *pending tasks* for today:"
    }
  },
  {
    "type": "rich_text",
    "elements": [
      {
        "type": "rich_text_list",
        "style": "bullet",
        "indent": 0,
        "elements": [
          {
            "type": "rich_text_section",
            "elements": [
              {
                "type": "text",
                "text": task.title + " (" + task.status + ")"
              }
            ]
          }
          for task in data["$batched_events"]
        ]
      }
    ]
  },
  {
    "type": "actions",
    "elements": [
      {
        "type": "button",
        "text": {
          "type": "plain_text",
          "text": "View Pending tasks",
          "emoji": true
        },
        "url": "https://app.company.com/tasks",
        "value": "task_url"
      }
    ]
  }
]

​
Adding dynamic content

Here’s how you can different types of variables in both handlebars and JSONNET syntax.
Variable TypeHandlebars SyntaxJSONNET Syntax
Parent Level variables{{user_name}}data.user_name
Nested Object{{org.name}}data.org.name
Print Array element at Index{{task_list.[0].task_name}}data.task_list[0].task_name
Recipient{{$recipient.name}}data["$recipient"].name
Actor{{$actor.name}}data["$actor"].name
Tenant{{$tenant.brand_name}}data["$tenant"].brand_name
Print each item in the Array 
{{#each task_list}}
{{task_name}}: {{task_description}}
{{/each}}
Conditional Logic 
{{#if is_new_org}}
New Organization
{{else}}
Existing Organization
{{/if}}
Batched Template 
Total events: {{$batched_events_count}}

{{#each $batched_events}}
{{item}}
{{/each}}

​
Preview Template

  1. Add mock JSON data using the Mock data button for all variables used in the template
  2. Click Load Preview to see the rendered template
  3. For JSONNET templates, click View in Slack Block Kit to see the actual Slack UI preview
You must add mock data for all variables in your template. Missing mock data will cause rendering errors and prevent the preview from loading.
Slack Preview Demo

​
Publish Template

Once your template is ready, click Publish Draft and provide a version name to publish it. The published template becomes the live version and will be used whenever the associated workflow is triggered.

​
Test Template

Use this option to send a test message in Slack and preview how it will appear in user’s device. Click the Test button, then enter the user’s distinct_id and select the Slack channel where the test message should be sent.
Template testing only uses the published Live version, so make sure to publish your changes before testing.

​
Promote to Production

You can clone template across workspaces by using Clone -> Outside Template option. Clone -> Within template can be used to clone within different languages and versions of the same template.
Best Practice: Always design templates in your staging workspace first, then promote them to production. This ensures thorough testing of the changes without impacting end users.