After installing Wondering on your web application, you can now target users that visit any page where the snippet is loaded for your studies. To instead target specific actions with your studies, you can use triggers. A trigger is the action that prompts the Wondering widget to be displayed to a user if they are eligible for the study.

Page URL vs Code triggers

There are two types of triggers, Page URL triggers and Code triggers.

Page URL triggers allow you to target specific URLs in web applications using a regex expression, and doesn't require any further additions to your web applications code.

Code triggers are added to your web application's code and allow you to target actions whenever the trigger is invoked.

Page URL Triggers

Page URL triggers can be defined as text to match URLs your users visit in your web application. To create a page URL trigger, click Add Trigger on the Triggers tab (inside Integrations) - here you will be able to name your trigger, and select a rule from the following options:

• Contains - this means that the matching text you choose needs to be contained in the URL for the trigger to fire.
• Regex match - this allows you to create a regular expression (regex) matching string. This regex is ran against the visitors URL.
• Starts with - this fires the trigger if the URL of the visitor starts with the matching string given.
• Ends with - this fires the trigger if the URL of the visitor ends with the matching string given.

You can test the above rules and your matching text during the creation of the trigger.
Once implemented, if you start a study with the trigger selected, you study will only display to users that activate that trigger.

Code triggers

Code triggers are declared in your web application's code. To create a trigger you need to:

1. Add the code trigger to your code at the place you want to deploy your study to by calling the Wondering function:

window.wondering("trigger", "NAME_OF_YOUR_TRIGGER");

Replace NAME_OF_YOUR_TRIGGER with the name you've chosen for the trigger. Once the Trigger has been added to your code and activated for the first time, you should be able to see it on the Triggers tab (inside Integrations).

Users will only be able to see your study if they meet the criteria you set up for your study, and they aren't rate-limited and your study is still running.

Example - Setting up a code trigger on a web application that is using React.js

📘

The implementation below requires access to the code, and some understanding of the React framework.

If you are using react, so long as you have the script in the header of your app you will be able to call triggers within your app.

Trigger on component load

To trigger on component load, add a useEffect in the component:

useEffect(() => {
    window.wondering('trigger', 'trigger-name')
}, [])

This will trigger on component load. You can use this functionality to trigger the Wondering widget in any situation, for example if you want to show the Wondering widget on a modal opening or a specific part of the component being used.

📘

If a user calls one or multiple triggers within the same page load, they will only be able to see the widget once.