How to Use the Browser & Device Control


Features in this article require Block Visibility Pro

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.

Enabling the Browser & Device control in Block Visibility Pro.
Enabling the Browser & Device control in the block settings sidebar (Pro v1.1.0)

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

  1. Navigate to the Browser & Device control settings in the Visibility panel.
  2. Select “Browser” from the rules selector.
  3. Choose “Is none of the selected” from the condition selector.
  4. Choose “Chrome” from the browser selector.

The resulting configuration should resemble the screenshot below.

Configuring the Browser & Device control in Block Visibility Pro.
Configuring the Browser & Device control (Pro v1.1.0)

How to Disable

If you would like to disable the Browser & Device control at the block level, simply 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

Similar to other controls in Block Visibility and Block Visibility Pro, 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 (i.e. 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 (i.e. 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%. There are thousands of different devices, operating systems, and browsers in today’s modern world. 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.


Upgrade to Pro today!

Unlock block location controls, eCommerce integrations, advanced block scheduling, and more!