Skip to main content

Customize your Meeting UI

Ospi provides a range of UI customizations for meetings, including defining participant interactions within a meeting room. The default values for these options are set to facilitate integration. However, you have the flexibility to override them at the client end to suit specific use cases or events.

When configuring a Ospi meeting, you can pass the following configuration options.

val imarticusColors = ColorTokens(
      brand = BrandColor(
        shade300 = Color.parseColor("#ffea76"),
        shade400 = Color.parseColor("#ffe865"),
        shade500 = Color.parseColor("#ffe554"),
        shade600 = Color.parseColor("#e6ce4c"),
        shade700 = Color.parseColor("#ccb743"),
      ),
      background = BackgroundColor(
        shade600 = Color.parseColor("#121212"),
        shade700 = Color.parseColor("#454545"),
        shade800 = Color.parseColor("#898989"),
        shade900 = Color.parseColor("#b1b1b1"),
        shade1000 = Color.parseColor("#e1e1e1")
      ),
      text = TextColor(
        onBrand = TextColor.TextColorOnBrand(
          shade1000 = Color.parseColor("#ff002b4c"),
          shade900 = Color.parseColor("#e0002b4c"),
          shade800 = Color.parseColor("#c2002b4c"),
          shade700 = Color.parseColor("#a3002b4c"),
          shade600 = Color.parseColor("#85002b4c")
        ),
        onBackground = TextColor.TextColorOnBackground(
          shade1000 = Color.parseColor("#ff050505"),
          shade900 = Color.parseColor("#e0050505"),
          shade800 = Color.parseColor("#c2050505"),
          shade700 = Color.parseColor("#a3050505"),
          shade600 = Color.parseColor("#85050505")
        )
      )
    )

    val tokens = DyteUITokens(colors = imarticusColors,
      borderRadius = BorderRadiusToken.Circular,
      borderWidth = BorderWidthToken.Thin)
val meetingInfo = = DyteMeetingInfoV2(
  authToken = state.authToken,
)
val config = DyteUIKitConfig(
  activity = this,
  dyteMeetingInfo = meetingInfo,
  designTokens = tokens
)
val dyteClient = DyteUIKitBuilder.build(config)
dyteClient.loadUi()

Here is a visual representation showcasing all the defined configuration options.

meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts

Ospi provides customization options for adjusting the color, border radius, and border width of your UI. Let's explore these customization options in more detail.

Customize color scheme to match your brand​

Customize the meeting's color scheme to match your brand and theme with Ospi. You can specify four sets of color values:

  • brandColor: Primary brand color.
  • backgroundColor: Primary background color.
  • textColor: The primary text color for both the brand color and background.

brandColor​

BrandColor(
    shade300 = Color.parseColor("#ffea76"),
    shade400 = Color.parseColor("#ffe865"),
    shade500 = Color.parseColor("#ffe554"),
    shade600 = Color.parseColor("#e6ce4c"),
    shade700 = Color.parseColor("#ccb743"),
)

backgroundColor​

BackgroundColor(
    shade600 = Color.parseColor("#121212"),
    shade700 = Color.parseColor("#454545"),
    shade800 = Color.parseColor("#898989"),
    shade900 = Color.parseColor("#b1b1b1"),
    shade1000 = Color.parseColor("#e1e1e1")
)

textColor​

text = TextColor(
    onBrand = TextColor.TextColorOnBrand(
        shade1000 = Color.parseColor("#ff002b4c"),
        shade900 = Color.parseColor("#e0002b4c"),
        shade800 = Color.parseColor("#c2002b4c"),
        shade700 = Color.parseColor("#a3002b4c"),
        shade600 = Color.parseColor("#85002b4c")
    ),
    onBackground = TextColor.TextColorOnBackground(
        shade1000 = Color.parseColor("#ff050505"),
        shade900 = Color.parseColor("#e0050505"),
        shade800 = Color.parseColor("#c2050505"),
        shade700 = Color.parseColor("#a3050505"),
        shade600 = Color.parseColor("#85050505")
    )
)

Customize border radius of elements in the meeting​

To customize the border radius of elements in your Ospi meeting, follow these steps:

  1. Create the DyteUITokens object:
val tokens = DyteUITokens(colors = dyteColors, borderRadius = BorderRadiusToken.Rounded)
  • dyteColors: Represents the color scheme for your meeting.
  • borderRadius: Defines the desired border radius. By specifying the desired border radius value in the borderRadius token, you can customize the border radius of elements in your Ospi meeting.
  1. Configure DyteUIKit then build and load the Ospi UI.
val meetingInfo = DyteMeetingInfoV2(
    // meeting info
)
val config = DyteUIKitConfig(
    activity = this,
    dyteMeetingInfo = meetingInfo,
    designTokens = tokens
)
val dyteUIKit = DyteUIKitBuilder.build(config)
dyteUIKit.loadUi()

meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts meeting UI screenshot with labeled parts