Collecting customer feedback shouldn't be complicated. In this guide, I'll show you how to install a clean, non-intrusive feedback widget on any website using Google Tag Manager (GTM) — no developers required.
This little widget pops up in the bottom-right corner and asks a simple question:
“Would you like to answer a few quick questions to help us improve?”
The user can say “Yes”, opening your survey, or click “Maybe later”, and the prompt won’t appear again (thanks to localStorage). You can link it to any feedback tool you like — Google Forms, Typeform, Tally, or anything else.
Update the form link in the code below:
<script>
/**
* Snippet by Net Impression
* Need help with GA4, GTM, or CRO? Visit our free resources or get in touch:
* Resources: https://www.netimpression.co.uk/free-resources
* Contact: https://www.netimpression.co.uk/contact
*/
(function () {
// === 🛠️ CUSTOMISABLE SURVEY URL ===
const FEEDBACK_URL = 'https://your-feedback-form-link.com'; // <- change this!
// === 🧠 Check if previously dismissed ===
if (localStorage.getItem('feedbackWidgetDismissed') === 'true') return;
// === 🎨 Styles for animation and layout ===
const style = document.createElement('style');
style.innerHTML = `
#feedback-widget {
animation: slideInUp 0.5s ease-out;
}
@keyframes slideInUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.feedback-button {
display: inline-block;
padding: 8px 14px;
margin-right: 8px;
border-radius: 4px;
font-size: 13px;
text-decoration: none;
cursor: pointer;
}
.feedback-yes {
background-color: #4a90e2;
color: white;
border: none;
}
.feedback-maybe {
background-color: #e0e0e0;
color: #333;
border: none;
}
.feedback-close {
position: absolute;
top: 8px;
right: 12px;
background: none;
border: none;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
`;
document.head.appendChild(style);
// === 🧩 Widget HTML ===
const widget = document.createElement("div");
widget.innerHTML = `
<div id="feedback-widget" style="
position: fixed;
bottom: 0;
right: 30px;
width: 300px;
background: #fff;
border: 2px solid #8b95a1;
border-bottom: none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
font-family: Arial, sans-serif;
z-index: 2147483647;
">
<a href="https://www.netimpression.co.uk/" target="_blank" style="display: block; padding: 8px 16px 0;">
<img src="https://i.imgur.com/NQpOuVP.png" alt="Net Impression Logo" style="max-width: 120px; height: auto;" />
</a>
<button class="feedback-close" aria-label="Close">×</button>
<div style="padding: 16px; padding-top: 8px;">
<p style="margin: 0 0 12px; font-size: 14px; color: #333;">
Help us improve! Would you like to answer a few quick questions?
</p>
<div>
<button class="feedback-button feedback-yes">Yes</button>
<button class="feedback-button feedback-maybe">Maybe later</button>
</div>
</div>
</div>
`;
document.body.appendChild(widget);
// === ⚙️ Button logic ===
widget.querySelector('.feedback-close').addEventListener('click', () => {
localStorage.setItem('feedbackWidgetDismissed', 'true');
widget.remove();
});
widget.querySelector('.feedback-yes').addEventListener('click', () => {
window.open(FEEDBACK_URL, '_blank');
localStorage.setItem('feedbackWidgetDismissed', 'true');
widget.remove();
});
widget.querySelector('.feedback-maybe').addEventListener('click', () => {
localStorage.setItem('feedbackWidgetDismissed', 'true');
widget.remove();
});
// === ✅ Console credit ===
console.log('Code on this page was developed by www.netimpression.co.uk 🚀');
})();
</script>
That’s it! The widget is now live on your site 🎉
Here are a few great free options that you can link to:
Just create your form, copy the share URL, and paste it into the FEEDBACK_URL line in the script.