On This Page

Email Element Visibility

WARNING

Using the Visibility property for an element is considered an Advanced Use when Editing Emails and should be carefully considered and documented appropriately.

Visibility Conditions use simple logic expressions to render an element inserted into the editor. This is most commonly seen when Editing Emails and is represented by an "eye" icon at the right side of the element.

An example email shows the visibility icons in "edit" mode.

Please see Website Element Visibility under Add Behavior for more information related to website content and adjusting its visibility.

The Visibility flag ("eye" icon) will be color-coded. The "green" flagged Visibility Conditions are editable; you can change the condition statement as needed, whereas the "blue" flagged conditions are set by the platform and not directly editable. Hovering over the "blue" button will show a pop-up for the condition that is being used.

An example shows the visibility condition when hovering over the "eye" icon.

Condition Statements

The Condition Statements used for the Visibility property can be considered conditional if statements. Where the condition being tested is either true or false. If the condition is true, the element will be visible and/or rendered appropriately based on the condition used.

Variable Only Test

If a Variable Only Test is being performed, it tests to see if a value exists for the variable. The actual value itself is irrelevant to the test, only that it is not null (or no value). Suppose there is a value associated with the variable. In that case, the conditional test will return true, and the element will be displayed.

Example: Variable Only Test

The screen snippet above was taken from the Bidder registration/purchase receipt System Emails. The conditional test displays the Divider element on the page.

Using the HasTickets variable in this example case tests a simple true/false condition: Does the bidder have a ticket? If the answer is Yes the Divider element is displayed; if the answer was No the Divider element would not be displayed.

Tickets and Dividers have no specific connection. However, you can use the HasTickets variable in the same way as it is tested outside the context of the element itself.

Test For False

The default is to test for true statements. However, you can test for false statements by prepending the code-base variable with the logical not symbol ! (exclamation mark). For example, !HasTickets would display the element if the bidder did not have a ticket for the event.

Variable Value Test

When writing a Variable Value Test, you still need to phrase the condition to evaluate it as a true/false resolution. For example, to test if the variable is 0, you would specifically state variable_name === 0 or variable_name == '0', where variable_name is an accepted code-base variable (see below).

What does === and == mean?

The strict equality (===) operator checks whether its two operands are equal, returning a Boolean result. Unlike the equality (==) operator, the strict equality operator always considers operands of different types to be different.

~ See MDN web docs -- Strict Equality
~ See MDN web docs -- Equality