Notification Template Guide - Dynamic Templates Made Easy

Q: How do I test templates before sending?

NotiGrid provides several testing options: Preview with sample data in the dashboard, send test notifications to your own email, or use the SDK templates.preview() method programmatically.

Q: How do I create templates for multiple languages?

Create separate templates for each language or use conditional logic within a single template. Pass a locale variable and use if blocks for language-specific content.

Notification Templates

Templates are the foundation of your notification system. They allow you to create reusable content with dynamic variables, ensuring consistency across your notifications.

Why Use Templates?

Reusability: Write once, use everywhere
Consistency: Maintain brand voice across channels
Dynamic Content: Personalize with variables
Easy Updates: Change content in one place
Version Control: Track template changes over time

Creating Your First Template

Basic Email Template

const template = await notigrid.templates.create({
  name: 'order_confirmation',
  integration: 'email',
  subject: 'Order #{{orderNumber}} Confirmed',
  body: `
    Hi {{customerName}},
 
    Thank you for your order! Your order #{{orderNumber}} has been confirmed.
 
    Order Details:
    {{#each items}}
    - {{this.name}}: ${{this.price}}
    {{/each}}
 
    Total: ${{totalAmount}}
 
    Track your order: {{trackingLink}}
 
    Best regards,
    The {{companyName}} Team
  `,
  variables: ['customerName', 'orderNumber', 'items', 'totalAmount', 'trackingLink', 'companyName']
})

SMS Template

SMS templates should be concise:

const smsTemplate = await notigrid.templates.create({
  name: 'order_shipped',
  integration: 'sms',
  body: 'Hi {{name}}, your order #{{orderNum}} has shipped! Track: {{link}}',
  variables: ['name', 'orderNum', 'link']
})

Template Variables

Simple Variables

Replace with values:

Hello {{userName}}!

variables: {
  userName: 'John Doe'
}

Nested Objects

Access nested properties:

{{user.profile.firstName}} {{user.profile.lastName}}
Email: {{user.contact.email}}

variables: {
  user: {
    profile: { firstName: 'John', lastName: 'Doe' },
    contact: { email: 'john@example.com' }
  }
}

Arrays and Loops

Iterate over arrays:

Your cart:
{{#each items}}
- {{name}}: ${{price}}
{{/each}}

variables: {
  items: [
    { name: 'Product A', price: 29.99 },
    { name: 'Product B', price: 49.99 }
  ]
}

Conditional Logic

If Statements

Show content conditionally:

{{#if isPremium}}
As a premium member, you get 20% off!
{{/if}}
 
{{#if discount}}
Use code {{discount.code}} for {{discount.percent}}% off!
{{/if}}

variables: {
  isPremium: true,
  discount: {
    code: 'SAVE20',
    percent: 20
  }
}

If/Else

{{#if hasSubscription}}
Your subscription renews on {{renewalDate}}
{{else}}
Subscribe now to unlock premium features!
{{/if}}

Unless (Negative If)

{{#unless isVerified}}
Please verify your email to continue: {{verificationLink}}
{{/unless}}

Advanced Patterns

Dynamic Greetings

{{#if timeOfDay === 'morning'}}
Good morning, {{name}}!
{{else if timeOfDay === 'afternoon'}}
Good afternoon, {{name}}!
{{else}}
Good evening, {{name}}!
{{/if}}

Formatting Dates

Order placed: {{formatDate orderDate 'MMMM DD, YYYY'}}
Delivery by: {{formatDate deliveryDate 'MMM DD'}}

Currency Formatting

Total: {{formatCurrency total 'USD'}}
Subtotal: {{formatCurrency subtotal 'USD'}}
Tax: {{formatCurrency tax 'USD'}}

Channel-Specific Templates

Email Templates

Rich HTML content:

<!DOCTYPE html>
<html>
<head>
  <style>
    .header { background: #007bff; color: white; padding: 20px; }
    .content { padding: 20px; }
    .button { background: #28a745; color: white; padding: 10px 20px; }
  </style>
</head>
<body>
  <div class="header">
    <h1>Welcome to {{appName}}!</h1>
  </div>
  <div class="content">
    <p>Hi {{userName}},</p>
    <p>{{welcomeMessage}}</p>
    <a href="{{ctaLink}}" class="button">Get Started</a>
  </div>
</body>
</html>

Slack Templates

Use Slack's Block Kit:

{
  "blocks": [
    {
      "type": "header",
      "text": {
        "type": "plain_text",
        "text": "New Alert: {{alertTitle}}"
      }
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "*Severity:* {{severity}}\n*Message:* {{message}}"
      }
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "View Details"
          },
          "url": "{{detailsUrl}}"
        }
      ]
    }
  ]
}

Push Notification Templates

Keep it short and actionable:

{
  title: '{{title}}',
  body: '{{message}}',
  icon: '{{iconUrl}}',
  data: {
    url: '{{actionUrl}}',
    timestamp: '{{timestamp}}'
  }
}

Template Versioning

Version History

Track changes over time:

// Create new version
const v2 = await notigrid.templates.update(templateId, {
  body: 'Updated content with {{newVariable}}',
  variables: [...existingVars, 'newVariable']
})
 
// View history
const versions = await notigrid.templates.getVersions(templateId)

Rollback

Revert to previous version:

await notigrid.templates.rollback(templateId, versionId)

Testing Templates

Preview with Sample Data

const preview = await notigrid.templates.preview(templateId, {
  userName: 'Test User',
  orderNumber: '12345',
  totalAmount: 99.99
})
 
console.log(preview.rendered)

Send Test Notification

await notigrid.templates.sendTest(templateId, {
  to: 'test@example.com',
  variables: {
    userName: 'Test User',
    // ... test data
  }
})

Best Practices

1. Use Descriptive Names

// Good
'user_welcome_email'
'order_confirmation_sms'
'payment_failed_notification'
 
// Bad
'template1'
'email_temp'
'notif'

2. Document Variables

Include comments in templates:

{# Variables:
  - userName: string - User's full name
  - orderNumber: string - Order ID
  - items: array - Order items with name and price
  - totalAmount: number - Total order amount
#}
 
Hi {{userName}}, your order #{{orderNumber}} is confirmed!

3. Provide Fallbacks

{{userName or 'Valued Customer'}}
{{discountCode or 'No discount available'}}

4. Keep Templates DRY

Create reusable partials:

{{> emailHeader company='MyCompany' logo=logoUrl}}
 
Main content here...
 
{{> emailFooter}}

5. Validate Variables

const requiredVars = ['userName', 'orderNumber', 'total']
const missingVars = requiredVars.filter(v => !variables[v])
 
if (missingVars.length > 0) {
  throw new Error(`Missing variables: ${missingVars.join(', ')}`)
}

Common Pitfalls

1. Missing Variables

// Will cause error
body: 'Hi {{userName}}, order {{orderNumber}}'
variables: { userName: 'John' } // orderNumber missing!

2. Incorrect Nesting

// Wrong
{{#each items}}
  {{#if item.onSale}}  <!-- 'item' doesn't exist -->
    Sale price: {{item.price}}
  {{/if}}
{{/each}}
 
// Correct
{{#each items}}
  {{#if this.onSale}}  <!-- Use 'this' in loops -->
    Sale price: {{this.price}}
  {{/if}}
{{/each}}

3. HTML in SMS

// Don't do this
integration: 'sms'
body: '<b>{{message}}</b>'  // HTML doesn't work in SMS

Template Library

Transactional

Order confirmations
Shipping notifications
Password resets
Account verification

Marketing

Welcome series
Product launches
Promotional offers
Re-engagement campaigns

Alerts

System notifications
Security alerts
Payment reminders
Subscription renewals

Frequently Asked Questions

What template syntax does NotiGrid use?

NotiGrid uses Handlebars syntax for templates, which is widely supported and easy to learn. You can use variables with double curly braces like {{variableName}}, conditionals with {{#if condition}}, and loops with {{#each array}}.

Can I use HTML in email templates?

Yes, email templates fully support HTML and inline CSS. You can create rich, styled emails with headers, buttons, images, and custom layouts. For best email client compatibility, use inline styles rather than external CSS.

How do I test templates before sending?

NotiGrid provides several testing options: 1) Preview with sample data in the dashboard, 2) Send test notifications to your own email, 3) Use the SDK's templates.preview() method programmatically. Always test across different email clients for HTML templates.

What happens if a variable is missing?

By default, missing variables render as empty strings. You can provide fallback values using the syntax {{variableName or 'default value'}}. We recommend always validating that required variables are present before sending.

Can I version control my templates?

Yes, NotiGrid maintains version history for all templates. You can view previous versions, compare changes, and rollback to any previous version if needed. For external version control, you can also export templates and store them in Git.

How do I create templates for multiple languages?

Create separate templates for each language (e.g., welcome-email-en, welcome-email-es) or use conditional logic within a single template. Pass a locale variable and use {{#if locale === 'es'}} blocks for language-specific content.

Next Steps

Need Help?

Check out our documentation or contact support.

Notification Templates

Templates are the foundation of your notification system. They allow you to create reusable content with dynamic variables, ensuring consistency across your notifications.

Why Use Templates?

Reusability: Write once, use everywhere
Consistency: Maintain brand voice across channels
Dynamic Content: Personalize with variables
Easy Updates: Change content in one place
Version Control: Track template changes over time

Creating Your First Template

Basic Email Template

const template = await notigrid.templates.create({
  name: 'order_confirmation',
  integration: 'email',
  subject: 'Order #{{orderNumber}} Confirmed',
  body: `
    Hi {{customerName}},
 
    Thank you for your order! Your order #{{orderNumber}} has been confirmed.
 
    Order Details:
    {{#each items}}
    - {{this.name}}: ${{this.price}}
    {{/each}}
 
    Total: ${{totalAmount}}
 
    Track your order: {{trackingLink}}
 
    Best regards,
    The {{companyName}} Team
  `,
  variables: ['customerName', 'orderNumber', 'items', 'totalAmount', 'trackingLink', 'companyName']
})

SMS Template

SMS templates should be concise:

const smsTemplate = await notigrid.templates.create({
  name: 'order_shipped',
  integration: 'sms',
  body: 'Hi {{name}}, your order #{{orderNum}} has shipped! Track: {{link}}',
  variables: ['name', 'orderNum', 'link']
})

Template Variables

Simple Variables

Replace with values:

Hello {{userName}}!

variables: {
  userName: 'John Doe'
}

Nested Objects

Access nested properties:

{{user.profile.firstName}} {{user.profile.lastName}}
Email: {{user.contact.email}}

variables: {
  user: {
    profile: { firstName: 'John', lastName: 'Doe' },
    contact: { email: 'john@example.com' }
  }
}

Arrays and Loops

Iterate over arrays:

Your cart:
{{#each items}}
- {{name}}: ${{price}}
{{/each}}

variables: {
  items: [
    { name: 'Product A', price: 29.99 },
    { name: 'Product B', price: 49.99 }
  ]
}

Conditional Logic

If Statements

Show content conditionally:

{{#if isPremium}}
As a premium member, you get 20% off!
{{/if}}
 
{{#if discount}}
Use code {{discount.code}} for {{discount.percent}}% off!
{{/if}}

variables: {
  isPremium: true,
  discount: {
    code: 'SAVE20',
    percent: 20
  }
}

If/Else

{{#if hasSubscription}}
Your subscription renews on {{renewalDate}}
{{else}}
Subscribe now to unlock premium features!
{{/if}}

Unless (Negative If)

{{#unless isVerified}}
Please verify your email to continue: {{verificationLink}}
{{/unless}}

Advanced Patterns

Dynamic Greetings

{{#if timeOfDay === 'morning'}}
Good morning, {{name}}!
{{else if timeOfDay === 'afternoon'}}
Good afternoon, {{name}}!
{{else}}
Good evening, {{name}}!
{{/if}}

Formatting Dates

Order placed: {{formatDate orderDate 'MMMM DD, YYYY'}}
Delivery by: {{formatDate deliveryDate 'MMM DD'}}

Currency Formatting

Total: {{formatCurrency total 'USD'}}
Subtotal: {{formatCurrency subtotal 'USD'}}
Tax: {{formatCurrency tax 'USD'}}

Channel-Specific Templates

Email Templates

Rich HTML content:

<!DOCTYPE html>
<html>
<head>
  <style>
    .header { background: #007bff; color: white; padding: 20px; }
    .content { padding: 20px; }
    .button { background: #28a745; color: white; padding: 10px 20px; }
  </style>
</head>
<body>
  <div class="header">
    <h1>Welcome to {{appName}}!</h1>
  </div>
  <div class="content">
    <p>Hi {{userName}},</p>
    <p>{{welcomeMessage}}</p>
    <a href="{{ctaLink}}" class="button">Get Started</a>
  </div>
</body>
</html>

Slack Templates

Use Slack's Block Kit:

{
  "blocks": [
    {
      "type": "header",
      "text": {
        "type": "plain_text",
        "text": "New Alert: {{alertTitle}}"
      }
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": "*Severity:* {{severity}}\n*Message:* {{message}}"
      }
    },
    {
      "type": "actions",
      "elements": [
        {
          "type": "button",
          "text": {
            "type": "plain_text",
            "text": "View Details"
          },
          "url": "{{detailsUrl}}"
        }
      ]
    }
  ]
}

Push Notification Templates

Keep it short and actionable:

{
  title: '{{title}}',
  body: '{{message}}',
  icon: '{{iconUrl}}',
  data: {
    url: '{{actionUrl}}',
    timestamp: '{{timestamp}}'
  }
}

Template Versioning

Version History

Track changes over time:

// Create new version
const v2 = await notigrid.templates.update(templateId, {
  body: 'Updated content with {{newVariable}}',
  variables: [...existingVars, 'newVariable']
})
 
// View history
const versions = await notigrid.templates.getVersions(templateId)

Rollback

Revert to previous version:

await notigrid.templates.rollback(templateId, versionId)

Testing Templates

Preview with Sample Data

const preview = await notigrid.templates.preview(templateId, {
  userName: 'Test User',
  orderNumber: '12345',
  totalAmount: 99.99
})
 
console.log(preview.rendered)

Send Test Notification

await notigrid.templates.sendTest(templateId, {
  to: 'test@example.com',
  variables: {
    userName: 'Test User',
    // ... test data
  }
})

Best Practices

1. Use Descriptive Names

// Good
'user_welcome_email'
'order_confirmation_sms'
'payment_failed_notification'
 
// Bad
'template1'
'email_temp'
'notif'

2. Document Variables

Include comments in templates:

{# Variables:
  - userName: string - User's full name
  - orderNumber: string - Order ID
  - items: array - Order items with name and price
  - totalAmount: number - Total order amount
#}
 
Hi {{userName}}, your order #{{orderNumber}} is confirmed!

3. Provide Fallbacks

{{userName or 'Valued Customer'}}
{{discountCode or 'No discount available'}}

4. Keep Templates DRY

Create reusable partials:

{{> emailHeader company='MyCompany' logo=logoUrl}}
 
Main content here...
 
{{> emailFooter}}

5. Validate Variables

const requiredVars = ['userName', 'orderNumber', 'total']
const missingVars = requiredVars.filter(v => !variables[v])
 
if (missingVars.length > 0) {
  throw new Error(`Missing variables: ${missingVars.join(', ')}`)
}

Common Pitfalls

1. Missing Variables

// Will cause error
body: 'Hi {{userName}}, order {{orderNumber}}'
variables: { userName: 'John' } // orderNumber missing!

2. Incorrect Nesting

// Wrong
{{#each items}}
  {{#if item.onSale}}  <!-- 'item' doesn't exist -->
    Sale price: {{item.price}}
  {{/if}}
{{/each}}
 
// Correct
{{#each items}}
  {{#if this.onSale}}  <!-- Use 'this' in loops -->
    Sale price: {{this.price}}
  {{/if}}
{{/each}}

3. HTML in SMS

// Don't do this
integration: 'sms'
body: '<b>{{message}}</b>'  // HTML doesn't work in SMS

Template Guide

Notification Templates

Why Use Templates?

Creating Your First Template

Basic Email Template

SMS Template

Template Variables

Simple Variables

Nested Objects

Arrays and Loops

Conditional Logic

If Statements

If/Else

Unless (Negative If)

Advanced Patterns

Dynamic Greetings

Formatting Dates

Currency Formatting

Channel-Specific Templates

Email Templates

Slack Templates

Push Notification Templates

Template Versioning

Version History

Rollback

Testing Templates

Preview with Sample Data

Send Test Notification

Best Practices

1. Use Descriptive Names

2. Document Variables

3. Provide Fallbacks

4. Keep Templates DRY

5. Validate Variables

Common Pitfalls

1. Missing Variables

2. Incorrect Nesting

3. HTML in SMS

Template Library

Transactional

Marketing

Alerts

Frequently Asked Questions

What template syntax does NotiGrid use?

Can I use HTML in email templates?

How do I test templates before sending?

What happens if a variable is missing?

Can I version control my templates?

How do I create templates for multiple languages?

Next Steps

Need Help?

Ready to send your first notification?

Start Building with NotiGrid

Template Guide

Notification Templates

Why Use Templates?

Creating Your First Template

Basic Email Template

SMS Template

Template Variables

Simple Variables

Nested Objects

Arrays and Loops

Conditional Logic

If Statements

If/Else

Unless (Negative If)

Advanced Patterns

Dynamic Greetings

Formatting Dates

Currency Formatting

Channel-Specific Templates

Email Templates

Slack Templates

Push Notification Templates

Template Versioning

Version History

Rollback

Testing Templates

Preview with Sample Data