Convertful Knowledge Base Widget Creation Blur Effect & Locking Content

How to use Blur Effect & Locking Content in Convertful Widgets

With Convertful, you can create a blur effect on the background behind your widgets. This effect is available for the following widget types:

  • scroll boxes
  • pop-ups
  • floating bars

2.png

To do this, simply toggle on the Enable blur effect button when designing your widget.

Blur Effect Intensity #

You can set the intensity of the blur effect by simply adjusting the blur effect intensity bar to the percentage that you want. This way you can be sure your visitors pay more attention to the content of your widget than what's in the background.

3.png

Locking Content with Blur Effect #

You can use the blur effect to lock the content of your webpage so that visitors cannot see the content until they fill in the information.

For inline widget, toggle on the Lock All Content Below button and place the widget just before the content that you want to keep blurred until the visitor fills in the required information.

4.png

For pop-ups, enable the blur effect, then under Close Button Location, select none and toggle off the Overlay should close the widget button.This way visitors will not be able to close the pop-up until they fill in the required information.

5.png

Blur Effect over specific element #

You can design your widget so that a section of the webpage is blurred when visitors reach that specific section, and they have to fill in the required information to be able to view the blurred content.

To do this, enable blur effect, then under Display Rules, select A visitor is scrolling over an element that matches the CSS selector, and fill in the section that you want to blur.

6.png

You can use the “Show Only If” condition in the Display Rules to set conditions for the widget to show only if something happens or does not happen. For example to set it so that the widget does not show if the widget has already been filled, add the condition that the widget should show only if the page URL get parameter form doesn’t match filled.

7.png