Solved

Content Helpfulness: How to modify

Daniele Cmty
Rank
Userlevel 2
Badge +1

Hi there, we would like to adapt the Content Helpfulness bar to include only 2 options (positive / negative)? We would also like to change it to a thumbs up & thumbs down.

 

 

Is it possible in any way, with some CSS or Third Party Script, or other changes?

The reason why we would like to change this is that we want to make this score consistent with our other support channels (which have a 👍👎 voting bar) so we can better compare.

 

Cheers,
Daniele

 

icon

Best answer by matt enbar 14 April 2023, 15:28

View original

13 replies

Alistair FIeld
Rank
Userlevel 3
Badge +2

Hey @Daniele Cmty 

I am looping in @olimarrio and @tom.shaddock  incase they have some knowledge / insight.

The needs of the many, outweigh the needs of the few. 🖖
Alistair FIeld
Rank
Userlevel 3
Badge +2

@Daniele Cmty 

I have been given this custom CSS:

.topic-helpfulness_reaction.qa-topic-neutral-icon {
    display: none;
}

It will just hide the neutral icon, replacing the images would require a bit more customisation. But will give you the binary yes/no you were after.

The needs of the many, outweigh the needs of the few. 🖖
Daniele Cmty
Rank
Userlevel 2
Badge +1

Woohoo, thank you so much @Alistair FIeld!

Replacing the images would require a bit more customisation

 

OK, do you know what kind of customisation? Would that also be via CSS?

Alistair FIeld
Rank
Userlevel 3
Badge +2

@Daniele Cmty if the question was how to make spinach pesto from scratch, I could help you out.

But this is a few CSS levels over my head.

@matt enbar or @olimarrio any ideas?

 

The needs of the many, outweigh the needs of the few. 🖖
matt enbar
Rank

first thing you would need to do is add custom css to hide the neutral option like so:

 

.qa-topic-neutral-icon{
display:none;
}

to change the images of the happy and sad face you will need use a 3rd party script to change either the SVG image or insert a different image like so:

//For using an image URL

document.querySelector(".qa-topic-helpful-icon").innerHTML='<img src="thumb up image url here" />'
document.querySelector(".qa-topic-nothelpful-icon").innerHTML='<img src="thumb down image url" />'


// For using SVG
document.querySelector(".qa-topic-helpful-icon").innerHTML='code for SVG'
document.querySelector(".qa-topic-nothelpful-icon").innerHTML='code for SVG'

//example of SVG thumbs up

document.querySelector(".qa-topic-helpful-icon").innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-k</title><path d="M456,192,300,180l23-89.4C329,64,322.22,48.73,300.53,42l-34.69-9.85a4,4,0,0,0-4.4,1.72l-129,202.34a8,8,0,0,1-6.81,3.81H16V448H133.61a48,48,0,0,1,15.18,2.46l76.3,25.43a80,80,0,0,0,25.3,4.11H428.32c19,0,31.5-13.52,35.23-32.16L496,305.58V232C496,209.94,478,194,456,192Z"/></svg>'

 

Daniele Cmty
Rank
Userlevel 2
Badge +1

@matt enbar you are an absolute legend!! Thank you!

 

@Daniele Cmty if the question was how to make spinach pesto from scratch, I could help you out.

 

Benissimo, I will be looking forward! 🌱 

matt enbar
Rank

@Daniele Cmty my pleasure :) 

Please note you may need some additional CSS to get the images exactly how you want them to look.

Daniele Cmty
Rank
Userlevel 2
Badge +1

 

I just noticed that this bar is now more prominent than it was before. It is not static, but it floats on top of the content if I scroll up. That’s cool! is that new or did i just never notice?

In fact, the adoption of the Helpfulness Bar by our end users was quite low. Only a few dozen clicks within dozens of thousands of sessions.

I hope this change will make the adoption increase!

Eva
Rank
Userlevel 2

first thing you would need to do is add custom css to hide the neutral option like so:

 

.qa-topic-neutral-icon{
display:none;
}

to change the images of the happy and sad face you will need use a 3rd party script to change either the SVG image or insert a different image like so:

//For using an image URL

document.querySelector(".qa-topic-helpful-icon").innerHTML='<img src="thumb up image url here" />'
document.querySelector(".qa-topic-nothelpful-icon").innerHTML='<img src="thumb down image url" />'


// For using SVG
document.querySelector(".qa-topic-helpful-icon").innerHTML='code for SVG'
document.querySelector(".qa-topic-nothelpful-icon").innerHTML='code for SVG'

//example of SVG thumbs up

document.querySelector(".qa-topic-helpful-icon").innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-k</title><path d="M456,192,300,180l23-89.4C329,64,322.22,48.73,300.53,42l-34.69-9.85a4,4,0,0,0-4.4,1.72l-129,202.34a8,8,0,0,1-6.81,3.81H16V448H133.61a48,48,0,0,1,15.18,2.46l76.3,25.43a80,80,0,0,0,25.3,4.11H428.32c19,0,31.5-13.52,35.23-32.16L496,305.58V232C496,209.94,478,194,456,192Z"/></svg>'

 

Hi all,

I have a modification question, too: How to change the order of the emojis?

According to our UX team, such ratings usually start with unhappy (on the left) and end with happy (on the right).
Similar to other rating scales (from zero stars to five stars, for example) and according to the reading direction (in RTL languages). Here, it’s the other way around.

Is there also CSS for this?

Thanks,
Eva

Eva
Rank
Userlevel 2

(I mean LTR languages (left to right) of course :-)

olimarrio
Rank
Userlevel 4
Badge +4

Hi @Eva 👋,

Yes you can use the following CSS to change the order of the emojis:

.qa-topic-nothelpful-icon {
  order: 1;
}

.qa-topic-neutral-icon {
  order: 2;
}

.qa-topic-helpful-icon {
  order: 3;
}

 

Eva
Rank
Userlevel 2

Hi @Eva 👋,

Yes you can use the following CSS to change the order of the emojis:

.qa-topic-nothelpful-icon {
  order: 1;
}

.qa-topic-neutral-icon {
  order: 2;
}

.qa-topic-helpful-icon {
  order: 3;
}

 

Thanks! 🙂

M
Rank

Hello guys, I wanted to ask, I tried to operationalize the proposed solution using .innerHtml(), but unfortunately unsuccessfully. The problem is that the reaction smileys only load after maybe 1s after the whole DOM of the page is loaded. This means that third-party scripts can't work, as they run before these smileys are loaded. Even if I use for example addEventListener('DOMContentLoaded') I am not able to load the reactions element because it doesn't exist for another second. 

How did you solve this problem? The only solution that works is to use a timeout, but that means it can change before someone's eyes, which I think is an unwanted feature.

 window.addEventListener('load', () => {
    setTimeout(() => {
      const elHelpful = document.querySelector(".qa-topic-helpful-icon");
      console.log("loaded", elHelpful);
    }, 500);
  });

Thank you

Reply


Terms & ConditionsCookie settings