Customizing Feedback Icons

Wanna change the look of your feedback buttons? You can with a little bit of JavaScript.

By default the feedback section at the bottom of each article uses emoji:

Changing Feedback Icons

Paste the following code into Settings > Customize > Code > JavaScript. Replace ICON_URL_HERE with an icon URL you'd like to use, then hit Publish.

<script>
  // Add your own icon URL in place of ICON_URL_HERE
  var icons = {
    positive: 'ICON_URL_HERE',
    neutral: 'ICON_URL_HERE',
    negative: 'ICON_URL_HERE',
  };

  function ready(fn) {
    if (document.readyState != 'loading'){
      fn();
    } else if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', fn);
    } else {
      document.attachEvent('onreadystatechange', function() {
        if (document.readyState != 'loading')
          fn();
      });
    }
  }
  
  function replaceIcon(selector, url) {
    var el = document.querySelector(selector);
    if (!el) return;
    el.innerHTML = '<img src="' + url + '">';
  }
  
  ready(function() {
    replaceIcon('.feedback-positive', icons.positive);
    replaceIcon('.feedback-neutral', icons.neutral);
    replaceIcon('.feedback-negative', icons.negative);
  });
</script>

Here's an example of what different feedback buttons could look like using the above JavaScript 👇