FEEDBACK WIDGET

LIVE

Collect user feedback with floating button and modal.

QUICK START

  1. 1. Get your widget key from dashboard

    Example: fdb-vc97xm1u

  2. 2. Add before </body>
    <script src="https://onedollar.dev/widgets/YOUR-KEY.js"></script>
  3. 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)

NEED HELP?

Check the troubleshooting guide or email support.

support@onedollar.dev →