Skip to main content

​
Prerequisites

Before using the AppSloth Feedback component, make sure you’ve:
  1. Set up AppSloth in your project
  2. Installed the required shadcn/ui components:
npx shadcn-ui@latest add dialog button

​
Adding the Feedback Component

The AppSloth Feedback component provides a customizable dialog for collecting user feedback and ratings. It integrates seamlessly with your application and includes emoji-based ratings, text feedback, and customizable styling. Adding the Feedback component to your application is straightforward: 
// app/layout.js or app/layout.tsx
import { AppSlothProvider } from 'appsloth/provider';
import { FeedbackButton } from 'appsloth/feedback';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AppSlothProvider 
          userEmail="[email protected]"
          customerId="project-123"
        >
          <main className="flex w-full flex-col">
            <FeedbackButton />
            {children}
          </main>
        </AppSlothProvider>
      </body>
    </html>
  );
}
Position your FeedbackButton component where it’s easily accessible to users. Common placements include the navigation bar, footer, or floating in the bottom-right corner of the page.

​
How It Works

The Feedback component provides a comprehensive way to collect user feedback:
  1. Easy Integration: Drop-in component that handles all feedback collection logic
  2. Emoji Ratings: Built-in emoji-based rating system (customizable)
  3. Text Feedback: Optional text input for detailed feedback
  4. Automatic Submission: Handles submission to AppSloth’s servers
  5. Customizable UI: Extensive styling and configuration options
  6. Path Tracking: Automatically tracks which page the feedback was submitted from
import { FeedbackButton } from 'appsloth/feedback';

// Basic implementation
<FeedbackButton />

// Customized implementation
<FeedbackButton
  dialogTitle="We'd Love Your Feedback"
  dialogDescription="Help us improve by sharing your thoughts"
  showRatings={true}
  requireFeedbackOrRating={true}
/>

​
Customization Options

The FeedbackButton component is highly customizable through props:

​
Button Customization

You can customize the appearance and behavior of all buttons: 
<FeedbackButton
  triggerButton={{
    text: "Give Feedback",
    variant: "default",
    className: "my-custom-class",
  }}
  submitButton={{
    text: "Send Feedback",
    variant: "primary",
    className: "submit-button",
  }}
  cancelButton={{
    text: "Close",
    variant: "outline",
    className: "cancel-button",
  }}
/>

​
Dialog Customization

Customize the feedback dialog’s appearance and content: 
<FeedbackButton
  dialogTitle="Share Your Thoughts"
  dialogDescription="Your feedback helps us improve"
  dialogClassName="custom-dialog"
  textareaPlaceholder="Tell us what you think..."
  textareaClassName="custom-textarea"
  textareaMinHeight={150}
/>

​
Rating System Customization

You can customize the rating system or disable it entirely: 
<FeedbackButton
  showRatings={true}
  ratingItems={[
    { display: "😡", score: 1, tooltip: "Very Dissatisfied" },
    { display: "😕", score: 2, tooltip: "Dissatisfied" },
    { display: "😐", score: 3, tooltip: "Neutral" },
    { display: "🙂", score: 4, tooltip: "Satisfied" },
    { display: "😍", score: 5, tooltip: "Very Satisfied" },
  ]}
  ratingsClassName="custom-ratings"
/>

​
Submission Behavior

Control how feedback is submitted and validated: 
<FeedbackButton
  requireFeedbackOrRating={true}
  successMessage="Thanks for your feedback!"
  onFeedbackSubmit={(feedback, score) => {
    console.log("Feedback:", feedback, "Score:", score);
  }}
  disableDefaultSubmit={false}
/>

​
Component Props

PropTypeDefaultDescription
triggerButtonButtonConfig{ text: "Give Feedback", variant: "default" }Configuration for the trigger button
submitButtonButtonConfig{ text: "Submit", variant: "default" }Configuration for the submit button
cancelButtonButtonConfig{ text: "Cancel", variant: "outline" }Configuration for the cancel button
dialogTitlestring”Submit Feedback”Title of the feedback dialog
dialogDescriptionstring”Share your thoughts and help us improve.”Description text in the dialog
ratingItemsRatingItem[]Default emoji ratingsCustom rating items configuration
requireFeedbackOrRatingbooleantrueWhether to require either feedback text or rating
showRatingsbooleantrueWhether to show the rating system
textareaPlaceholderstring”Share your feedback… (optional)“Placeholder text for the feedback textarea
textareaClassNamestring""Additional class names for the textarea
textareaMinHeightnumber100Minimum height of the textarea in pixels
successMessagestring”Feedback submitted successfully”Success message shown after submission
onFeedbackSubmit(feedback: string, score?: number) => voidundefinedOptional callback when feedback is submitted
disableDefaultSubmitbooleanfalseIf true, disables the default fetch behavior
dialogClassNamestring""Additional class names for the dialog content
ratingsClassNamestring""Additional class names for the ratings container

​
Viewing Feedback in the Dashboard

All submitted feedback is automatically collected and can be viewed in your AppSloth Dashboard:
  1. Log into your AppSloth Dashboard
  2. Navigate to the “Feedback” section
  3. View and analyze feedback data:
    • Filter by date range
    • Sort by rating score
    • Export feedback data
    • View feedback trends and patterns
AppSloth Feedback Dashboard

​
Next Steps

Now that you’ve added AppSloth Feedback to your application, explore more features:

Banners

Create eye-catching banners to highlight important announcements

Inbox

Send targeted in-app messages and alerts to your users

Retention Modal

Collect feedback and present salvage offers when users try to cancel