Advanced Settings - Triggers

Triggers define what event on the page will cause the survey to be displayed. At the moment two kind of triggers are supported: Page is Loaded and On Click

On Page Load Trigger

If survey has this trigger configured, it will be displayed when users load particular page. You can specify an URL pattern, with * matching any test to specify on which pages should the survey be displayed. If you leave it empty, survey will display on all the pages on the site.

Examples

  • * or leaving the URL pattern empty - will display survey on all pages.
  • /articles/* - will display survey on all pages with url starting with /articles prefix, for example: /articles/article-1, /articles/article-2 etc.
  • /articles/article-1 - will display survey on a single specific page with this url

On Click Trigger

If survey is configured with the click trigger, it will be displayed when users click on the element specified by the selector. Usually it's a button, but can be any element on the page.
You have to specify a single selector for the trigger, but you can use selector that matches several elements on the page. In that case, all those elements will trigger the survey.

Selector is using standard DOM Selectors syntax. While it can be quite complex two simple selectors are most commonly used: By Id (#element-id) or By CSS Class (.class-name).

Examples

  • #feedback-button - will display survey when user clicks element with a matching id attribute <button id="feedback-button">Share your feedback</button>
  • .survey-trigger - will display survey when user clicks element that has specified css class <button class="survey-trigger">Display survey</button>
  • .feedback - will display survey when user clicks any element with this css class <button class="feedback">Send your feedback</button>
    <button class="feedback">Display survey</button>

On Custom Event Trigger

Custom Event trigger allows you to implement your own logic to display the survey. With this trigger you can implement more advanced use cases, like displaying surveys in reaction to various users' actions, when scrolling the content, or even A/B testing your functionalities.

Specify the Custom Event Name that will be used to trigger the survey. When needed, your application code should trigger this event and survey will be displayed

Technical note: ProductSurveys.io is listening for events on the document Element. So make sure that your custom event is triggered on this element as well document.dispatchEvent(new CustomEvent('MyCustomEvent')) or that the event will bubble up the DOM tree someEl.dispatchEvent(new CustomEvent('MyCustomEvent', { bubbles: true }))