Call rating - Bandyer/Bandyer-iOS-SDK GitHub Wiki

This guide is meant for 3.0 version. If you are integrating a 2.x SDK version, please take a look at this guide instead.

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. The CallViewControllerConfigurationBuilder object exposes some methods 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 = CallViewControllerConfigurationBuilder()
                 .withFeedbackEnabled()
                 .build()
    callWindow?.setConfiguration(config)
}

- (void)setupCallWindow
{
    [self createWindowIfNeeded];
	
    BDKCallViewControllerConfiguration *config = BDKCallViewControllerConfigurationBuilder
                                                                              .create()
                                                                              .withFeedbackEnabled()
                                                                              .build();
    [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 = CallViewControllerConfigurationBuilder()
                 .withFeedbackEnabled(theme: theme)
                 .build()
    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 = BDKCallViewControllerConfigurationBuilder
                                                                              .create()
                                                                              .withFeedbackEnabledUsingTheme(theme)
                                                                              .build();
    [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 CallViewControllerConfigurationBuilder object provides a method withCustomLocalizations(bundle: Bundle, tableName: String) you can use to tell the SDK where to look for the strings value it must put on screen.

func setupCallWindow() {
    createWindowIfNeeded()

    let theme = Theme()
    theme.accentColor = .magenta
    theme.font = UIFont.systemFont(ofSize: 11)
    theme.emphasisFont = UIFont.boldFont(ofSize: 13)
    
    let config = CallViewControllerConfigurationBuilder()
                 .withFeedbackEnabled(theme: theme)
                 .withCustomLocalizations(bundle: .main, tableName: "CallRatingUI")
                 .build()
    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 = BDKCallViewControllerConfigurationBuilder
                                                                              .create()
                                                                              .withFeedbackEnabledUsingTheme(theme)
                                                                              .withCustomLocalizationsUsingBundleAndTableName(NSBundle.mainBundle, @"CallRatingUI")
                                                                              .build();
    [self.callWindow setConfiguration:config];
}

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