Display conditions allow you to change the content of emails displayed to recipients, depending on whether the specified condition on your end is met or not.
Users can set conditions manually in the editor (Custom) or select them from a list of predefined conditions set earlier (Predefined).
How it works?
Below you can see the Conditions tab with the custom condition category for the selected structure.
Let’s have a look at the following use-case ー you’re preparing a sales newsletter for your eCommerce project. You’d like to show different banners for men and women in a single newsletter. In your user database, you are able to detect users’ gender.
So here is 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 the Display Conditions for the editor users.
How to add the Display Сonditions with Stripo Plugin?
The very first thing to do is to activate the Display Conditions during Plugin initialization:
{
...
conditionsEnabled: boolean = false; //activation of the Display Conditions tab in the Editor
customConditionsEnabled: boolean = true; //ability to create Local Display Conditions inside the Editor
conditionCategories: (PredefinedCategory | ExternalCategory)[] = []; //List of Condition categories
...
}
This activates the "Conditions" tab in the editor:
You may have some predefined categories that you want to apply to conditions and use in the editor. In our example, this is "Gender" — "Products for women" & "Products for men."
To pass the predefined conditions, please use the PredefinedCategory type, which has the following configurations:
PredefinedCategory {
type: string = 'PREDEFINED';
category: string; //Category name
conditions: PredefinedCondition[]; //conditions array with PredefinedCondition type
}
This is the configuration of predefined conditions:
PredefinedCondition {
id: number; // unique ID of the Condition
name: string;
description: string;
beforeScript: string;
afterScript: string;
}
And this is an example of a predefined category with one condition:
{
type: 'PREDEFINED',
category:'Gender'
conditions:[
{
id:1;
name: 'Products for women',
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:
The same could be set up for any conditions, for example, "Products for men":
Instead of providing a list of predefined conditions, you can specify an 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 them; the latter will be sent back to the Plugin via a callback function.
Here is the type of external category:
ExternalCategory{
type: string = 'EXTERNAL',
category: string, //Category name
openExternalDisplayConditionsDialog: (callback: ExternalDisplayConditionSelectedCB) => void; // callback that accepts a condition with type ExternalCondition
}
type ExternalDisplayConditionSelectedCB = (condition: ExternalCondition) => void;
ExternalCondition{
name: string;
description: string;
beforeScript: string;
afterScript: string;
}
Please see an example of an external category below:
{
type: 'EXTERNAL',
category:'Gaming platform'
openExternalDisplayConditionsDialog: function(cb){
// your code goes here
cb({
{
name: 'Console',
description:'Only console gamers will see this part of the email.',
beforeScript:'{% if contact.gamingPlatform=== \"peasant\" %}',
afterScript:'{% endif %}';
}
});
}
}
Please see a full example of the Display Condition configuration:
"conditionsEnabled": true,
"customConditionsEnabled": true,
"conditionCategories": [
{
"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 %}"
}
]
}
]
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.