Documentation

Everything you need to install and customize the feedback widget.

Installation

Add this script tag to your website, just before the closing </body> tag:

<script defer src="https://onedollarfeedback.com/script.js" data-token="pk_example_abc123"></script>

The widget will appear as a floating button in the bottom-right corner of your page.

Configuration

Customize the widget behavior using data attributes on the script tag:

Attribute	Required	Description
`data-token`	Yes	Your project token from the dashboard
`data-name`	No	Pre-fill the user's name in feedback submissions
`data-email`	No	Pre-fill the user's email in feedback submissions
`data-input-name`	No	Show an optional name input field. Set to `"true"`
`data-input-email`	No	Show an optional email input field. Set to `"true"`
`data-theme`	No	Force `"light"` or `"dark"` theme

With User Name

Pre-fill the user's name if you have it available:

<script defer src="https://onedollarfeedback.com/script.js" data-token="pk_example_abc123" data-name="John Doe"></script>

With User Email

Pre-fill the user's email if you have it available:

<script defer src="https://onedollarfeedback.com/script.js" data-token="pk_example_abc123" data-email="[email protected]"></script>

With Input Fields

Show optional name and email input fields in the widget:

<script defer src="https://onedollarfeedback.com/script.js" data-token="pk_example_abc123" data-input-name="true" data-input-email="true"></script>

If you also provide data-name or data-email, the fields will be pre-filled and disabled.

Force Dark Theme

Override automatic theme detection:

<script defer src="https://onedollarfeedback.com/script.js" data-token="pk_example_abc123" data-theme="dark"></script>

Theme Support

The widget automatically detects your site's theme by checking for a .dark class on the <html> element. This works seamlessly with Tailwind CSS dark mode.

Auto-detects theme from .dark class
Updates in real-time when theme changes
Override with data-theme attribute

CSS Styling

Customize the widget's appearance using CSS. The widget exposes parts that you can style with the ::part() selector:

Selector	Description
`::part(trigger)`	Floating action button
`::part(panel)`	Main popup panel
`::part(header)`	Panel header with title
`::part(body)`	Form content area
`::part(type-button)`	Feedback type selector buttons
`::part(textarea)`	Message input field
`::part(submit)`	Submit button
`::part(footer)`	"Powered by" footer
`::part(success)`	Success confirmation message

Example: Brand Colors

Match the widget to your brand:

#odf-feedback-widget::part(trigger) {
    background: #3b82f6;
}

#odf-feedback-widget::part(header) {
    background: #3b82f6;
}

#odf-feedback-widget::part(submit) {
    background: #3b82f6;
}

Example: Pill-shaped Buttons

Round the corners for a softer look:

#odf-feedback-widget::part(trigger) {
    border-radius: 9999px;
}

#odf-feedback-widget::part(submit) {
    border-radius: 9999px;
}

Example: Gradient Submit Button

Add a gradient background:

#odf-feedback-widget::part(submit) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Example: Custom Panel Style

Customize the panel appearance:

#odf-feedback-widget::part(panel) {
    border-radius: 24px;
    border: 2px solid #e5e7eb;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

CSS Variables

You can also override CSS custom properties for quick theming:

#odf-feedback-widget {
    --odf-primary: #3b82f6;
    --odf-radius: 16px;
}

Dynamic Installation

If you need to set the user name dynamically (e.g., after authentication), you can inject the script via JavaScript:

const script = document.createElement('script');
script.src = 'https://onedollarfeedback.com/script.js';
script.defer = true;
script.dataset.token = 'pk_example_abc123';
script.dataset.name = currentUser.name; // Your user's name
script.dataset.email = currentUser.email; // Your user's email
document.body.appendChild(script);

Need Help?

If you have any questions or run into issues, please contact us at [email protected].