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 Android 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 Android Video SDK provides an API for collecting this feedback, which can later be seen in the call stats section of our dashboard.

Here is an example of how you can use the API:

call.collectUserFeedback(
    rating = rating, // a rating grade from 1 to 5
    reason = "It worked great!", // the main feedback
    custom = mapOf( // any extra properties you wish to collect
        "callWasAwesome" to true
    )
)

Implementation

We are going to present a simple Compose dialog to the user, asking for feedback at the end of a call.

The feedback view we are going to show will look like the one in the image above and is represented by this code:

@Composable
fun FeedbackDialog(
    call: Call, onDismiss: () -> Unit
) {
    var email by remember { mutableStateOf("alex@getstream.io") }
    var comment by remember { mutableStateOf("") }
    var rating by remember { mutableStateOf(4) }

    AlertDialog(containerColor = Color(0xFF101213), onDismissRequest = { onDismiss() },

        title = {
            Text(
                style = MaterialTheme.typography.titleLarge.copy(color = Color(0xFFE3E4E5)),
                text = "How is your call going?"
            )
        }, text = {
            Column {
                Image(
                    // Exchange with your own image.
                    painter = painterResource(id = R.drawable.feedback_artwork),
                    contentDescription = null
                )
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.titleMedium.copy(color = Color(0xFFAFAFAF)),
                    text = "All feedback is celebrated!"
                )

                Spacer(modifier = Modifier.height(16.dp))
                Text(
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    style = MaterialTheme.typography.labelMedium.copy(color = Color(0xFFE3E4E5)),
                    text = "Rate Quality"
                )
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceAround
                ) {
                    repeat(5) { index ->
                        val tint = if (index < rating) Color(0xFFF8BE0C) else Color.Gray
                        Icon(tint = tint,
                            imageVector = Icons.Default.Star,
                            contentDescription = null,
                            modifier = Modifier
                                .size(38.dp)
                                .clickable { rating = index + 1 })
                    }
                }
                Spacer(modifier = Modifier.height(32.dp))

                OutlinedTextField(
                    value = email,
                    textStyle = MaterialTheme.typography.labelMedium.copy(color = Color(0xFFE3E4E5)),
                    onValueChange = { email = it },
                    label = {
                        Text(
                            style = MaterialTheme.typography.labelMedium.copy(
                                color = Color(
                                    0xFFE3E4E5
                                )
                            ), text = "Email Address *"
                        )
                    },
                    isError = email.isEmpty(),
                    singleLine = true
                )
                if (email.isEmpty()) {
                    Text("Email is required", color = MaterialTheme.colorScheme.error)
                }

                Spacer(modifier = Modifier.height(8.dp))

                OutlinedTextField(value = comment,
                    minLines = 5,
                    onValueChange = { comment = it },
                    label = {
                        Text(
                            style = MaterialTheme.typography.labelMedium.copy(
                                color = Color(
                                    0xFFE3E4E5
                                )
                            ), text = "Message"
                        )
                    },
                    modifier = Modifier.fillMaxWidth()
                )

                Spacer(modifier = Modifier.height(8.dp))

            }
        }, confirmButton = {
            Button(
                colors = ButtonDefaults.buttonColors(containerColor = Color(0XFF005FFF)),
                onClick = {
                    if (email.isNotEmpty()) {
                        call.collectUserFeedback(
                            rating = rating, reason = "$email\n$comment"
                        )
                        onDismiss()
                    }
                },
                enabled = email.isNotEmpty()
            ) {
                Text("Submit")
            }
        }, dismissButton = {
            Button(
                colors = ButtonDefaults.buttonColors(containerColor = Color(0XFF005FFF)),
                onClick = onDismiss
            ) {
                Text("Cancel")
            }
        })
}

Integrating FeedbackDialog with the Call Lifecycle

With the FeedbackDialog implemented, the next step is to present it at the appropriate time during the call lifecycle. The Android Video SDK provides hooks and state listeners to help with this.

In this example, we will present the FeedbackDialog when a call ends:

@Composable
fun YourCallUi(call: Call) {
    // Observe the connection state
    val connection by call.state.connection.collectAsStateWithLifecycle()

    Box(Modifier.fillMaxSize()) {
        // Main call UI goes here ...
       if (connection == RealtimeConnection.Disconnected) {
            // When call is disconnected show the rating dialog
            FeedbackDialog(call = call, onDismiss = { showFeedbackDialog = false })
        }
    }
}

Conclusion

By following this guide, you have successfully implemented a call quality feedback system using Jetpack Compose and the Android Video SDK. The feedback dialog enables users to rate the call and provide detailed comments, which can help improve the overall user experience.

Key Takeaways

The collectUserFeedback method allows for easy submission of feedback.
Custom data can be included to gather additional insights.
The FeedbackDialog component offers an intuitive interface for submitting feedback.
Using call.state.connection, the feedback dialog can be seamlessly integrated into the call lifecycle.

Transcriptions

Ringing