FeedBackPro Configuration
Design & Customization Hub
Widget Customization
Tailored Design – Fitting Your Brand
Real-time customer feedback for German webshops. Align colors, triggers, and placements with your storefront's visual identity in under 60 seconds.
Live Configuration
Customizer Preview
Adjust every visual and behavioral parameter without touching a single line of code. Our drag-and-drop interface syncs instantly with your staging environment.
Color & Typography Sync
Map your primary hex code (#2C3E50) and secondary accent (#E74C3C) directly to the widget container. Select from 12 font families including Inter, Source Sans 3, and Manrope to match your Shopify or WooCommerce theme.
Position & Trigger Logic
Pin the feedback bubble to the bottom-right, top-left, or center. Configure triggers: exit-intent delay (1.2s), scroll depth (65%), or time-on-page (45s). Toggle auto-show after purchase confirmation.
State & Animation Controls
Define hover states, focus rings, and transition speeds. Choose between slide-up, fade-in, or scale effects. Preview how the widget renders on mobile viewports under 768px before publishing.
Developer Overrides
CSS Options
Need granular control? FeedBackPro exposes scoped CSS custom properties and supports direct stylesheet injection for advanced theming.
Scoped Custom Properties
Override variables like --fbp-widget-bg, --fbp-text-color, and --fbp-border-radius directly in your theme's CSS. Changes cascade immediately without clearing cache or redeploying assets.
Media Query Adaptation
Write responsive rules targeting .fbp-container and .fbp-trigger. Adjust padding, font-size, and z-index breakpoints to prevent overlap with sticky headers or cart drawers on Magento 2 storefronts.
Shadow DOM Isolation
Our widget loads inside a Shadow DOM boundary, ensuring your global styles never clash with internal components. Use ::part() selectors to style specific elements like rating stars or submit buttons safely.
Implementation Strategy
Branding Tips
Maximize response rates by aligning the widget’s visual language with your customer journey. Follow these proven guidelines from our UX research team.
Match Your Trust Signals
Use the same accent color as your SSL badge or trust seals. Shoppers recognize familiar hues faster, reducing cognitive load and increasing form completion by up to 22%.
Contextual Copy Alignment
Replace generic prompts like “Rate us” with brand-specific language. “Wie lief Ihre Bestellung bei Bergsteiger-Shop?” outperforms neutral text by 34% in German DACH markets.
Accessibility & Contrast
Maintain a minimum 4.5:1 contrast ratio for text on widget backgrounds. Enable high-contrast mode in the customizer to ensure WCAG 2.1 AA compliance across all viewport sizes.