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 %}',
  });
});