Skip to main content

Customizing Feedback Icons

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

River Sloane
Updated by River Sloane

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:

The default feedback section, reading What did you think of this doc? with three emoji
Icons8 is a great resource for finding free icons that look great.

Changing Feedback Icons

Paste the following code into Settings > Code > Javascript. Replace ICON_URL_HERE with an icon URL you'd like to use.

<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>
The three buttons carry the classes feedback-positive, feedback-neutral, and feedback-negative, which is what the script above targets.

Here's an example of what different feedback buttons could look like using the above JavaScript šŸ‘‡

The same feedback section with the emoji swapped for a green tick, a grey dash, and a red cross
If your icons are hosted somewhere that blocks hotlinking, upload them to HelpDocs first and use those URLs instead.

What did you think of this doc?

How to Change the Logo Link

Adding Lightboxes to Images

Get in touch