UI Customization

This guide will show you how to customize the UI using the SDK 4.0 version. If you are targeting a previous version you should take a look at this guide instead.

Table of contents:

• Overview
• Server side integration
• Client side integration
• What's next

Overview

The KaleyraVideo SDK allows you to change several UI properties to customize its UI as needed. The Theme value exposes several properties that enables you to apply changes to the SDK UI.

Server side integration

Since every client (iOS, Android, Web) has to provide changes to the Theme value, we released a convenient and centralized way to achieve the same result implementing this functionality only once using our REST APIs. We provide two endpoints you can use to change the SDK appearance:

1. The Logo endpoint allows you to change your company logo displayed in the SDK
2. The Theme endpoint allows you to change the seed color used by the SDK to create the color Palette.

Client side integration

If you choose to update the UI appearance client-side, you can change the Theme used by the SDK, setting a new Theme value onto the SDK singleton instance. The new UI design implemented in our SDKs follows the Material 3 Design System guidelines. You can change the whole SDK appearance by just changing the palette of the Theme value.

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        var theme = Theme()
        theme.logo = .init(image: .init(light: URL(string: "https://www.myapp.com/logo-light.png")!, dark: URL(string: "https://www.myapp.com/logo-dark.png")!))
        theme.palette = .init(seed: UIColor.systemBlue) // This will create a material color scheme from the provided seed
        theme.typography = .init(regular: UIFont(name: "Roboto-Regular", size: UIFont.systemFontSize), medium: UIFont(name: "Roboto-Medium", size: UIFont.systemFontSize))
        KaleyraVideo.instance.theme = theme
    }
}

What's next

• Customizing user information