User Ratings

Collect user feedback at the end of calls to improve your product. Ratings appear in the dashboard stats and help Stream improve service quality.

Best Practices

Display the feedback form immediately after the call ends for best response rates.
Keep the rating simple (1-5 stars) with optional text feedback.
Use the custom field to include additional context (user role, call type, etc.).
Review ratings in the dashboard to identify patterns and areas for improvement.

Submit Feedback API

await call.submitFeedback(
  rating, // a rating from 1 to 5,
  {
    reason: "I could not select my external camera from the UI", // some text feedback (optional)
    custom: {
      role: "patient",
    },
  },
);

Example

import clsx from "clsx";
import { useCallback, useState } from "react";
import { useCall, Icon } from "@stream-io/video-react-sdk";

export const MyFeedbackForm = () => {
  const call = useCall();
  const [rating, setRating] = useState<number>(0);
  const [email, setEmail] = useState<string>("");
  const [message, setMessage] = useState<string>("");

  const handleSubmitFeedback = useCallback(() => {
    call?.submitFeedback(Math.min(Math.max(1, rating), 5), {
      reason: message,
      custom: {
        email,
      },
    });
  }, [call, email, message, rating]);

  return (
    <div className="my-feedback-form">
      <img alt="product-logo" src="/my-product-logo.png" />
      <h2>How was your call?</h2>

      <div className="rating">
        <span>Rate quality:</span>
        {[...new Array(5)].map((_, index) => {
          const active = index + 1 <= rating;
          return (
            <div key={index} onClick={() => setRating(index + 1)}>
              <Icon
                icon="star"
                className={clsx("rating-star", active && "rating-star--active")}
              />
            </div>
          );
        })}
      </div>
      <input
        type="text"
        placeholder="E-Mail"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="text"
        placeholder="Message"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="button" onClick={handleSubmitFeedback}>
        Submit
      </button>
    </div>
  );
};