Use JavaScript events with surveys

A new feature we introduce in version 1.4.2 are JavaScript events on every step while accessing the survey. This way, you can have a full track on each step, providing a total and improved user experience.

Here you can see a perfect example on what can be done by tracking the whole flow. The potentials are endless. For example, in case you show the survey on a popup, after the survey completion (survey-end), you could automatically close the popup after 2 seconds. Or, based on the information you have, you could trigger a page redirection, a visual effect based on a specific reply etc.

Note: Keep in mind that using JavaScript events is an advanced topic and it needs to be used by experienced developers. Feel free to contact us, we are more than glad to help you!

The easiest way to get familiar with the events, is to add the following code:

window.addEventListener('thumbsUpSurveyApi', function (event) {
    // Access the data passed with the event
    const eventData = event.detail;

    // Echo the outcome in the console
    console.log('Custom event received:', {
        'name': eventData.name,
        'data': eventData.data
    });
});

As you can see, like this, you can control the beginning of the survey, each step and the end/completion of it. There are four event types in total:

survey-start

This is the first event which is triggered only once and states the start of the survey.

survey-next

This event is triggered on every new step coming from the survey. It’s not triggered on replies, only on steps. Also, this step is not triggered on form-view surveys.

survey-reply

The event triggered when the user is providing a reply. As before, it’s not triggered on form-view surveys.

survey-end

Finally, this event is triggered when the survey is completed.