Skip to main content

User Feedback

Collect feedback directly from your users while they're using your application. Feedback is captured alongside the session recording, giving you full context of what the user experienced.

Overview​

Recapt provides two ways to collect user feedback:

  1. Built-in Widget - A floating feedback button that users can click to submit feedback
  2. Programmatic API - Submit feedback from your own custom UI

All feedback is stored as session comments and appears in the Comments page of your dashboard.

The Feedback API​

The feedback API lets you submit feedback or control the built-in widget:

// Submit feedback programmatically
window.recapt("feedback", { message: "Your feedback message" });

// Control the built-in widget
window.recapt("feedback", { widget: "show" });

Submitting Feedback Programmatically​

Use this approach when you want to build your own feedback UI:

// Basic feedback
window.recapt("feedback", {
  message: "The checkout process was confusing",
});

// Feedback with rating (1-5)
window.recapt("feedback", {
  message: "Love the new dashboard!",
  rating: 5,
});

Parameters:

  • message (required): The feedback text (max 5000 characters)
  • rating (optional): A rating from 1 to 5

Example: Custom Feedback Form​

function FeedbackForm() {
  const [message, setMessage] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (window.recapt && message.trim()) {
      window.recapt("feedback", { message: message.trim() });
      setMessage("");
      alert("Thanks for your feedback!");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Tell us what you think..."
      />
      <button type="submit">Send Feedback</button>
    </form>
  );
}

Using the Built-in Widget​

The built-in widget provides a ready-to-use feedback UI that floats on your page.

Showing the Widget​

// Show with default position (bottom-right)
window.recapt("feedback", { widget: "show" });

// Show at a specific position
window.recapt("feedback", { widget: "show", position: "bottom-left" });

Position options:

  • 'top-left'
  • 'top-right'
  • 'bottom-left'
  • 'bottom-right' (default)
  • 'top-center'
  • 'bottom-center'

Controlling the Widget​

// Hide the widget
window.recapt("feedback", { widget: "hide" });

// Open the feedback form (expand the widget)
window.recapt("feedback", { widget: "open" });

// Close the feedback form (collapse to button)
window.recapt("feedback", { widget: "close" });

Example: Toggle Feedback Widget​

// Show feedback widget after user completes a task
function onTaskComplete() {
  window.recapt("feedback", { widget: "show", position: "bottom-right" });
}

// Hide when navigating away
function onNavigate() {
  window.recapt("feedback", { widget: "hide" });
}

Viewing Feedback​

All feedback appears in the Comments page of your dashboard. Each comment shows:

  • The feedback message
  • When it was submitted
  • Which page the user was on
  • A link to the session recording

You can filter comments by:

  • Type (external user feedback vs internal team comments)
  • Date range
  • Session
  • User

Best Practices​

  1. Ask at the right moment: Show the feedback widget after key interactions, not immediately on page load

  2. Keep it optional: Don't force users to provide feedback - make it easy to dismiss

  3. Provide context: When using custom UIs, consider including context about what the user was doing

  4. Follow up: Use the session recording to understand the full context of the feedback

  5. Close the loop: If a user reports an issue, you can watch their session to see exactly what happened

React / Next.js Integration​

Create a helper hook for feedback:

// hooks/useFeedback.ts
export function useFeedback() {
  const submitFeedback = (message: string, rating?: number) => {
    if (typeof window !== "undefined" && window.recapt) {
      window.recapt("feedback", { message, rating });
    }
  };

  const showWidget = (position?: string) => {
    if (typeof window !== "undefined" && window.recapt) {
      window.recapt("feedback", { widget: "show", position });
    }
  };

  const hideWidget = () => {
    if (typeof window !== "undefined" && window.recapt) {
      window.recapt("feedback", { widget: "hide" });
    }
  };

  return { submitFeedback, showWidget, hideWidget };
}

TypeScript Support​

declare global {
  interface Window {
    recapt: (action: "feedback", data: FeedbackPayload) => void;
  }
}

type FeedbackPayload =
  | { message: string; rating?: number }
  | { widget: "show" | "hide" | "open" | "close"; position?: string };

Next Steps​