Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

Display Conditions

🚧

Premium Feature

This feature is only available in Business or Growth plans. You must pass the projectId with a paid plan to enable this feature.

Display conditions allow your users to change the content that is shown to recipients of an email based on different conditions.

Your users will have the ability to pick a condition and apply it to a row so they can show different content based on who the audience is.


Enable Feature

unlayer.setDisplayConditions([
  {
    type: 'Last Order Catalog',
    label: 'Women',
    description: 'Only people who ordered from Women catalog',
    before: "{% if lastOrder.catalog == 'Women' %}",
    after: '{% endif %}'
  },
  {
    type: 'Last Order Catalog',
    label: 'Men',
    description: 'Only people who ordered from Men catalog',
    before: "{% if lastOrder.catalog == 'Men' %}",
    after: '{% endif %}'
  },
  {
    type: 'Last Order Catalog',
    label: 'Children',
    description: 'Only people who ordered from Children catalog',
    before: "{% if lastOrder.catalog == 'Children' %}",
    after: '{% endif %}'
  }
]);

Your users will see these options in a modal.

Each display condition must have the following attributes. You can also send any custom attributes to identify the condition.

Attribute

Description

type

This is a category to combine multiple conditions into different folders. If there are conditions with different types, the user will select the type first.

label

This is the name of the condition that the user will see.

description

This is the description of the condition that the user will see.

before

This is opening syntax for the condition that will be added before the selected row

after

This is the closing syntax for the condition that will be added after the selected row


Custom UI for Display Conditions

You can extend this feature and allow users of the editor to build their own Display Conditions using a UI that you control. For example, you can open a custom modal and show any interface to pick or build display conditions.

unlayer.registerCallback('displayCondition', function (data, done) {
  // data - current display condition
  // done - callback function
  
  // Open custom UI for display conditions here
  // Once your user is done creating a condition, call the "done"
  // callback function with the new condition.
  
  done({
    type: 'Last Order Catalog',
    label: 'Women',
    description: 'Only people who ordered from the Women catalog',
    before: "{% if lastOrder.catalog == 'Women' %}",
    after: '{% endif %}',
  });
});

Updated 3 months ago


Display Conditions


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.