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.

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

Get in touch

This site is protected by hCaptcha and its Privacy Policy and Terms of Service apply.