Interactions, available since Bricks 1.6, let you bind certain user or browser events (e.g. click, mouse hover, content loaded, etc.) to trigger specific actions like show/hide an element or popup, add/remove/toggle CSS classes or HTML attributes, start animations, load more query loop results, etc.
You can also define interactions on your global classes instead of the individual element. Useful for interactions you plan on using throughout your site.
Running interactions inside the builder is not supported. Please preview your page on the front end to confirm your interactions are running as expected.
Accessing interactions
When editing an element, click the “Interactions” (toggle) icon in the panel header to open/close the element interactions interface.
If an element has interactions, you’ll also see the “Interactions” toggle icon in the structure panel. Click the icon to open the interactions interface of this element.
Adding interactions
To add an interaction to an element, click the “+” icon next to the “Interactions” title. You can add as many interactions to an element as you like. Clicking on the title of a specific interaction allows you to rename it.
Each interaction is defined by a trigger, target, and action.
The Trigger is the event that triggers this interaction. The event can be bound to the element itself (click, mouse hover, focus, blur, mouse enter, mouse leave, enter/leave viewport) or to the browser window (scroll, content loaded, mouse leave the window).
The Action is the logic that runs when the event is triggered: show/hide elements, add/remove attributes, start animations, or load more results of a certain query loop.
The Target is the element on the page that is affected by the action. The target could be the element itself (default), a CSS selector, or a Popup.
By default, the interaction runs every time the event occurs (e.g. on every click on the element). Enable the “Run only once” checkbox if you want the interaction to only occur once on each page load.
Interaction conditions
Interaction conditions are an optional, more advanced feature. Allowing you to only run an interaction if certain conditions related to the browser storage (window, sessionStorage, localStorage) are fulfilled.
You can set “Interaction conditions” when editing an interaction like this:
The interaction example above is fulfilled when the value of window.some_key is some_value.
The “Relation” setting lets you define if one (OR) or all (AND) interaction conditions must be fulfilled in order for the interaction to run.
Example: Open a newsletter popup on click
In this example, we want to add a “subscribe newsletter” button to the site’s footer. A click on this button should open a popup that contains our newsletter subscription form.
To create the modal/popup, we need to create a popup template first. Let’s name it “Newsletter popup”.
Make sure to set the template conditions of your newsletter popup to “Entire website”.
In your footer template, add a button and set the following interaction:
Now every time someone clicks this newsletter button in the footer of your website, your newsletter popup shows.
Example: Show custom tooltip on hover
Let’s create a custom tooltip next to a text element. The following example uses a “Basic Text” and an “Icon” element:
To show a custom tooltip near the “?” icon, we’ll have a hidden element (e.g. Div + Text), where the Div has a custom class .my-tooltip, and it will be shown when the mouse is over the icon.
For this, we need to create two interactions on the Icon element. One to show the tooltip and another to hide the tooltip, like this:
The end result, with some more styling, could look like this:
Example: Create a toggle button (e.g. nestable accordion open/close icon)
We can create a toggle button like the mobile menu toggle using element interactions.
The idea in this example is to add two Icon elements inside a Div.
One of the icons shows when the button is not active and the other icon shows when the button is active.
We’ll also add custom CSS and custom classes to the Div and the icons. The Div should have a custom class .toggle-button with the following custom CSS:
root .toggle-close-icon {
display: none;
}
root.is-open .toggle-open-icon {
display: none;
}
root.is-open .toggle-close-icon {
display: block;
}The default icon should have the class .toggle-open-icon and the active icon the class .toggle-close-icon.
Finally, we need to set the element interactions.
The idea is to add and remove the class .is-open on the Div. So, when we click on the default icon, the .is-open class is added, and when we click on the active icon, the .is-open class is removed.
For this to happen in the default icon, we set the following interaction:
On the active icon we set the opposite interaction:
