Control Overview
With the Browser & Device control, you will be able to easily display custom content based on the browser and/or device of the current user.
The core Block Visibility plugin includes the Screen Size control, which allows you to conditionally display block content based on the width of the screen. This is useful for responsive design, especially on mobile devices. While this works great, the Screen Size control uses CSS media queries to show content dynamically. This means block content is still loaded on the page, whether it’s visible or not.
The Browser & Device control works at the server level by detecting the user’s current browser and device properties from the user agent string. Any content that is “hidden” will not be loaded to the page. It is important to note that browser detection using the user agent will never be 100% accurate. See the limitations below.
Configuration
How to Enable
Click on any block in the Block Editor and navigate to the Visibility panel. You will notice an ellipsis icon in the Controls Toolbar. See the screenshot below. Click on the ellipsis, and all available visibility controls will appear. Select “Browser & Device” and the Browser & Device control panel will be added to the selected block.
How to Configure
Instructions are always better with examples. Let’s assume your website has some custom functionality that really works best on Google Chrome. You want to create a message for non-Chrome users to let them know they will have a sub-optimal experience and should download Chrome.
Steps to Complete
- Navigate to the Browser & Device control settings in the Visibility panel.
- Select “Browser” from the rules selector.
- Choose “Is none of the selected” from the condition selector.
- Choose “Chrome” from the browser selector.
The resulting configuration should resemble the screenshot below.
How to Disable
If you would like to disable the Browser & Device control at the block level, click on the ellipsis icon in the “Controls” toolbar and deselect it. The control can also be disabled globally in the plugin’s Visibility Control Settings.
Note that if this control is disabled globally, any blocks that are actively being hidden by the Browser & Device control will become visible again.
Rules & Rule Sets
Like other Block Visibility controls, the Browser & Device control is powered by rules and rule sets. All rules within a rule set must be satisfied for the selected block to be visible. However, you can also create multiple rule sets. Only one rule set needs to apply for the block to be visible.
Within a rule set, you are creating AND conditions between multiple rules. Between two rule sets, you are creating OR conditions.
There are instances when rule errors can occur. For example, if rule inputs are not completely filled out or if the rule is based on a product that has since been deleted from your store. In these situations, the plugin defaults to showing the block unless other rules apply, which would hide the block.
Browser Rules
The Browser category currently only has one rule. More options may be added in the future.
Browser
The Browser rule allows you to conditionally display blocks based on the user’s current browser. The following browsers are supported:
- Chrome
- Firefox
- Microsoft Edge
- Internet Explorer
- Opera
- Safari
- Samsung Internet
Device Rules
The Device rules detect the user’s device platform (operating system) as well as the type. For improved detection accuracy, platforms are limited to those most used on the internet, according to W3Counter.
Device Platform
The Device Platform rule allows you to conditionally display blocks based on the platform (operating system) of the user’s current browser. The following platforms are currently supported:
- Android
- iOS (iPhone and iPad)
- Linux
- Macintosh
- Windows
Device Type
The Device Type rule evaluates all the details in the user agent string and attempts to determine if the user is on a mobile device, if the user is actually a robot scraping your website (Googlebot, etc.), or if they are using another device. If the user is not on mobile and is not a robot, the default is to assume they are on a desktop device. The available options are:
- Is Mobile
- Is Robot
- Is Desktop (Other)
Limitations
Accurate browser and device detection is difficult, which is why we have limited the options to the most used browsers and devices. While this control has a 99.95% accuracy ratio, it will never be 100%. Today’s modern world has thousands of different devices, operating systems, and browsers. This leads to situations where accurate detection could fail, so keep that in mind when creating content. Note that it’s also possible for users to “fake” their browser and device.