Display conditions option allows you to change the content of emails displayed to recipients, depending on whether the specified condition is met or not.

Users can set conditions manually in the editor (Custom) or select them from a list of predefined conditions added earlier (Predefined).

Below you can see the Conditions tab with custom condition category for selected Container looks like

Let’s consider the following use-case ー you’re preparing a sale newsletter for your eCommerce project. You’d like to show different banner for men and women withing a single newsletter. In your customer database, you are able to identify customers’ gender.

So here how you can use this information to prepare customized newsletters. After the initial set up you’ll get the following result.

This is how women will see the email:

This is how men will see the email:

Now let’s go through the initial process of activating and customizing Display Conditions for plugin users.


The very first thing to do is activate the Display Conditions while plugin initialization:

{
 ...
 conditionsEnabled: boolean = false; 
customConditionsEnabled: boolean = true;
conditionCategories: (PredefinedCategory | ExternalCategory)[] = [];
...
}

This activates the Conditions tab in the editor

You may have some ready categories you want to apply to conditions and use them in the editor. In our example, this is Gender - Male & Female.

Here is the type of the Predefined Category:

PredefinedCategory {

type: string = 'PREDEFINED';
category: string;
conditions: PredefinedCondition[];
}

Here is the type of predefined condition:

PredefinedCondition {

id: number;
name: string;
description: string;
beforeScript: string;
afterScript: string;
}

And here is the instance of the predefined category with one condition:

{

type: 'PREDEFINED',
category:'Gender'
conditions:[
{
id:1;
name: 'Gender - female',
description:'Only female customers will see this part of the email.',
beforeScript:'{% if contact.gender === \"Female\" %}',
afterScript:'{% endif %}';
}
]
}

In the editor, we get the following:

Same could be set up for any conditions, for example, Gender- male:

Instead of providing ready to use the list of conditions you can specify External category which will allow you to implement your own condition selecting functionality. After the user selects the condition by the means you will provide to him, it will be sent back to the plugin via a callback function.

Here is the type of external category:

ExternalCategory{

type: string = 'EXTERNAL',
category: string,
openExternalDisplayConditionsDialog: (callback: ExternalDisplayConditionSelectedCB) => void;
}

type ExternalDisplayConditionSelectedCB = (condition: ExternalCondition) => void;

ExternalCondition{ name: string; description: string; beforeScript: string; afterScript: string;
}

Here is the instance of the external category:

{

type: 'EXTERNAL',
category:'Gaming platform' openExternalDisplayConditionsDialog: function(cb){

cb({
{
name: 'Console', description:'Only console gamers will see this part of the email.', beforeScript:'{% if contact.gamingPlatform=== \"peasant\" %}', afterScript:'{% endif %}';
}
});
}
}

Did this answer your question?