Widget Customization

Make your feedback widget feel like a native part of your application with extensive styling options.

Theme

Choose how the widget adapts to your site's color scheme:

Theme	Description
Light	Always use light mode
Dark	Always use dark mode
Auto	Follow user's system preference

Accent Color

Set a custom accent color that appears on:

Primary buttons
Focus states
Links and highlights

Use the color picker or enter a hex code directly:

#3B82F6  (Blue)
#10B981  (Green)
#F59E0B  (Amber)
#EF4444  (Red)
#8B5CF6  (Purple)

Tip: Use your brand's primary color for a cohesive experience.

Border Radius

Control the roundness of corners:

Option	Value	Style
Sharp	4px	Modern, angular
Rounded	8px	Balanced (default)
Pill	16px	Soft, friendly

Position

Choose where the floating launcher appears:

Position	Description
Bottom Right	Most common, doesn't interfere with navigation
Bottom Left	Good if you have other widgets on the right

Margins

Fine-tune the position with X and Y margins (in pixels):

Margin X: Distance from the edge (16-48px recommended)
Margin Y: Distance from the bottom (16-48px recommended)

Launcher Appearance

Label

Customize the button text:

"Feedback"
"Help"
"💬 Give Feedback"
Or leave empty for icon-only

Icon

Choose from built-in icons:

💬 Chat bubble (default)
📝 Pencil
❓ Question mark
🎯 Target
Custom emoji

Size

Size	Dimensions	Best for
Small	Compact	Minimal footprint
Medium	Standard	Most sites (default)
Large	Prominent	When feedback is critical

Title

Customize the modal header:

"Share your feedback"
"How can we help?"
"Report an issue"

Placeholder Text

Set placeholder text for the feedback textarea:

"Tell us what's on your mind..."
"Describe the bug you encountered..."
"How can we improve?"

Inline Form Style

When you embed the widget as an inline form (placed directly in your page rather than a floating launcher), you can choose how it fits into your page:

Style	Appearance	Isolation
Naked (default)	Inherits your page's fonts and colors to blend in seamlessly	Shares your page's styles and scripts — not isolated
Styled	Renders with its own header, border, and theme	Rendered in an isolated frame — your site's CSS and scripts can't affect it

Choose Naked when you want the form to look like a native part of your page. Choose Styled when you want a self-contained, branded form that stays consistent no matter what CSS your page applies.

Branding

UserHero Badge

The "Powered by UserHero" badge appears on free plans. Paid plans can remove this badge.

Plan	Badge
Free	Visible
Starter+	Removable

Live Preview

As you customize your widget, the live preview updates in real-time. Toggle between:

Desktop view
Mobile view

This helps you ensure the widget looks great on all devices.

Saving Changes

Click "Save" to apply your customizations. Changes take effect immediately on your live site—no code changes needed.

Styling from your own CSS

The floating widget, the modal, and Styled inline forms render in an isolated frame, so CSS on your site cannot reach inside them. Style these entirely from the dashboard settings above (theme, accent color, border radius, background, and so on).

The one place your page's CSS still applies is a Naked inline form, which intentionally inherits your page's fonts and colors — so styling the surrounding element on your page flows into the form.

Use the dashboard styling settings for the widget's appearance — they apply everywhere, isolated or not. For a form that picks up your page's own styles, use the Naked inline style.