Personalized content

How to personalize notifications content using liquid syntax and custom properties

Personalizing messages can help craft more efficient messages. A basic example of personalization is calling users by their first names, for example: “John, your shopping cart is about to expire”.

This is achieved via variable substitution using a special syntax called Liquid.

📘

Liquid syntax is easy, check the syntax reference documentation.

Where can you use Liquid?

Using Liquid syntax, parts of your message gets substituted by actual data upon reception of the notification. Liquid syntax is available on the following fields of the notification, whether it's authored in the dashboard or passed in JSON to our Management API:

  • title
  • text
  • image
  • target URL
  • button text
  • button URL

Data available in Liquid

Liquid lets you access:

  • Custom properties via the installation.custom object. For example, the string_firstName property can be accessed like this: {{ installation.custom.string_firstName }}
  • Tags are available in the installation.custom.tags array. For example, you can test a tag like this: {% if product.title contains "Pack" %}{% endif %}
  • You can also access notificationParams passed by a call to /deliveries in our API directly. For example {{ foo }} will access the parameter named foo.

Available Liquid filters

All built-in liquid filters are available in our implementation.

A simple example

Let's learn how to call users by their first name in the body of the push notification

Step 1: set a custom property with the user's first name

By calling our SDK's setProperty method, you can store the first name of the user in a Property called string_firstName:

WonderPush.push(['setProperty', 'string_firstName', 'John'])
WonderPush.setProperty("string_firstName", "John");
WonderPush.setProperty("string_firstName", "John");
[WonderPush setProperty:@"string_firstName" value:@"John"];
WonderPush.setProperty('string_firstName', 'John');
await WonderPush.setProperty("string_firstName", "John");
WonderPush.setProperty("string_firstName", "John");

Step 2: compose a push notification with liquid syntax

Connect to the WonderPush dashboard and create a new notification.

Enter the following text:

{{ installation.custom.string_firstName|default: "Dear user" }}, your shopping cart is about to expire

In the above example, we're using the string_firstName property to start the sentence. We're combining it with the Liquid default filter to output "Dear user" when the data isn't available.


What’s Next

A complete example of how to personalize notifications: