Notification Templates With Dynamic Variables for Web Apps

How Dynamic Variables Work

A dynamic variable is a placeholder inside a template that gets replaced with real data at send time. The most common syntax uses double braces: {{variableName}}.

Here is a simple example. The template:

Hey {{firstName}}, your {{planName}} trial ends in {{daysLeft}} days.

At send time, you pass a variables object:

{
  firstName: "Sarah",
  planName: "Pro",
  daysLeft: 3
}

The user sees: "Hey Sarah, your Pro trial ends in 3 days."

The key principle: the template is static and reusable, while the variables are dynamic and user-specific. This separation means you can update the copy without changing the code that triggers it, and you can trigger it for millions of users without writing a unique string for each one.

Common Template Patterns

Most SaaS notification templates fall into a few categories. Here are the patterns you will use over and over.

title: "Welcome to {{appName}}, {{firstName}}!"
body:  "Your account is ready. Start by creating your first {{resourceName}}."

title: "Payment failed for {{planName}}"
body:  "We couldn't charge {{cardLast4}}. Update your payment method to keep your {{planName}} features."

title: "New: {{featureName}} is live"
body:  "{{featureDescription}} Try it now in your {{sectionName}} dashboard."

title: "New sign-in from {{deviceName}}"
body:  "Your account was accessed from {{location}} at {{timestamp}}. If this wasn't you, secure your account now."

Code Examples: Creating and Sending Templated Notifications

Here is how you would create a template and then send a notification using dynamic variables with a typical API-based approach.

Creating a Template

Define the template with placeholder variables. This can be done via the dashboard or the API:

const template = await fetch('https://api.notilayer.com/v1/templates', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    slug: 'payment-failed',
    title: 'Payment failed for {{planName}}',
    body: 'We couldn\'t charge {{cardLast4}}. Update your payment method by {{deadline}} to avoid service interruption.',
    url: '/settings/billing',
  }),
});

Sending a Notification With Variables

When it is time to send, reference the template by slug and pass the variables:

const response = await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    templateSlug: 'payment-failed',
    userId: 'user_abc123',
    variables: {
      planName: 'Pro',
      cardLast4: '4242',
      deadline: 'March 5',
    },
  }),
});

Sending to a Segment With Variables

You can also combine templates with segment targeting. This is how you would use an API to send notifications to specific users by role:

const response = await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    templateSlug: 'payment-failed',
    segmentId: 'seg_admins',
    variables: {
      planName: 'Business',
      cardLast4: '8910',
      deadline: 'March 10',
    },
  }),
});

This sends the payment-failed template to every user in the seg_admins segment, with the variables injected at delivery time. One API call, hundreds of personalized notifications.

Targeting Templates by User Role

Templates become even more powerful when combined with user segmentation. Instead of blasting the same notification to your entire user base, you send specific templates to specific roles.

This is essential when different roles need different information about the same event. Consider a plan upgrade:

• ● Admins get a billing confirmation: "Your team is now on the {{planName}} plan. Next invoice: {{nextBillingDate}}."
• ● Members get a feature unlock: "Your team upgraded to {{planName}}. You now have access to {{newFeature}}."
• ● Viewers may not need a notification at all.

With Notilayer, you create a segment for each role (e.g., role = "admin"), pair it with the appropriate template, and fire. The API to send notifications to specific users by role looks like this:

// Notify admins with billing template
await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    templateSlug: 'plan-upgrade-admin',
    segmentId: 'seg_admins',
    variables: {
      planName: 'Business',
      nextBillingDate: 'April 1, 2026',
    },
  }),
});

// Notify members with feature-unlock template
await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    templateSlug: 'plan-upgrade-member',
    segmentId: 'seg_members',
    variables: {
      planName: 'Business',
      newFeature: 'Advanced Analytics',
    },
  }),
});

Same event, different templates, different segments, different variables. Each user gets exactly the information relevant to their role.

Templates in Notilayer

Notilayer gives you two ways to manage notification templates with dynamic variables: the dashboard and the API. Most teams use both.

Dashboard: Create and Edit Templates Visually

In the Notilayer dashboard, navigate to Templates to create and manage your notification templates. The editor lets you:

• ● Write notification copy with {{variable}} placeholders
• ● Preview how the notification will look with sample data
• ● Assign a slug for easy API reference (e.g., welcome-message, payment-failed)
• ● Set a default URL for the notification click-through

This is where your product and growth teams live. They can iterate on notification copy, fix typos, and A/B test messaging without filing an engineering ticket.

API: Trigger Templates Programmatically

Your backend triggers templates by slug and passes the dynamic variables. The API handles variable injection, segment resolution, and delivery:

// In your backend: trigger a template on user signup
await fetch('https://api.notilayer.com/v1/notify', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY',
  },
  body: JSON.stringify({
    templateSlug: 'welcome-message',
    userId: newUser.id,
    variables: {
      firstName: newUser.firstName,
      appName: 'Acme App',
      resourceName: 'project',
    },
  }),
});

The separation is clean: marketing owns the copy in the dashboard, engineering owns the triggers in code. Neither blocks the other.

Related Articles