​
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

​
projectSecret
string
required

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

​
widgetStyle
string
default:"floating"

Style of the feedback widget.

Options:

  • floating - Appears as a modal on top of your content
  • embedded - Appears inline with your page content
​
autoCloseAfterSubmit
boolean
default:"true"

Whether to automatically close the feedback widget after submission.

​
animated
boolean
default:"true"

Whether to show animations when opening/closing the feedback widget.

​
zIndex
number
default:"9999"

Z-index of the feedback widget. Adjust if you have other floating elements.

​
Visual Customization

​
theme
string
default:"light"

Widget theme.

Options: light, dark, auto (follows system preference)

​
primaryColor
string
default:"#0F8CFF"

Primary color for the feedback button and UI accents. Use any valid CSS color.

​
secondaryColor
string
default:"#0070E0"

Secondary color for hover states and gradients. Use any valid CSS color.

​
textColor
string
default:"#333333"

Color of text in the feedback widget. Use any valid CSS color.

​
backgroundColor
string
default:"#FFFFFF"

Background color of the feedback widget. Use any valid CSS color.

​
Button Customization

​
buttonText
string
default:""

Text to display on the feedback button. Leave empty to show only the icon.

​
buttonIcon
string
default:"feedback"

Icon to display on the feedback button.

Options: feedback, chat, message, comment, star

​
iconColor
string
default:"#FFFFFF"

Color of the icon on the feedback button. Use any valid CSS color.

​
buttonSize
string
default:"medium"

Size of the feedback button.

Options: small, medium, large

​
buttonRadius
string
default:"50%"

Border radius of the feedback button. Use any valid CSS border-radius value.

​
Text Customization

​
productName
string
default:"product"

Name of your product, used in the feedback form text.

​
headerText
string
default:"Give us your feedback"

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.

​
submitText
string
default:"Submit"

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"
/>

​
Embedded Widget

<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.