Sometimes, we need to hide or show widgets on our templates or pages based on various conditions.

For example, we might need to hide a widget for logged out users, while keeping it visible for logged in users. Or maybe, we want to show something for paying users, and hide it for free users.

Another common case is when designing templates. We add a widget to a template that is populated with a dynamic tag, but if the dynamic tag does not return any data, there’s no need to render the widget.

These are all some simple examples when you need to apply visibility rules to individual widgets

How to apply a visibility rule to a widget

As an example, in the following template we added a Text widget which displays Post Content (Description field)

We placed this widget inside a container for design purposes.

Some posts can have description, and others might not have one provided.

We want to account for the latter, when the post does not have a description we want to hide this entire container in our template.

To do that, we select the parent container, go to Voxel tab > Visibility rules

We select a primary condition which can be

• Show if
• Hide if

Once we pick a primary condition (we picked Hide if in this example), we can press Edit rules to open the Voxel visibility rules UI

Here, we can create rule groups and add conditions inside them.

In this example, we need a single rule group and a single condition.

Because our widget is displaying content from a dynamic tag, we want to hide the widget if that dynamic tag is empty.

So we press “Select condition” dropdown and pick “Dynamic tag” option

Once we pick Dynamic tag condition, we can provide the dynamic tag we want

We press @ and search for the dynamic tag, in this case Post Content and press Enter to select it

Once the dynamic tag is added, we then select “Is Empty” comparisson

and save changes

The container will now be hidden whenever the dynamic tag is empty, in this example whenever a post does not have content or description.