In this article, you’ll learn:
- Importance of Widget Triggers
- What if you're unsure about when to trigger the widget?
- Trigger Conditions for Widgets in Wingify
- What if the predefined trigger conditions don't meet your requirements?
- Configuring Widget Trigger Conditions in Wingify
Importance of Widget Triggers
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 Wingify, refer to Working with Widgets in Wingify.
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 1: You run an eCommerce platform, and if a visitor adds a pair of formal pants to their cart, you want to display a promotional pop-up that says, "If you purchase a formal belt with this, you'll save 25%.". The pop-up is activated after the visitor takes a specific action; it is not always displayed. As a result, the significance of this pop-up is conditional.
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 Wingify
Wingify 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 Wingify 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 Wingify Data360, you will find the following options:
| Standard Triggers | Features the following predefined trigger templates for a quick application: Page viewed - Triggers the widget when the visitor has arrived at the specified campaign URL. Time spent on page > 10 seconds - Triggers the widget when the time spent by the visitor exceeds 10 seconds. Session time > 60 seconds - Triggers the widget when the visitor has spent more than 60 seconds in the current session. Page scrolled > 50% - Triggers the widget when the visitor has scrolled beyond half of the webpage. Attempts to close page - Triggers the widget when the visitor attempts to close the current webpage. |
|---|---|
| Custom Trigger | 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 |
| My Triggers | 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
| 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. Wingify 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 Wingify 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 Wingify
To configure the triggering conditions for your widget in Wingify, perform the following.
Procedure
- Login to your Wingify 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 Wingify Editor.
- To add a widget, go to LIBRARY > Wingify 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.
Post-requisite
We recommend using Live Previews to verify your widget triggers before making your campaign live.