Call rating

Table of contents

• Summary
• Configuration
• Customizations

Summary

Starting from 2.7.0 version the Kaleyra Video SDK provides a built-in call rating mechanism that can be enabled in order to gather feedback from your app end users about the call they have just performed in your app through the Kaleyra Video SDK. If enabled (it is disabled by default), when a call ends, the Kaleyra Video SDK will display a popup asking the user to leave a rating for the call performed giving a vote between 1 to 5 stars and an optional comment.

It looks like this:

After the user has voted a thank you card is displayed:

Configuration

In order to enable this feature you must tell the SDK to show the rating UI at the end of a call through the CallViewControllerConfiguration object. This object exposes some new properties one can use to enable or disable the rating popup as well as control its appearance and the messages displayed on screen. Let's take a look at some examples:

func setupCallWindow() {
    createWindowIfNeeded()

    let config = CallViewControllerConfiguration()
    config.callRatingEnabled = true
    callWindow?.setConfiguration(config)
}

- (void)setupCallWindow
{
	[self createWindowIfNeeded];
	
	BDKCallViewControllerConfiguration *config = [BDKCallViewControllerConfiguration new];
	config.callRatingEnabled = YES;
	[self.callWindow setConfiguration:config];
}

That's it, this is what you need to do to enable the rating popup in your app. The following section will show you what kind of customizations the rating dialog provides and how you can setup them up

Customizations

Appearance

The visual appearance of the call rating UI can be customized matching the colors and the fonts of your app. The color and font values can be provided to the SDK by means of a Theme object set in the callRatingPopupTheme property of the CallViewControllerConfiguration object. Below you'll find a table containing which Theme values are used and where.

Theme property	Applied to
accentColor	Stars, submit button, text view cursor
font	Any non bold text
emphasisFont	Bold text

Here's a snippet of code showing you how to set those values in code:

func setupCallWindow() {
    createWindowIfNeeded()

    let theme = Theme()
    theme.accentColor = .magenta
    theme.font = UIFont.systemFont(ofSize: 11)
    theme.emphasisFont = UIFont.boldFont(ofSize: 13)
    
    let config = CallViewControllerConfiguration()
    config.callRatingEnabled = true
    config.callRatingPopupTheme = theme
    callWindow?.setConfiguration(config)
}

- (void)setupCallWindow
{
	[self createWindowIfNeeded];
	
	BDKTheme *theme = [BDKTheme new];
	theme.accentColor = UIColor.magentaColor;
	theme.font = [UIFont systemFontOfSize:11];
	theme.emphasisFont = [UIFont boldSystemFontOfSize:13];
	
	BDKCallViewControllerConfiguration *config = [BDKCallViewControllerConfiguration new];
	config.callRatingEnabled = YES;
	config.callRatingPopupTheme = theme;
	[self.callWindow setConfiguration:config];
}

Strings

The call rating UI strings messages can be completely customized. This features is build around Apple's localization files.
In order to provide the SDK your string values you must tell it where it should look for them. The CallViewControllerConfiguration object provides two properties named assetsBundle and localizationTableName. When those properties are set to a value different to nil, the SDK will look for a "strings" file in the assetsBundle with the name found in the localizationTableName property. The SDK will fallback using default strings when it cannot find the file or the value associated to a key. Below you'll find all the keys the call rating UI will look for when it is displayed on screen, along with a description of where the value associated to a key is used:

Key	Default value in english	Applies to
sdk.rating.rating_popup_title	Please rate the quality of your video call	Rating input card title
sdk.rating.quality_very_bad	Very bad	Quality value (1 star)
sdk.rating.quality_poor	Poor	Quality value (2 star)
sdk.rating.quality_neutral	Neutral	Quality value (3 star)
sdk.rating.quality_good	Good	Quality value (4 star)
sdk.rating.quality_excellent	Excellent	Quality value (5 star)
sdk.rating.vote	Vote	Submit button title
sdk.rating.leave_a_comment	Leave a comment	Text view placeholder
sdk.rating.thank_you_popup_title	We thank you for helping us to improve our service!	Thank you card title
sdk.rating.thank_you_popup_body	We hope to see you again soon.	Thank you card body