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'
},
},
);
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 Native Video SDK provides an API for collecting this feedback which later can be seen in the call stats section of our dashboard.
Example
import React, { useState } from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Modal,
Image,
} from 'react-native';
import { useCall } from '@stream-io/video-react-native-sdk';
import Star from '../assets/Star';
import Close from '../assets/Close';
const FeedbackModal: = () => {
const call = useCall();
const [selectedRating, setSelectedRating] = useState<number | null>(null);
const handleRatingPress = (rating: number) => {
setSelectedRating(rating);
await call
?.submitFeedback(Math.min(Math.max(1, rating), 5), {
reason: '<no-message-provided>',
})
.catch((err) => console.warn('Failed to submit call feedback', err));
};
return (
<Modal
transparent
visible={visible}
onRequestClose={onClose}
>
<TouchableOpacity style={styles.overlay} onPress={onClose}>
<View style={[styles.modal]}>
<View style={styles.top}>
<View style={styles.topRight}>
<TouchableOpacity onPress={onClose} style={[styles.closeButton]}>
<IconWrapper>
<Close
color={colors.typeSecondary}
size={variants.roundButtonSizes.sm}
/>
</IconWrapper>
</TouchableOpacity>
</View>
</View>
<Image source={require('../assets/feedbackLogo.png')} />
<View style={styles.textContainer}>
<Text style={styles.title}>We Value Your Feedback!</Text>
<Text style={styles.subtitle}>
Tell us about your video call experience.
</Text>
</View>
<View style={styles.ratingContainer}>
{[1, 2, 3, 4, 5].map((rating) => (
<TouchableOpacity
key={rating}
onPress={() => handleRatingPress(rating)}
style={[styles.ratingButton]}
>
<Star
color={
selectedRating && selectedRating >= rating
? colors.iconAlertSuccess
: colors.typeSecondary
}
/>
</TouchableOpacity>
))}
</View>
<View style={styles.bottom}>
<View style={styles.left}>
<Text style={styles.text}>Very Bad</Text>
</View>
<View style={styles.right}>
<Text style={styles.text}>Very Good</Text>
</View>
</View>
</View>
</TouchableOpacity>
</Modal>
);
};
On this page: