Widget Styling

Customize your widget's appearance to match your brand.

Color Customization

All styling is configured through the FeedValue dashboard when creating or editing a widget. The available color options are:

Setting	Description	Default
Primary Color	Button and accent color	#6366f1
Background Color	Widget background	#ffffff
Text Color	Form text and labels	#1f2937
Button Text Color	Submit button text	#1f2937

INFO

Colors must be valid 6-digit hex values (e.g., #7c3aed). Configure these in your widget settings on the dashboard.

Feedback Widget Styling

Feedback widgets (modal forms) support additional styling options:

• Border Radius: Controls the roundness of the widget corners
• Custom CSS: Advanced CSS overrides (up to 10,000 characters)

Custom CSS

For advanced customization, target widget elements with CSS class names prefixed with .fv-widget-:

/* Trigger button */
.fv-widget-trigger {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Modal form */
.fv-widget-form {
  font-family: 'Inter', sans-serif;
}

/* Submit button */
.fv-widget-submit {
  text-transform: uppercase;
}

WARNING

Custom CSS should be used sparingly. Breaking changes may occur in widget updates. Custom CSS is validated to prevent dangerous patterns (no javascript:, expression(), @import, or data: URLs).

Reaction Widget Styling

Reaction widgets (inline buttons) have their own styling options:

Setting	Description	Default
Primary Color	Selected button accent	#6366f1
Background Color	Button background	#ffffff
Text Color	Label text	#1f2937
Button Text Color	Button label text	#1f2937
Border Color	Button border color	#e5e7eb
Border Width	Border thickness (0-4 px)	2
Border Radius	Button shape: full, lg, md, sm, none	full

Best Practices

• Use colors that contrast well with your site background
• Maintain accessible color contrast ratios (WCAG AA: 4.5:1 for text)
• Test your widget styling on both desktop and mobile
• Use lg button size for touch-friendly reaction widgets