-
Notifications
You must be signed in to change notification settings - Fork 0
Call rating
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:
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.
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];
}
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 |
Looking for other platforms? Take a look at Android, Flutter, ReactNative, Ionic / Cordova. Anything unclear or inaccurate? Please let us know by submitting an Issue or write us here.