FEEDBACK WIDGET
LIVECollect user feedback with floating button and modal.
QUICK START
-
1. Get your widget key from dashboard
Example: fdb-vc97xm1u
-
2. Add before </body>
<script src="https://onedollar.dev/widgets/YOUR-KEY.js"></script>
-
3. Done
Widget appears instantly
INTEGRATION
Standard (Script Tag)
<script src="https://onedollar.dev/widgets/YOUR-KEY.js"></script>
Loads async. Won't block page. Auto-initializes.
React/Next.js
useEffect(() => { const script = document.createElement('script'); script.src = 'https://onedollar.dev/widgets/YOUR-KEY.js'; script.async = true; document.body.appendChild(script); return () => { document.body.removeChild(script); }; }, []);
Vue.js
mounted() { const script = document.createElement('script'); script.src = 'https://onedollar.dev/widgets/YOUR-KEY.js'; script.async = true; document.body.appendChild(script); }
CONFIGURATION
Widget Settings (Dashboard)
Position | bottom-right, bottom-left, top-right, top-left |
Button Text | Text on floating button |
Button Size | small, medium, large |
Title | Modal header text |
Submit Text | Submit button text |
Display Mode | floating (shows button) or embedded (hidden until triggered) |
Brand Color | Primary color (hex) |
Border Radius | 0-20px for rounded corners |
Form Fields | Configure custom fields (text, textarea, email) |
CUSTOMIZATION
Dashboard Settings
Brand Color | Primary color for buttons (hex) |
Button Size | small, medium, large |
Border Radius | 0-20px for rounded corners |
Display Mode | floating or embedded |
Form Fields | Configure custom fields |
CSS Selectors
Widget-Specific ID | |
#od-feedback-YOUR-KEY | Container for specific widget instance |
Global Classes | |
.od-feedback-trigger | Floating button |
.od-feedback-modal | Modal container |
.od-feedback-form | Form element |
.od-feedback-textarea | Textarea input |
.od-feedback-input | Text/email inputs |
Use the ID selector to style a specific widget when multiple feedback widgets exist on the same page.
API ENDPOINTS
Submit Feedback
POST /api/v1/widgets/:key/submit
{ "message": "Your product is great!", "email": "user@example.com", "page_url": "https://example.com/page" } // Field names match your dashboard configuration
Get Entries
GET /api/v1/widgets/:key/entries
Requires API key authentication. Returns paginated entries.
Headers: Authorization: Bearer YOUR_API_KEY
JAVASCRIPT API
// Access widget instance (replace YOUR-KEY with actual key) const widget = window.OneDollarWidget['YOUR-KEY']; // Open modal programmatically widget.open(); // Close modal widget.close(); // Access widget configuration console.log(widget.config.settings);
Note: Widget key is required to access the instance.
EXAMPLES
Custom Trigger Button
<button onclick="window.OneDollarWidget['YOUR-KEY'].open()"> Give Feedback </button>
Hide Default Button
/* CSS to hide default trigger */ .od-feedback-trigger { display: none !important; } /* Then use your own button */ <button class="my-button" onclick="window.OneDollarWidget['YOUR-KEY'].open()"> Feedback </button>
Embedded Mode
// Configure widget for embedded mode in dashboard // Display Mode: embedded // Then trigger modal on user action document.querySelector('.help-button').addEventListener('click', () => { window.OneDollarWidget['YOUR-KEY'].open(); });
Style Specific Widget
/* Style a specific widget instance */ #od-feedback-fdb-abc123 .od-feedback-trigger { background: #ff0000; font-size: 18px; } /* Different style for another widget */ #od-feedback-fdb-xyz789 .od-feedback-trigger { background: #00ff00; position: fixed; bottom: 100px; }
COMMON ISSUES
Widget not showing?
- • Check widget key is correct
- • Verify credits available
- • Check browser console for errors
- • Ensure domain is whitelisted
Submissions not saving?
- • Check network tab for 403/429 errors
- • Verify widget is active
- • Check rate limits (10/min)