Open survey through a click event

ThumbsUp Survey • June 24, 2024 • 3 weeks ago

On this article, we will show how we can open a survey via a click.

Going back to our usual example[1]:

Once again, we need to open the advanced options, by clicking the top right corner switch:

How to open a survey through a click event

As soon as you click on the “through a click event”, we will see a new section:

Before we get the updated code (or shortcode if we’re referring to wordpress), we need to add some necessary information: the ID or class name of the element which, as soon as it’s clicked, it will make the survey happen.

For the ID or class name, we need to use the standard document.querySelector information.

For our example, let’s say that we have a button with the ID “my-survey-button”. For this, we need to give the value: “#my-survey-button”. If it was class based having a class of “survey-button-class”, then the value should be “.survey-button-class” (yes, with a dot in front).

Note: If by accident you enter a value without hash or dot, it will assume you’re referring to a class name.

Of course, the builder will give you all the necessary information on each selection. For using an ID, we will get something like this:

While for a class, we will get something like this:

Keeping the ID for our example, the tag has been modified, having a new parameter:

<div id="tus-4261a310-6f0c-4cd9-b0f1-6128470b2aa3" class="thumbsupsurvey--app web" wait-for-click="#my-survey-button"></div>

As you can see, there’s a new parameter called “wait-for-click” and passing the value “#my-survey-button”. Once again, this part makes all the difference; if you try to open the page, nothing will happen, and there will be no survey. You didn’t do something wrong, the survey is there and waiting for the moment the button with ID “my-survey-button” will be clicked for the survey to start.

Only when you will make this call, you will see the survey taking place.

Right after this line, there’s a survey, waiting for the click to happen.

Under the hood

What we did was, we defined the click event from the button.

After this, ThumbsUpSurvey does all the necessary magic:
  1. Grabs the “click” event for the button
  2. Starts the survey
  3. Continue with what the click was supposed to do

Conclusion

Once again, you need to know some Javascript development, as you can see, you can do some nice magic and amaze your customers.

If you’re not sure how to do it, you know the answer; all you need to do is contact us and we’ll help you!

You can always go back to our previous article, Open survey through a method call, to find out how to open a survey via a method call. On our next article, we will show how to open a survey with a delay. Stay in touch!

[1] The example used is for demo and training purposes only; the sample codes are used only for this demo. Each survey uses a different code.