Call Quality Rating
Introduction
In this guide, we are going to show how one can build a call quality rating form on top of our React Video SDK. It is a good practice to ask your end users about their overall experience after the end of the call or, while being in a call.
Here is a preview of the component we are going to build:
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 grade from 1 - 5,
{
reason: 'it worked great!', // the main feedback
custom: {
// ... any extra properties that you wish to collect
},
},
);
Implementation
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>
);
};
note
For simplicity, the CSS style sheets are not included in this guide.