Widget Triggering Conditions in VWO

Have you ever noticed a widget when you visit a website? If yes, have you noticed how frequently it appears on the webpage or does not appear after you close the widget? 

Usually, such widgets are used to grab the visitors’ attention on your website such that they don’t leave your website without any takeaways—for example, a banner widget saying 15% additional discount on your first order along with free shipping.

To know more about widgets in VWO, refer to Working with Widgets in VWO.

Often you would like to show some information in the form of some pop-up banners based on specific criteria to draw more visitors or conversions. Let's look at a couple of examples for more insights.

Is it not crucial that the information is displayed at the right time? This way, the relevance of each information you display on your website increases, and conversions rise. It is also important to control how frequently any information is displayed. What if, in either of the above cases, something was overdone? Would you like it?

What If You're Unsure About When to Trigger the Widget?

If you are unsure about when to trigger a widget, for example, whether you want to display the widget immediately, after a pause, or after any user activity such that it grabs the visitors’ attention landing on your website, we recommend you create multiple variations to cater to this, each showing the widget at different times. For example, consider that you are an eLearning website, and you are offering a 10% discount to anyone who purchases more than two courses. You can have three variations here, where the promotional banner is displayed when a course is added to the cart, when the checkout button is pressed, and when a user has spent more than 30 seconds on your website.

After you’ve run your tests for a sufficient amount of time, look for the variation which outperforms the others. This way, you can determine which triggering condition works best for your website.

Trigger Conditions for Widgets in VWO

VWO comes with inbuilt support of Trigger Conditions which lets you control when a widget appears, how often it appears, or does not appear when dismissed.

Taking advantage of these options, you can engage your visitors more effectively and make your website much more functional. While adding a widget using the VWO Visual Editor, you have the option to configure the following:

• When is the widget shown?
  

  Using the When is widget shown setting, you can choose when the widget on your webpage appears. You have the following options here:

  Condition	Description
  Always	This option allows you to display the widget when the campaign executes.
  After a delay	This option allows you to display the widget when a certain amount of time has passed. You can specify the delay in seconds in the input box. NOTE: Please enter values between 1 and 999 (numbers only, no decimal).
  Visitor scrolls the page	This option allows you to display the widget after a specified percentage of your page has been scrolled. You can specify the percentage in the input box. NOTE: Please enter values between 1 and 99 (numbers only, no decimal).
  Visitor click on element	This option allows you to display the widget when an element is clicked. You can specify the CSS selector path in the input box. This is done in addition to the element’s click function, which means the existing functionality of clicking on the button is unaffected. NOTE: The widget is displayed on the same page; if the click takes the user to a new page, the widget will not be shown even if the new page is part of the campaign.
  Custom condition	This option lets you define custom criteria for when the widget should appear. You can specify the conditions as lines of code by clicking the Add custom JS code option.

For accounts enabled with VWO Data360, you will find the following options:

• How frequently is the widget shown?
  

  Using the How frequently is widget shown setting, you can choose how often the widget on your webpage appears. You have the following options here

  Condition	Description
  Always	This option allows you to display the widget whenever a visitor lands on the page where the campaign is running.
  Once per visitor	This option allows you to display the widget once during the lifetime of the visitor.
  Once per visitor per day	This option allows you to display the widget once a day for every visitor
  Number of times	This option allows you to display the widget a specified number of times to a visitor. You can specify the number in the input box. NOTE: Please enter values between 1 and 99 (numbers only, no decimal).

• When is the widget dismissed?
  

  When a widget is dismissed, it means that it will not be shown to the visitor again. VWO lets you specify when the widget should be dismissed and what should happen when it is. Using the When is widget dismissed setting, you can choose the one that best suits you.
  
  NOTE: These options vary depending on the widget you choose. For example, the "If the visitor submits the form" option does not apply to the social share widget.

  Condition	Description
  Never	This option allows you to ensure that the widget is never dismissed, i.e., even if the visitor dismisses it by clicking on the cross button, it will be shown to the visitor again on his next visit.
  If the visitor clicks on cross button	This option will permanently dismiss the widget with the click of the cross button.
  If the visitor submits the form	This option makes the successful form submit an event, which shows the widget for the final time.
  If the visitor clicks on the cross button or submits the form	This option creates an or condition with the above two options.
  Custom condition	This option lets you define custom criteria for dismissing the widget. You can specify the conditions as lines of code by clicking the Add custom JS code option.

What If the Predefined Trigger Conditions Don't Meet Your Requirements?

Although VWO has some predefined triggering conditions, it also allows you to define your own. 

If the widget's predefined trigger conditions don't meet the requirements, use the Custom condition option to define your conditions. 

To define custom triggering conditions, you need to write code snippets to specify how and when a widget appears. For example, if you want the widget to appear only when the user clicks on the subscribe button or when a visitor clicks on the widget's cross button twice, it should be permanently dismissed.

Let’s look at how you can configure widget triggers. 

Configuring Widget Trigger Conditions in VWO

To configure the triggering conditions for your widget in VWO, perform the following.

Procedure

1. Login to your VWO account.
2. Go to Testing > A/B. 
3. Click Create to create a new A/B Test campaign.
4. From the Select from existing hypotheses dropdown, select a hypothesis.
5. In the Enter URL of the page you want to test field, enter the URL where your form is present.
6. Click Next.
   Your test page opens in the VWO Editor.
7. To add a widget, go to LIBRARY > VWO Gallery > Widgets, and choose the widget you wish to add to your page.
8. To specify the triggers, scroll down to the Triggering Conditions section, and select the ones relevant to your use case. If you wish to add custom triggers, use the Custom Condition option.
   
   NOTE: Selecting the Custom Condition option opens a code box with some comments to help the user tweak the example to an actual condition. For this, you might need assistance from your development team.

Post-requisite

We recommend using Live Previews to verify your widget triggers before making your campaign live.