User Ratings

Introduction

Asking your users to rate their experience at the end of a call is a best practice that allows you to capture important feedback and helps you improve your product. It is highly recommended to use the feedback API to collect this information.

The ratings are also rendered inside the dashboard stats screen, allowing you to see the average rating of your calls and the feedback provided by your users.

User ratings are also used by Stream to improve the quality of our services. We use this feedback to identify issues and improve the overall quality of our video calls.

Submit Feedback API

Our React Video SDK provides an API for collecting this feedback which later can be seen in the call stats section of our dashboard.

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>
  );
};

Participant Sorting

Reactions