You can use DXP ToolKit in your html templates with the aid of html data attributes. The following data attributes are available, as seen in the example below:

• data-condition - One or more persona rule IDs (these are post ids)
• data-conditionvisibility - If the content should be shown or hidden when persona rules apply. Yes or 1 will show the content, anything else will hide the content.
• data-conditionmatch - How should the persona rules be parsed. Any will trigger the content on any persona rule trigger, all will trigger the content only if all persona rules are triggered.

The personalized element must also have the classes dxptk-has-condition and dxptk-hide in order for it to be recognized by DXP ToolKit.

Example


<div class="dxptk-has-condition" data-condition="1,2,3" data-conditionvisibility="0" data-conditionmatch="any">
This is a piece of personalized content that has the persona rules 1,2,3 (post ids) attached to it and will be hidden if any persona rule is triggered.
</div>

<p class="dxptk-has-condition" data-condition="4,5" data-conditionvisibility="yes" data-conditionmatch="all">
This is a piece of personalized content that has the persona rules 4 and 5 (post ids) attached to it and will be shown if all persona rules are triggered.
</p>

Ephemeral Rules

You may also use rules that have not been published yet. In order to use such type of rules, you will need to give them a strictly alphabetic ID as well as correctly configuring them in Javascript.

Example


<h1
class="dxptk-has-condition dxptk-hide"
data-condition="foo,bar"
data-conditionvisibility="1"
data-conditionmatch="any"
>
This element has the foo and bar custom rules added to it.
</h1>

//example custom rule configuration for 'foo' and 'bar'
<script>
dxptkRuleConfigs = window.dxptkRuleConfigs || {};
dxptkRuleConfigs['foo'] = [{"ruleType":"user_role","args":{"role":"administrator","id":"foo"}}];
dxptkRuleConfigs['bar'] = [{"ruleType":"dynamic_link","args":{"key":"foo", "value": "bar", "id":"bar"}}];
</script>