Configuration Options
Feedaura offers extensive customization options to match your application’s design and functionality needs. Below is a comprehensive reference of all available configuration properties.
Core Settings
Your unique project secret key (required). Get this from your Feedaura dashboard.
position
string
default: "bottom-right"
Position of the feedback button on the screen. Options: bottom-right
, bottom-left
, top-right
, top-left
Style of the feedback widget. Options:
floating
- Appears as a modal on top of your content
embedded
- Appears inline with your page content
Whether to automatically close the feedback widget after submission.
Whether to show animations when opening/closing the feedback widget.
Z-index of the feedback widget. Adjust if you have other floating elements.
Visual Customization
Widget theme. Options: light
, dark
, auto
(follows system preference)
Primary color for the feedback button and UI accents. Use any valid CSS color.
Secondary color for hover states and gradients. Use any valid CSS color.
Color of text in the feedback widget. Use any valid CSS color.
Background color of the feedback widget. Use any valid CSS color.
Text to display on the feedback button. Leave empty to show only the icon.
Icon to display on the feedback button. Options: feedback
, chat
, message
, comment
, star
Color of the icon on the feedback button. Use any valid CSS color.
Size of the feedback button. Options: small
, medium
, large
Border radius of the feedback button. Use any valid CSS border-radius value.
Text Customization
Name of your product, used in the feedback form text.
Header text displayed at the top of the feedback form.
questionText
string
default: "What was your experience while using product?"
Question text displayed in the feedback form. The word “product” will be replaced with your productName
.
feedbackLabelText
string
default: "Write your feedback"
Label text for the feedback input field.
placeholder
string
default: "Please write here"
Placeholder text for the feedback input field.
Text for the submit button in the feedback form.
Configuration Examples
Basic Configuration
< Feedback
projectSecret = { process . env . NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET }
position = "bottom-right"
theme = "light"
/>
Custom Branding
< Feedback
projectSecret = { process . env . NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET }
position = "bottom-right"
primaryColor = "#FF5733"
secondaryColor = "#E04422"
buttonText = "Feedback"
buttonIcon = "chat"
iconColor = "#FFFFFF"
buttonSize = "large"
buttonRadius = "8px"
theme = "light"
/>
Custom Text
< Feedback
projectSecret = { process . env . NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET }
position = "bottom-right"
productName = "Acme App"
headerText = "We'd love to hear from you!"
questionText = "How was your experience with Acme App today?"
feedbackLabelText = "Share your thoughts"
placeholder = "Tell us what you think..."
submitText = "Send Feedback"
/>
Dark Theme Configuration
< Feedback
projectSecret = { process . env . NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET }
position = "bottom-right"
theme = "dark"
primaryColor = "#8C52FF"
secondaryColor = "#7443E0"
textColor = "#FFFFFF"
backgroundColor = "#222222"
/>
< Feedback
projectSecret = { process . env . NEXT_PUBLIC_FEEDAURA_PROJECT_SECRET }
widgetStyle = "embedded"
theme = "light"
animated = { false }
/>
Visual Preview
Best Practices
Strategic Placement Place the widget where it’s visible but doesn’t interfere with your core UX. Bottom-right is generally least intrusive.
Brand Consistency Match your widget’s colors to your brand’s palette for a seamless experience.
Clear Instructions Use clear, concise wording in your feedback form to encourage quality responses.
Mobile Optimization Test your widget on mobile devices and adjust the size and position accordingly.
All configuration settings are optional except for projectSecret
. If you don’t specify a value, the default will be used.