Feedback Customization
Learn how to customize the appearance and behavior of your feedback form and panel.
publicFeedback({
form: {
title: "Your Feedback", // Custom title
description: "We would love to hear from you", // Custom description
submitButtonText: "Submit Feedback", // Custom submit button text
placeholder: "Tell us what you think...", // Custom input placeholder
}
});
Customize the form fields:
publicFeedback({
form: {
fields: {
name: {
label: "Your Name",
placeholder: "Enter your name",
required: true
},
email: {
label: "Email Address",
placeholder: "Enter your email",
required: true
},
feedback: {
label: "Your Feedback",
placeholder: "Share your thoughts...",
required: true,
multiline: true
}
}
}
});
Visual Customization
Colors and Theme
publicFeedback({
config: {
primaryColor: "#6366f1", // Primary color
backgroundColor: "#ffffff", // Background color
textColor: "#1f2937", // Text color
borderColor: "#e5e7eb", // Border color
borderRadius: "8px", // Border radius
}
});
Typography
publicFeedback({
config: {
typography: {
fontFamily: "Inter, sans-serif",
headingSize: "1.5rem",
bodySize: "1rem",
buttonSize: "0.875rem"
}
}
});
Layout
publicFeedback({
config: {
layout: {
width: "400px", // Panel width
maxHeight: "600px", // Maximum height
padding: "24px", // Inner padding
spacing: "16px" // Element spacing
}
}
});
Customize section headers:
publicFeedback({
config: {
heading: {
ideas: "💡 Ideas",
announcement: "🔥 Recent Updates",
roadMap: "🛣️ Roadmap",
feedback: "📝 Feedback",
bug: "🐛 Bug Report"
}
}
});
Advanced Customization
Custom CSS
Add custom CSS classes:
publicFeedback({
config: {
customClasses: {
container: "my-custom-container",
form: "my-custom-form",
input: "my-custom-input",
button: "my-custom-button"
}
}
});
Custom Components
Replace default components:
publicFeedback({
config: {
components: {
submitButton: CustomSubmitButton,
inputField: CustomInputField,
header: CustomHeader
}
}
});
Best Practices
- Consistent Branding: Match your application’s design system
- Accessibility: Ensure sufficient color contrast and readable text
- Mobile Responsiveness: Test on different screen sizes
- Performance: Keep customizations lightweight
Common Issues
Styling Conflicts
- Check for CSS specificity issues
- Verify class name conflicts
- Test in different browsers
Layout Problems
- Verify responsive behavior
- Check container dimensions
- Test with different content lengths
Next Steps
