Skip to main content
Version: 1.4.x

Overview

Discover how to design notification template with Engagespot:

Template Editor​

Each channel step within a workflow includes a unique notification template. This template dictates the content and appearance of the notifications sent to users on the specified channel, such as email, SMS, or mobile push.

In this guide, we'll provide a comprehensive overview of the Engagespot template editor's features. You'll learn how to customize and design your notifications, ensuring they meet your specific needs and engage your users effectively.

Here's what we'll explore:

  1. Variable Insertion: How to include variables from your trigger call within your notification template.
  2. Handlebars Syntax: Methods for implementing logic and control contents using Handlebars syntax in your template.
  3. Visual Editing Tools: Utilizing components to visually design and customize your notifications.

Customizing Notifications with Template Variables​

To customize your notification templates, you can include variables that are dynamically populated with data. Wrap the variable name in double curly braces like this: {{ variableReference }}.

Different types of variables can be included in your templates. Below are some examples:

Workflow Variables​

Workflow variables are created within the workflow itself and can be used to store intermediate data or values calculated during the workflow's execution. These variables are accessed using the {{variables.variableName}} syntax.

Example: If your workflow calculates a discount based on certain conditions, you could create a variable named discountAmount. In your template, you can reference this as:

Congratulations! You've earned a discount of
{{variables.discountAmount}}% on your next purchase.

Data Payload Variables​

Data payload variables are sent along with the triggering a workflow. They are referenced using {{data.variableName}}.

Example: If an order confirmation triggers the notification, and the order details include a variable orderNumber, you can include this in your message like so:

Thank you for your purchase! Your order number is {{data.orderNumber}}.

User Attribute Variables​

User attribute variables are specific to the user receiving the notification and are typically pulled from the user's profile or account data. They are accessed using the {{recipient.variableName}} syntax.

Example: To personalize a message with the recipient's name and membership level, you could use:

Hi
{{recipient.name}}, Thank you for being a loyal customer! Your current
membership level is
{{recipient.membershipLevel}}.

Batch Notification Variables.​

When creating a batched notification, you can use the following variables to customize your template:

batching.totalCount: The total number of notifications in the batch, including the final batched notification. batching.totalCountExceptThis: The total number of notifications excluding the current batched notification. batching.notifications: An array containing all the batched notifications. batching.payloads: An array of payloads in the batch, including data variables sent with the trigger.

Example: You can use these variables to create a personalized batched notification. For example:

{{commenterName}}
and
{{batching.totalCountExceptThis}}
others commented on your post.

Adding control flow and iteration to your template.​

info

Engagespot uses Handlebars tags to create the logic and control flow for notification templates. To learn more about Handlebars, you can check out its documentation.

Use Handlebars syntax to introduce logic and control flow into your templates. This enables you to create more dynamic and responsive notifications based on different conditions or data structures.

Examples:

  • Conditional Logic:

    {{#if batching.totalCount > 1}}
      {{commenterName}} and {{batching.totalCountExceptThis}} others commented on your post.
    {{else}}
      {{commenterName}} commented on your post.
    {{/if}}

    This example checks if batching.totalCount exists. If it does, it provides a count of other commenters. Otherwise, it defaults to a simpler message.

  • Iterating Over Data:

    <ul>
      {{#each batching.payloads}}
        <li>{{this.data.commenterName}}: {{this.data.comment}}</li>
      {{/each}}
    </ul>

    This example loops through each payload in the batching.payloads array, displaying each comment and commenter name.

Creating notifications visually using drag-and-drop components​

Engagespot offers a user-friendly visual editor specifically for designing email notifications. This editor uses drag-and-drop components, making it easy to create complex layouts and maintain consistency in your emails. For other channels, like SMS or mobile push,etc..Engagespot provides a selection of predefined components that you can use to build and customize your notifications.

Let's explore more details on the specific channel pages that follow.