Interface MediaPanelConfiguration

This configuration allows the MediaPanel to be customized in several ways.

The MediaPanel can have different states. A Collapsed Only state, Expanded Only state or a Full Widget state. When tapping the Full widget (or the collapsed panel) it switches to the Expanded state.

When creating a MediaPanel, choose the style when presenting it:

// Selector target needs to be rendered on the page prior to this
const targetElement = document.querySelector('#myMediaPanel');

const myPanel = MediaPanel(
client: client,
theme: {
// You can specify a base theme to start from
base: 'light',
config: {
// You can specify a title for you panel
title: 'John and Leila call',


How to apply a configuration?


  • BasePanelConfiguration
    • MediaPanelConfiguration


autoPublishMicOnJoin: boolean

When user joins the channel, their microphone will be unmuted so other users will be able to hear them right away. User can still mute themselves after joining the channel.

Default Value


collapsedStateOptions: null | DeepPartial<CollapsedStateOptions>
expandedStateOptions: null | DeepPartial<ExpandedStateOptions>
panelSubtitle?: string

Overrides the panel subtitle.

panelTitle: string

Overrides the panel title.

pushToTalkKey: PushToTalkKey

Keyboard code to be used for the pushToTalkMode on Web.

Default Value



KeyS+KeyA, Space


All possible codes

pushToTalkMode: boolean

A user would press & hold the pushToTalkKey on the keyboard (Web) or press & hold the microphone button (Mobile) to unmute the microphone – and upon release, the microphone becomes muted.

Default Value


shareLinkUrl?: string

Customizes the URL for the channel, user can share this link with other people.

showMicrophoneButton: boolean

Set this to false if you are initializing the panel for a user who can only be in listen mode and cannot turn on the microphone.

Default Value


Overrides default strings in Media Panel. It can be also used for internationalization of your Media Panel.