Customize the title and subtitle

Developers now have the capability to customize the title and subtitle of a call, both during setup and while the call is in progress. This feature allows for greater flexibility in aligning the call experience with specific use cases.

For instance, in a customer support scenario, the title could display the issue being addressed, while the subtitle could show the customer's name or ticket number.

Additionally, if tracking time spent in various segments of the call is crucial, the subtitle could dynamically update to display the elapsed call duration, helping to manage the meeting or session effectively.

Prerequisites

• An Azure account with an active subscription. Create an account for free.
• A deployed Communication Services resource. Create a Communication Services resource.
• A user access token to enable the call client. Get a user access token.
• Optional: Completion of the quickstart for getting started with the UI Library composites.

Set up the feature

Customize title and subtitle

To set and update call screen header title and subtitle, utilize CallCompositeCallScreenOptions to configure CallCompositeCallScreenHeaderViewData. Default UI library title is displayed if title value isn't configured.

Kotlin

// create call screen header view data to set title and subtitle
val callScreenHeaderViewData = CallCompositeCallScreenHeaderViewData()
callScreenHeaderViewData.title = "title"
callScreenHeaderViewData.subtitle = "subtitle"

// create call screen options
val callScreenOptions = CallCompositeCallScreenOptions()
callScreenOptions.setHeaderViewData(callScreenHeaderViewData)

// create call composite
val callComposite = CallCompositeBuilder().build()

val localOptions = CallCompositeLocalOptions()
localOptions.setCallScreenOptions(callScreenOptions)

// launch composite
callComposite.launch(applicationContext, locator, localOptions)

// use any event from call composite to update title subtitle when call is in progress
// callScreenHeaderViewData.title = "updated title"
// callScreenHeaderViewData.subtitle = "updated subtitle"

Java

// Create call screen header view data to set title and subtitle
CallCompositeCallScreenHeaderViewData callScreenHeaderViewData = new CallCompositeCallScreenHeaderViewData();
callScreenHeaderViewData.setTitle("title");
callScreenHeaderViewData.setSubtitle("subtitle");

// Create call screen options
CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions();
callScreenOptions.setHeaderOptions(callScreenHeaderViewData);

// Create call composite
CallComposite callComposite = new CallCompositeBuilder().build();

CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions();
localOptions.setCallScreenOptions(callScreenOptions);

// Launch composite
callComposite.launch(getApplicationContext(), locator, localOptions);

// Use any event from call composite to update title and subtitle when the call is in progress
// callScreenHeaderViewData.setTitle("updated title");
// callScreenHeaderViewData.setSubtitle("updated subtitle");

Customize title and subtitle

To set and update call screen infoHeader title & subtitle, we have CallScreenHeaderViewData to configure and pass to CallScreenOptions by param headerViewData. The title, Subtitle in CallScreenHeaderViewData are optional parameters and headerViewData itself is optional as well. Default UI library title is displayed if title value isn't configured.

var headerViewData = CallScreenHeaderViewData(
            title: "This is a custom InfoHeader",
            subtitle: "This is a custom subtitle")
var callScreenOptions = CallScreenOptions(controlBarOptions: barOptions,
                                          headerViewData: headerViewData)

// Use any event from call composite to update title & subtitle when the call is in progress.
headerViewData.title = "Custom updated title"
headerViewData.subtitle = "Custom updated subtitle"

Next steps

• Learn more about the UI Library