Content Helpfulness: How to modify

Hey @Daniele Cmty 

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

@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.

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?

@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?

@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! 🌱 

@Daniele Cmty my pleasure :) 

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

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!

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

//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

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

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;
}

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

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

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

Thanks! 🙂

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