Widget Styling

Customize your widget's appearance to match your brand.

Color Customization

Primary Color

The primary color is used for the feedback button and accent elements.

<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="wgt_abc123"
  data-primary-color="#7c3aed"
  async
></script>

Text Colors

Customize text colors for better contrast:

<script
  src="https://cdn.feedvalue.com/widget.js"
  data-widget-id="wgt_abc123"
  data-text-color="#1f2937"
  data-background-color="#ffffff"
  async
></script>

Theme Options

Light Theme

Clean, bright appearance for light websites:

data-theme="light"

Dark Theme

Optimized for dark backgrounds:

data-theme="dark"

Auto Theme

Follows user's system preference:

data-theme="auto"

Custom CSS

For advanced customization, target widget elements with CSS:

/* Widget container */
.feedvalue-widget {
  --fv-primary: #7c3aed;
  --fv-radius: 8px;
}

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

WARNING

Custom CSS should be used sparingly. Breaking changes may occur in widget updates.

Best Practices

• Use colors that contrast well with your site background
• Test on both light and dark modes if using auto theme
• Keep the widget accessible (maintain color contrast ratios)