Skip to main content
Daniele Cmty
Daniele Cmty
Helper ⭐️⭐️
April 12, 2023
Solved

Content Helpfulness: How to modify

  • April 12, 2023
  • 13 replies
  • 295 views

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

 

    Best answer by matt enbar

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

     

    13 replies

    Alistair FIeld
    Alistair FIeld
    Expert ⭐️
    April 13, 2023

    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
      Alistair FIeld
      Expert ⭐️
      April 14, 2023

      @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
      Daniele CmtyAuthor
      Helper ⭐️⭐️
      April 14, 2023

      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
      Alistair FIeld
      Expert ⭐️
      April 14, 2023

      @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
      matt enbarAnswer
      Helper ⭐️⭐️⭐️
      April 14, 2023

      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
        Daniele CmtyAuthor
        Helper ⭐️⭐️
        April 14, 2023

        @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
        matt enbar
        Helper ⭐️⭐️⭐️
        April 14, 2023

        @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
        Daniele CmtyAuthor
        Helper ⭐️⭐️
        April 17, 2023

         

        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
        Eva
        Helper ⭐️
        July 10, 2023

        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
          Eva
          Helper ⭐️
          January 8, 2024

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

          Show more replies
          Terms & ConditionsAccessibility statement