In this article, you’ll learn:
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.
Scenario 2: You have a daily grocery app, and in compliance with COVID-19, you want to announce in a banner to all visitors who spend more than 15 seconds on your website that "You can purchase items in limited quantity. Also, due to high demand, delivery can take longer than usual.". Since this is important information, it would be more appropriate to display it to all guests once per session, even if they ignore the banner with that information during their first session. At the same time, you don't want to show it to them more than once in a session if they ignore it since this would result in a poor user experience.Scenario-3: You run a travel website and have a calendar of events on your website. Depending on the visitor's location, you can opt to display one or more activities. Say, if a ticket to Dubai is purchased, you will want to show a form pop-up that allows the visitor to sign up for a desert safari event. Alternatively, if there are no events to recommend for a destination, you can choose to have this pop-up not appear.
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:
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.
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:
Features the following predefined trigger templates for a quick application:
Allows you to create a custom trigger by letting you specify the custom condition. You need a JS code specific to the custom trigger condition. After selecting the Custom condition option, click on Add custom JS code to paste the custom code in the popup that appears
Features the trigger templates that you have already created and saved. To learn more, click here.
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
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.
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.
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.
- Login to your VWO account.
- Go to Testing > A/B.
- Click Create to create a new A/B Test campaign.
- From the Select from existing hypotheses dropdown, select a hypothesis.
- In the Enter URL of the page you want to test field, enter the URL where your form is present.
- Click Next.
Your test page opens in the VWO Editor.
- To add a widget, go to LIBRARY > VWO Gallery > Widgets, and choose the widget you wish to add to your page.
- 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.
We recommend using Live Previews to verify your widget triggers before making your campaign live.