Swifterate

The Swiss Army Knife for Solopreneurs and Builders

Swifterate bundles data insights, referrals, feedback, A/B testing, and ratings into one powerful dashboard. Make the right decisions, faster.

✅ Sign up at swifterate.com & create a project. ✅ Install our package & customize. ✅ Project key & origin protection for your security. ✅ Lightweight & fast – no impact on your app's performance.

Whether you're validating ideas, improving features, or optimizing conversion, we've got you covered with tools that help you understand your users and grow your business.

Installation

npm install swifterate
# or
yarn add swifterate

Components

FeedbackButton

The FeedbackButton component creates a floating feedback button that allows users to submit detailed feedback with screenshots.

import { FeedbackButton } from "swifterate";

function App() {
  return (
    <FeedbackButton
      projectKey="your-project-key"
      position="right"
      titleText="Help us improve!"
    />
  );
}

Props

• projectKey (optional): Your project identifier (default: "anonymous")
• position (optional): Position of the feedback button ("left" | "center" | "right") (default: "right")
• titleText (optional): Custom text for the feedback button (default: "Help us improve!")
• titleStyle (optional): Custom styles for the title
• titleClassName (optional): Custom class name for the title

LiveRating

The LiveRating component provides a simple thumbs up/down rating system that you can embed anywhere in your application.

import { triggerLiveRating, LiveRating } from "swifterate";

// somewhere in code, open it. The context is optional but useful data.
triggerLiveRating("homepage-feedback");

function MyComponent() {
  return (
    <LiveRating
      projectKey="your-project-key"
      onVote={(vote) => console.log(`User voted: ${vote}`)}
      style={{}} // optional
      className="" // optional
      isOpen={false} // you can manually leave it open
    />
  );
}

Props

• projectKey (optional): Your project identifier (default: "anonymous")
• onVote (optional): Callback function that receives the vote ("up" | "down")
• style (optional): Custom styles for the rating container
• className (optional): Custom class name for the rating container

Examples

Using FeedbackButton with Custom Styling

import { FeedbackButton } from "swifterate";

function App() {
  return (
    <FeedbackButton
      projectKey="your-project-key"
      position="center"
      titleText="Give Feedback"
      titleStyle={{
        color: "#4a5568",
        fontWeight: "bold",
      }}
      titleClassName="my-custom-title"
    />
  );
}

Using LiveRating in a Modal

import { LiveRating } from "swifterate";

function FeedbackModal() {
  return (
    <div className="modal">
      <h2>How was your experience?</h2>
      <LiveRating
        projectKey="your-project-key"
        onVote={(vote) => {
          console.log(`User voted: ${vote}`);
          // Close modal or show thank you message
        }}
        style={{
          justifyContent: "center",
          margin: "20px 0",
        }}
      />
    </div>
  );
}

Best Practices

1. Always provide a projectKey to properly organize feedback from different projects
2. Use the FeedbackButton component when you need comprehensive feedback with screenshots
3. Use the LiveRating component for quick satisfaction surveys or feature-specific feedback
4. Position the FeedbackButton where it won't interfere with your main UI elements
5. Consider using LiveRating after key user interactions or at the end of important flows

Support

For issues and feature requests, please visit our GitHub repository.

License

MIT