Skip to main content

Components API

Provides API for granular overriding of various aspects of the App Builder user interface ranging from entire screens such as the “VideoCall” screen to specific components within these screens such as the “BottomBar” component.

The overrides are applied by supplying values as an object under the top-level components key to the Customization API config object.


The VideoCall screen displays the active video call / livestream UI. This UI is shown when a user has joined a room.

Hence it is displayed after:

  • The user clicks on JoinButton inside the Precall screen.

However if Precall Screen is disabled in the Builder,

The videoCall screen is directly displayed after:

  • The user clicks on the “Start Meeting” button inside the Share screen
  • The user clicks on a room invite link.
tip

To make the customizations powerful, you can use the libraries to access the internal app state, send custom events, or re-use prebuilt subcomponents


Overrides:

VideoCallComponent : React.ComponentType

You can override the entire VideoCall screen by passing in a React.ComponentType under the videoCall key to the Components Api Object

Use the example code given below showcasing a simple use-case of the api as a guide.

info

A more advanced usage example can be found here


VideoCallInterface

videoCall.bottomToolBar :

BottomToolBarComponent
Bottom bar
bottom bar

The BottomToolBarComponent occupies the bottom part of the VideoCall screen and displays all the room controls.

note

The controls displayed change depending on the operating system/platform and the user config

Overrides:

BottomToolBarComponent : React.ComponentType

You can override the BottomBar component by passing in a React Component under the bottomToolBar key to the VideoCallInterface Object

Customize
AgoraAppBuilder.customize({
components: {
videoCall: {
bottomToolBar: BottomToolBarOverride,
},
},
});

The overriden component can reuse existing bottom bar defaults or can be a complete new one.

Use the example code given below showcasing a simple use-case of the api as a guide.

Result:

bottombar component override
Before
bottombar component override
After
info

A more advanced usage example can be found here

videoCall.topToolBar :

TopToolBarComponent

The TopToolBarComponent occupies the top part of the VideoCall screen and displays the sidebar buttons along with room info.

note

The sidebar buttons displayed change depending on the user config

Overrides:

TopToolBarComponent : React.ComponentType

You can override the TopToolBar component by passing in a React Component under the topToolBar key to the VideoCallInterface Object

To reuse parts of default top bar ui you can import them from the Subcomponents Library accessible under the customization-api module.

Use the example code given below showcasing a simple use-case of the api as a guide.

info

A more advanced usage example can be found here

videoCall.chat :

ChatCmpInterface

The Chat component displays the ui to send and view the chat messages.

Overrides:

ChatCmpInterface

videoCall.chat.chatInput :

chatInputComponent

The ChatInput component displays the input box/send button used to enter/send message inside the chat ui.

Overrides :

chatInputComponent: React.ComponentType

You can override the ChatTextInput component by passing in a React Component under the chatInput key to the ChatCmpInterface Object

Use the code example given below showcasing overriding of the default chat input as a guide.

info

A more advanced usage example can be found here

videoCall.chat.chatBubble :

ChatBubbleComponent

The Chat Bubble component displays the message inside the chat ui. It is conditionally styled based on message origin (ie local or remote).

Overrides :

You can override the ChatBubble component by passing in a React Component under the chatBubble key to the ChatCmpInterface Object

ChatBubbleProps

PropTypeDescription
isLocalbooleanSpecifies if the message is from a local user or if it is from a remote user
messagestringContent of the chat message
createdTimestampnumberTimestamp of the message creation
updatedTimestampnumberTimestamp of the message updation
uidUidTypeUid of the user who sent the message
msgIdstringUnique id for identify the message
isDeletedbooleanFlag to confirm is the message is deleted
isSameUserbooleanFlag to confirm is the message send by the local user
previousMessageCreatedTimestampstringPrevious message(n-1) timestamp
render?(isLocal: boolean, message: string, createdTimestamp: string,uid: UidType,msgId: string,isDeleted: boolean,updatedTimestamp: string,isSameUser: boolean, previousMessageCreatedTimestamp?: string,) => JSX.ElementRender method for chat bubble to provide a ui

Use the code example given below showcasing overriding of the default chat bubble ui as a guide.

info

A more advanced usage example can be found here

videoCall.participantsPanel :

ParticipantsPanelComponent

The participantsPanel component lists all the users in the video call / livestream along with their audio and video status. Hosts additionally are able to see user controls such as mute participant , remove participant from call.


Overrides:

ParticipantsPanelComponent: React.ComponentType


videoCall.virtualBackgroundPanel :

VirtualBackgroundPanelComponent

The virtualBackgroundPanel component offers a user-friendly interface for managing virtual backgrounds in a video call. It includes:

  • List of Virtual Backgrounds: Displays all available virtual background options.
  • Preview Area: Allows users to try out different virtual backgrounds.
  • Save Button: Applies the selected virtual background effect to the ongoing video call.

Overrides:

VirtualBackgroundPanelComponent: React.ComponentType

You can override the entire virtualBackgroundPanel component by passing in a React.ComponentType under the virtualBackgroundPanel key to the VideocallInterface Object

Use the example code given below showcasing a simple use-case of the api as a guide.

Result:

bottombar component override
Before
bottombar component override
After
info

A more advanced usage example can be found here


videoCall.customLayout :

customLayoutOverrideFunction

Customize the layout through LayoutInterface

Overrides:

customLayoutOverrideFunction: ( DefaultLayouts ) => LayoutItem[]

You can override the layouts by providing a function with LayoutInterface[] return type to the customLayout under VideoCallInterface object.

This function receives an array of default layouts and expects you to return an array of LayoutObjects that represent your layouts.

DefaultLayouts: Array <LayoutInterface>

IndexTypeValue
0LayoutInterface{
name: 'pinned',
icon: <"PinnedIcon">,
component: PinnedLayoutComponent
}
1LayoutInterface{
name: 'grid',
icon: <"GridIcon">,
component: GridLayoutComponent
}

LayoutItem

KeyTypeDescription
namestringName of the layout
labelstringLabel of the layout to be displayed in UI
iconstringCan be a
1. Base 64 Image string
2. CDN URL
3. Bundler imported string
componentLayoutComponentLayout component to be used to render the video feeds

LayoutComponent: React.Component<{ renderData: contentStateInterface["activeUids"] }>

Use the example code given below showcasing appending a custom layout as a guide.

info

A more advanced usage example can be found here


videoCall.wrapper :

React.Component

Accepts a React Component under which the Video UI is rendered.

info

The component must return the received props.children to render the Video call

tip

videoCall.wrapper does have access to any App Builder app states

Use the example code given below showcasing a simple use-case of the api as a guide.

videoCall.captionPanel :

captionPanelComponent

The captionPanel component contains live caption data for last two speakers. This live caption data will be updated based on any correction or improvement needed


Overrides:

CaptionPanelComponent: React.ComponentType


videoCall.transcriptPanel :

transcriptPanelComponent

The transcriptPanel component contains finalized transcript data for all users who spoken during the session and user will have option to download the transcript data


Overrides:

TranscriptPanelComponent: React.ComponentType


videoCall.customSidePanel :

customSidePanelOverrideFunction

The customSidePanel API used to inject custom side panel into the video call screen. To activate the custom side panel use useSidePanel


Overrides:

customSidePanelOverrideFunction: () => SidePanelItem[]

You can pass function which return array of objects, Object will contain information to inject custom side panel


SidePanelItem

KeyTypeDescription
namestringUnique name of the sidepanel which used to activate side panel
titlestringLabel of the sidepanel to be displayed in UI
componentReact.ComponentReact component used to render in the side panel
onClose() => voidCallback function which will be executed on closing the side panel

Use the example code given below showcasing a simple use-case of the api as a guide.



videoCall.customAgentInterface :

React.ComponentType<CustomAgentInterfaceProps>

The customAgentInterface API used to modify AI Agent Interface. To get AI Agent State use useAIAgent


Overrides:

CustomAgentInterfaceProps



Accepts a React Component under which the App Builder ui is rendered.

info

The component must return the received props.children to render the App Builder ui.

tip

App root does not have access to any App Builder app states

Use the example code given below showcasing a simple use-case of the api as a guide.


Accepts a React Component which override the Precall UI interface

Use the example code given below showcasing a simple use-case of the api as a guide.


precall.wrapper :

React.Component

Accepts a React Component under which the Precall UI is rendered.

info

The component must return the received props.children to render the precall screen

Use the example code given below showcasing a simple use-case of the api as a guide.


preferenceWrapper :

React.ComponentType

Context provider that wraps the application where preferences need to be managed and accessed. It provides the necessary context for managing virtual background options and other preferences.

info

The component must return the received props.children to render the App

tip

preferenceWrapper does have access to any App Builder app states

Use the example code given below showcasing how to add more virtual background options in the app