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.

Template Variables

You can use dynamic variables in your message templates. Wrap the variable name in double curly braces like this: {{variableReference}}. Three types of variables are supported.

1. Data Payload Variables

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

For example, if you have a template like this,

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

In the workflow trigger, you can pass the value for this variable as -

curl --location --request POST 'https://api.engagespot.co/v3/notifications' \
--header 'X-ENGAGESPOT-API-KEY: YOUR_ENGAGESPOT_API_KEY' \
--header 'X-ENGAGESPOT-API-SECRET: YOUR_ENGAGESPOT_API_SECRET' \
--header 'Content-Type: application/json' \
--data-raw '{
    "notification": {
        "workflow": {
            "identifier": "workflowIdentifier",
            "cancellationKey": "yourUniqueCancellationKey"
        }
    },
    "data":{
        "orderNumber": "#485930"
    },
    "sendTo": {
        "recipients": [
            "your-users-unique-identifier"
        ]
    }
}'

2. 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}}.

3. 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.

4. Workflow Variables

Workflow variables are created within the workflow (using the define variable step) 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.

5. Translations Variables

Translations variables are created within the translations (using the create translation step) and can be used to store intermediate data or values calculated during the translations's execution. These variables are accessed using the {{translations.variableName}} syntax.

Example: If your Translations a welcome_message with the value Welcome to Engagespot in the spanish locale, you could create a variable named welcome_message. In your template, you can reference this as:

{{translations.welcome_message}}

Default values for variables

You can set default values for variables in the template editor. This can be useful when you want to ensure that certain variables are always available in your template, even if they are not explicitly passed in the trigger call.

To set a default value for a variable, simply add the variable name and its value in the template editor. For example:

{{or variables.welcome_message 'Welcome to Engagespot'}}

This will set the welcome_message variable to the value "Welcome to Engagespot" if it is not explicitly passed in the trigger call.

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.