The FeedbackEcho embedded widget allows you to easily collect user feedback on any website. With just one line of code integration, it supports multi-language (English only in current configuration), privacy protection, and performance optimization.
Add the following code to your HTML page:
<body>
<!-- Custom Button -->
<button onclick="openFeedback()" style="position: fixed; bottom: 20px; right:
20px; padding: 12px 24px; background: #4f46e5; color: white; border: none;
border-radius: 25px; cursor: pointer; box-shadow: 0 4px 12px rgba(79,70,229,0.3);
font-size: 16px; z-index: 9999;">
💬 Feedback
</button>
<script>
function openFeedback() {
if (window.FeedbackEchoWidget) {
window.FeedbackEchoWidget.open();
} else {
alert('Widget loading failed');
}
}
setTimeout(() => {
if (window.FeedbackEchoWidget) {
console.log('✅ FeedbackEcho Widget loaded');
}
}, 2000);
</script>
<script src="https://feedback-echo.com/widget/v1/[your-organization-slug].js?v=3.2&min=true"></script>
</body>
Replace [your-organization-slug] with your organization's unique identifier. The widget will automatically load and appear in the bottom-right corner of your page.
<script src="https://feedback-echo.com/widget/v1/[your-organization-slug].js?v=3.2&min=true"></script>
Features:
<script>
// Lazy loading with Intersection Observer
(function() {
const loadWidget = () => {
const script = document.createElement('script');
script.src = 'https://feedback-echo.com/widget/v1/[your-organization-slug].js?v=3.2&min=true';
script.async = true;
document.head.appendChild(script);
};
// Load when user scrolls near bottom or interacts
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadWidget();
observer.disconnect();
}
}, { rootMargin: '200px' });
// Create trigger element at bottom of page
const trigger = document.createElement('div');
trigger.style.position = 'absolute';
trigger.style.bottom = '0';
trigger.style.height = '1px';
trigger.style.width = '1px';
trigger.style.visibility = 'hidden';
document.body.appendChild(trigger);
observer.observe(trigger);
// Also load on first user interaction
['click', 'scroll', 'mousemove'].forEach(event => {
document.addEventListener(event, loadWidget, { once: true });
});
// Fallback timer
setTimeout(loadWidget, 10000);
})();
</script>
Features:
<script src="https://feedback-echo.com/widget/v1/[your-organization-slug].js?v=3.2&min=true"></script>
<script>
// Customize widget behavior after load
window.addEventListener('load', function() {
if (window.FeedbackEchoWidget) {
window.FeedbackEchoWidget.config.position = 'top-left';
window.FeedbackEchoWidget.config.button_text = 'Give Feedback';
window.FeedbackEchoWidget.config.theme = 'minimal';
}
});
</script>
Features:
<script src="https://feedback-echo.com/widget/v1/[your-organization-slug].js?v=3.2&min=true"></script>
<script>
// Control widget programmatically
function showFeedbackWidget() {
if (window.FeedbackEchoWidget) {
window.FeedbackEchoWidget.open();
}
}
function hideFeedbackWidget() {
if (window.FeedbackEchoWidget) {
window.FeedbackEchoWidget.hide();
}
}
// Open widget when user clicks custom button
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('custom-feedback-btn');
if (btn) {
btn.addEventListener('click', showFeedbackWidget);
}
});
</script>
Features:
The widget supports theme-based styling through CSS files:
<!-- Load a custom theme -->
<link rel="stylesheet" href="https://feedback-echo.com/widget/v1/css/minimal.css">
<script src="https://feedback-echo.com/widget/v1/[your-organization-slug].js"></script>
Available Themes:
default - Standard FeedbackEcho thememinimal - Clean, minimal designdark - Dark mode themecustom - Organization-specific branding (Pro/Enterprise plans)The FeedbackEcho widget is fully GDPR compliant:
The widget currently supports English as the primary language. The application is configured with:
config.i18n.available_locales = [:en]
config.i18n.default_locale = :en
While the widget infrastructure supports multiple languages (zh, ja, ko), the current deployment is English-only to ensure consistency across the platform.
The widget automatically adapts to different devices:
Production Environment:
max-age=86400)Development Environment:
min=true parameter is usedv parameter// Open widget
FeedbackEchoWidget.open()// Close widget
FeedbackEchoWidget.close()
// Hide widget button
FeedbackEchoWidget.hide()
// Show widget button
FeedbackEchoWidget.show()
// Destroy widget
FeedbackEchoWidget.destroy()
// Get performance metrics
FeedbackEchoWidget.getMetrics()
// Access configuration
FeedbackEchoWidget.config
The widget communicates with the following API endpoints:
/api/v1/widget/config/[organization-slug]/api/v1/widget/feedback/[organization-slug]/api/v1/widget/boards/[organization-slug]/api/v1/widget/translations/[locale]// Widget loaded
window.addEventListener('feedbackWidgetLoaded', function() {
console.log('FeedbackEcho Widget loaded');
});// User opened feedback form
window.addEventListener('feedbackModalOpened', function() {
console.log('User opened feedback form');
});
// Feedback submitted successfully
window.addEventListener('feedbackSubmitted', function(event) {
console.log('Feedback submitted:', event.detail);
});
Issue: Widget not showing
Issue: CORS errors
Issue: Slow loading
<script>
// Enable debug mode
window.FeedbackEchoDebug = true;
</script>
<script src="https://feedback-echo.com/widget/v1/[your-organization-slug].js"></script>
For assistance, please contact: