How to customise your widget's appearance
2 min read
Every visual and behavioural aspect of your widget is controlled from the Widget Settings panel in your dashboard. Changes are reflected in the live preview immediately — no code changes or redeployment needed.
Opening widget settings
- Go to your project and open the Widgets tab.
- Click the settings icon on any widget card.
- The settings panel slides in from the right. A Live Preview appears to its left.
Essential settings
Brand colour & text colour
Sets the widget button background and the label inside it. Pick colours that pass WCAG AA contrast — light text on dark background, or vice versa.
Position
Choose from four corners: Top Left, Top Right, Bottom Left, Bottom Right. Bottom Right is the default. If you already have a live chat widget there, use Bottom Left.
Main question
The text shown on the widget bar before a user clicks. Default is "Was this helpful?". Keep it under 30 characters — longer text truncates on mobile.
Page pattern (Page Targeting)
Controls which pages show the widget. Use /* for all pages, or a specific path like /checkout/* or /blog/*. Quick-select buttons are provided for common patterns.
Pattern syntax
/*— matches every page on your site (default)./blog/*— matches/blog/,/blog/my-post,/blog/2024/recap, etc./pricing— matches only the exact/pricingpath./docs/*/setup— matches/docs/react/setup,/docs/vue/setup, etc.
Multiple widgets on the same site
You can create multiple widgets with different page patterns — for example, one for /* (site-wide) and another for /blog/* (blog-specific with tailored questions).
When both widgets are embedded on the same page and both patterns match the current URL, the more specific pattern wins. Specificity is determined by the number of concrete (non-wildcard) path segments:
/*→ specificity 0/blog/*→ specificity 1/blog/posts/*→ specificity 2
On /blog/my-post, the /blog/* widget renders and the /* widget is suppressed — regardless of script load order. On /pricing, only the /* widget renders because the blog widget doesn't match.
Each widget maintains its own settings independently. Changing the page pattern only affects which text suggestions are offered — it never changes your timing, dismiss behavior, or other settings.
How to embed multiple widgets
Include all widget IDs in a single script tag using the array format:
<script src="https://cdn.feedbackbar.io/widget.js" data-widget='["wgt_homepage", "wgt_blog"]'></script>Alternatively, CMS users (WordPress, Drupal) can add a separate script tag per template — one widget per page template. Both approaches work and can be mixed.
Customize Experience (advanced)
Click Customize Experience at the bottom of the settings panel to expand three groups of advanced controls:
Conversation Flow
- Positive prompt — shown after a thumbs-up click. E.g. "What did you like most?"
- Negative prompt — shown after a thumbs-down click. E.g. "What could we improve?"
- Thank you message — shown after submission. Keep it warm and brief.
- Star rating question — shown above the 1–5 star scale on negative feedback (when star rating is enabled).
When & Where to Show
- Timing — delay in seconds before the widget appears. 0 = immediate. Use 5s for most pages; 10s+ on checkout to avoid interrupting the purchase flow.
- Mobile users — toggle off if your mobile layout is too narrow. On by default.
- Hide after feedback — hides the widget once a user submits. Recommended on — prevents survey fatigue.
- Collect star rating — adds a 1–5 star scale to the negative feedback modal. Useful for quantifying dissatisfaction.
- Collect email — adds an optional email field for follow-up. Disable on high-traffic pages to reduce friction and increase completion rates.
Visual Polish
- Trigger icon — choose from 8 icons: MessageCircle, MessageSquare, Mail, HelpCircle, Star, Heart, ThumbsUp, Smile. MessageCircle is the default.
- Text size — Small (subtle), Medium (balanced), Large (bold). Medium works for most sites.
- Corner style — slider from 0 (sharp edges) to 30 (very rounded). Match your site's design language.
- Distance from edge — X and Y offset in pixels. Useful if a sticky footer or fixed element overlaps the widget's default position.
Saving and resetting
- Click Save Changes to apply. Your live widget updates within seconds.
- Click Reset to restore all settings to system defaults. This cannot be undone.
- Click Cancel to discard unsaved changes and close the panel.