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?"

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.

CSS Custom Properties

For advanced customization, the widget exposes CSS custom properties that you can override:

/* Add to your site's CSS */
.userhero-widget {
  --uh-primary: #3B82F6;
  --uh-radius: 8px;
  --uh-font-family: inherit;
}

CSS customization is considered advanced and may change between versions. Use the dashboard settings when possible.