Site Intercept - NEXT Button (Closes Survey) | XM Community
Question

Site Intercept - NEXT Button (Closes Survey)


Userlevel 6
Badge +5

Hi Everyone

I have a Feedback Button site intercept running on my site and all is working as expected.

This one…

I am getting complaints that respondents are struggling to close the slider survey after submission, or after a curious click on the Feedback button before submission. They are not so aware you just need to press the Feedback button again.

I enabled this…

But am not happy with how it looks and believe I have no design control over this. Ideally I want to invert the X. Is this possible?

 

Or is it possible to add a new ‘NEXT’ button that closes the survey like the X would do, or pressing Feedback would do?

Like this…

 

Hope you can help.

Thanks :)


11 replies

Userlevel 6
Badge +28

Using the below CSS code, you should be able to achieve:

.QSIFeedbackButton img {

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

}

Below I have replaced the cross with random image to show invert -X axis

Before:

 

After:

 

Hope this helps!

 

Userlevel 6
Badge +5

Thanks for getting back to me.

I tried this in the survey but I am still getting this.

Do I need to do anything else or just add the code to the CSS section?

Thanks :)

Userlevel 5
Badge +11

Or you could add a “click here to open or close feedback” in place of “give feedback”. Wouldn’t look nice but if nothing works then use this as final option

Userlevel 6
Badge +5

Thanks but yea would look a little wordy.

Hopefully  

Can help further.

 

Thanks :)

Userlevel 6
Badge +28

.QSIFeedbackButton img {

   -webkit-filter: grayscale(1) invert(1) !important;

filter: grayscale(1) invert(1) !important;

}

 

 

Userlevel 6
Badge +5

Great, and how would I remove the circle so it’s just the white X.

Thanks :)

Userlevel 6
Badge +28

Add the code in same class above:

background-color: none !important;

Userlevel 6
Badge +5

Thanks!

I used this but still the same….

QSIFeedbackButton img {
webkit-filter: grayscale(1) invert(1) !important;
filter: grayscale(1) invert(1) !important;
background-color: none !important;
}

Hope you can help :)

Userlevel 6
Badge +28

Please place this code in the css of survey look and feel. 

Userlevel 6
Badge +5

Hi @Appzk 

I did but still the same.

Hope you can help :)

Userlevel 6
Badge +5

Just following up on this @Appzk :)

Leave a Reply