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 the 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."
For more detailed information about Display Conditions, please see our documentation.
Predefined Conditions:
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 %}';
}
]
}
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 %}"
}
]
}
]
In the editor, we get the following:
The same could be set up for any conditions, for example, "Products for men":
External Conditions:
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 find our sample on GitHub.
In the editor, we get the following:
More information about External Conditions can be found in our Plugin documentation.
Important note: When working with display conditions in the Stripo plugin, the difference between predefined and external display conditions should be understood:
Predefined Display Conditions are selected from a set of predefined options provided during Plugin initialization. These are ready-made conditions that users can easily apply to their email content based on common scenarios.
External Display Conditions, on the other hand, offer more flexibility. Users can define and create their own custom conditions, tailored to their specific needs and provided limits.
External Conditions Popup:
To allow your customers to select display conditions while creating an email, you can present these options alongside the "Copy", "Move", and "Delete" buttons.
To achieve this, set the ExternalDisplayConditionsPopup parameter when initializing the Plugin:
conditionsEnabled: true,
customConditionsEnabled: false,
conditionsTooltip: window.ExternalDisplayConditionsPopup.getConditionsTooltip,
conditionCategories: [
{
type: 'EXTERNAL',
category:'Complex conditions',
openExternalDisplayConditionsDialog: window.ExternalDisplayConditionsPopup.openExternalDisplayConditionsDialog,
useContextActionsInsteadOfSettingsTab: true
}
]
In our GitHub repository, you may find a code example to demonstrate how it works.
This information is also available in our Plugin documentation.
The External Conditions and External Conditions Popup features in the Stripo plugin differ primarily in how users interact with them:
With External Conditions, users can create and manage conditions as usual - from the left "Settings" panel;
The External Conditions Popup offers additional functionality. In this case, users can add conditions directly from the "Copy", "Move," and "Delete" menus. Additionally, they can easily review and edit the applied conditions directly in the Plugin by hovering over the icon associated with the content block.
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.