Call rating 2.x - Bandyer/Bandyer-iOS-SDK GitHub Wiki

Table of contents

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. Beware, the 2.8.0 version changes the public APIs names in order to match those found in the Android and the Web SDKs (the wrong APIs are still there, they are just deprecated).

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.isFeedbackEnabled = true
    callWindow?.setConfiguration(config)
}
- (void)setupCallWindow
{
    [self createWindowIfNeeded];
	
    BDKCallViewControllerConfiguration *config = [BDKCallViewControllerConfiguration new];
    config.isFeedbackEnabled = YES;
    [self.callWindow setConfiguration:config];
}

That's it! this is what it must be done in order to enable the call feedback popup in your app. The following section will show you what kind of customizations the feedback dialog provides and how you can setup them up.

Customizations

Appearance

The visual appearance of the call feedback 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 feedbackTheme 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.isFeedbackEnabled = true
    config.feedbackTheme = 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.isFeedbackEnabled = YES;
    config.feedbackTheme = 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 feedback 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 Awful 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 Thank you for your feedback! Thank you card title
sdk.rating.thank_you_popup_body We hope to see you again soon. Thank you card body