The Interaction Manager enables you to create custom interactions that enhance your website’s functionality without requiring additional code. These custom interactions are created by combining pre-set rules, offering unlimited possibilities for functionality.
Think of the rules as ingredients, they can be combined in all manner of ways to create a variety of different results.
Some example tutorials of what can be created with the Interaction Manager, can be found on the Blocs Academy.
Open Interaction Manager
To launch the Interaction Manager, head up to the Main Menu Bar and from the Windows menu, select Interaction Manager.
Add Interaction
To create a new interaction, click the + button which is located in the top right corner of the Interaction Manager window.
Rename Interaction
It’s possible to rename an interaction by simply clicking on the interaction item text and typing a new name.
Remove Interaction
To remove and delete a custom interaction, simply select the interaction item you would like to remove and click the – button, which is located at the top right of the Interaction Manager window.
Edit Interaction
To edit an interaction, click the settings button which is located at the far right of the interaction item, or simply double click the interaction item. This will open a popover containing all of the rules contained within the interaction.
Insert A Rule
To insert a new rule into an interaction, simply click the + button which is located at the top right of the interaction popover. This will open a drop down menu containing all of the available rules that can be used within custom interactions. Clicking one will insert it below the currently selected rule.
If Statement
The if statement rule is used to perform conditional logic. It allows you to place rules within it that are triggered only if a specified condition evaluates to true. This is helpful for decision-making in your custom interactions, enabling different outcomes based on certain conditions.
Custom Interaction if statements support the following variables: URL, visible, cookie, operating system (OS), daytime, nighttime, date, day, month, weekday, weekend. All variables allow you to specify a comparison value and support various operators.
Navigate to Page
This rule will navigate the browser to the specified page.
Navigate to URL
This rule will navigate the browser to the specified URL.
Reload Page
This rule will reload the current page in the browser.
Scroll to Target
This rule will scroll to the element with the specified #ID.
Toggle Visibility
This rule will toggle the visibility of the elements with the specified #ID’s.
Toggle Modal
This rule will toggle a modal (show/hide) with the specified #ID.
Toggle Class
This rule will toggle the specified classes on the elements with the specified #ID’s.
Add Class
This rule will add the specified classes to the elements with the specified #ID’s.
Remove Class
This rule will remove the specified classes from the elements with the specified #ID’s.
Set Text
This rule will set the specified text content for the element with the specified #ID.
Remove Element
This rule will remove the element with the specified #ID.
Telephone Link
This rule will begin a phone call (on supported devices) to the specified phone number.
Email Link
This rule will open the current user’s email client with the address field populated with the specified email address.
Download File
This rule will trigger the download of the specified file.
Video Player
This rule can trigger events such as play, pause and stop for the video player element with the specified ID.
Audio Player
This rule can trigger events such as play, pause and stop for the audio player element with the specified ID.
Set Cookie
This rule will set a cookie in the user’s browser with a specified name, value and number of days.
Destroy Cookie
This rule will destroy a cookie in the user’s browser with a specified name.
Call Custom Interaction
This rule will call another custom interaction.
Console Log
This rule will create a browser log with the specified text.
Alert
This rule will trigger an alert with the specified message.
Print Page
This rule will open the print options for the current page.
Stop Loading
This rule will stop the web browser loading.
Remove A Rule
To remove a rule from an interaction, simply select the rule you would like to remove and click the – button which is located at the top right of the interaction popover.
Apply Custom Interactions
Custom interactions can be applied to almost any element within Blocs, items such as buttons, images and icons have a custom interaction option available, in the standard sidebar interactions dropdown.
Other elements such as Blocs, rows, columns, divs and text will show a custom interaction pane in the sidebar inspector.
The Menu Manager has support to use custom interactions in menu items.
Trigger Custom Interaction
In most cases, Custom interactions can be triggered in three ways: when an element is clicked, when the mouse cursor is hovering over an element and when the mouse cursor leaves an element.
It’s also possible to trigger a custom interaction once a page has loaded, this can be done via the page settings options.
It’s also possible to drag a custom interaction out from the Interaction Manager onto elements on the Blocs design canvas to apply them. As well as this, you can drag custom interactions onto pages in the Page Navigator to apply a page load custom interaction.