Customizing Feedback Icons

Jarratt Isted Updated by Jarratt Isted

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

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>

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

What did you think of this doc?

Add HTML Before the Closing Body Tag

Making Your Printed HelpDocs Look Nicer

Get in touch