Subcomponents Library

Turnkey

Embed-SDK React

Embed-SDK Web

Set of components to be composed as needed by the user.

turnkey

You can access them under the customization-api module as a named export.

react-sdk

You can access them under the @appbuilder/react module as a named export.

web-sdk

You can access them under the @appbuilder/web module as a named export.

---

icons :

IconsInterface

The object containing all the default icons used in the ui.

turnkey

import { icons } from "customization-api";

react-sdk

import { icons } from "@appbuilder/react";

web-sdk

import { icons } from "@appbuilder/web";

IconsInterface

Icon	Name	Type
	videocam	string
	videocamOff	string
	mic	string
	micOff	string
	recordingIcon	string
	recordingActiveIcon	string
	screenshareIcon	string
	screenshareOffIcon	string
	raiseHandIcon	string
	endCall	string
	gridLayoutIcon	string
	gridLayoutFilledIcon	string
	pinnedLayoutIcon	string
	participantIcon	string
	participantFilledIcon	string
	chatIcon	string
	chatIconFilled	string
	settings	string
	settingFilled	string
	clipboard	string
	checkCircleIcon	string
	crossCircleIcon	string
	demoteIcon	string
	exclamationIcon	string
	backBtn	string
	networkIcons	{  Excellent: string,  Unsupported: string,  Good: string,  Bad: string,  VeryBad: string,  Loading: string, }

ChatSendButton :

React.ComponentType <ChatSendButtonProps >

The ChatSendButton component displays the chat send button. Relies on ChatUiControl app state to determine required information.

turnkey

import { ChatSendButton } from "customization-api";

react-sdk

import { ChatSendButton } from "@appbuilder/react";

web-sdk

import { ChatSendButton } from "@appbuilder/web";

ChatSendButtonProps

Prop	Type	Description
render?	( onPress: () => void ) => JSX.Element	Render method for ChatSendButton

ChatTextInput :

React.ComponentType <ChatTextInputProps >

The ChatTextInput component displays the chat input box. Relies on ChatUiControl app state to determine required information.

turnkey

import { ChatTextInput } from "customization-api";

react-sdk

import { ChatTextInput } from "@appbuilder/react";

web-sdk

import { ChatTextInput } from "@appbuilder/web";

ChatTextInputProps

Prop	Type	Description
render?	(ChatTextInputRenderProps) => JSX.Element	Render method for ChatTextInput

ChatTextInputRenderProps

Prop	Type
message	string
onChangeText	( text: string ) => void,
onSubmitEditing	() => void,
chatMessageInputPlaceholder	string

ChatBubble :

React.ComponentType <ChatBubbleProps >

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

turnkey

import { ChatBubble } from "customization-api";

react-sdk

import { ChatBubble } from "@appbuilder/react";

web-sdk

import { ChatBubble } from "@appbuilder/web";

ChatBubbleProps

Prop	Type	Description
msgId	string	Message id
message	string	Content of the chat message
uid	UidType	Name of the user who sent the message
isLocal	boolean	Specifies if the message is from a local user or if it is from a remote user
isDeleted	boolean	Specifies if the message has been deleted
createdTimestamp	number	Message creation timestamp
updatedTimestamp	number	Last message update timestamp
render?	( msg: string, isLocal: boolean, uid: string, ts: number) => JSX.Element	Render method for chat bubble to provide a custom jsx

Chat :

React.ComponentType <ChatProps >

The Chat component displays the chat sidepanel. Relies on ChatUiControl app state to determine required information.

turnkey

import { Chat } from "customization-api";

react-sdk

import { Chat } from "@appbuilder/react";

web-sdk

import { Chat } from "@appbuilder/web";

ChatProps

Prop	Type	Description
chatBubble?	React.ComponentType<ChatBubbleProps>	ChatBubble component to be used
chatTextInput?	React.ComponentType<ChatTextInputProps>	ChatTextInput component to be used
chatSendButton?	React.ComponentType<ChatSendButtonProps>	ChatSendButton component to be used

MaxVideoView :

React.ComponentType <MaxVideoRendererProps >

The MaxVideoView component is used to render the user video feed using UiKitMaxVideoView along with overlay components like NameWithMicStatus, NetworkQualityPill etc.

turnkey

import { MaxVideoView } from "customization-api";

react-sdk

import { MaxVideoView } from "@appbuilder/react";

web-sdk

import { MaxVideoView } from "@appbuilder/web";

MaxVideoRendererProps

Prop	Type	Description
user :	RenderInterface	The user object you need to display the video feed off

GridLayout :

React.ComponentType <RenderStateInterface >

The GridLayout component is used to render the user video feeds in a responsive grid pattern.

turnkey

import { GridLayout } from "customization-api";

react-sdk

import { GridLayout } from "@appbuilder/react";

web-sdk

import { GridLayout } from "@appbuilder/web";

PinnedLayout :

React.ComponentType <RenderStateInterface >

The PinnedLayout component is used to render the user video feeds in a pinned view with a collapsible sidebar displaying unpinned user feeds.

turnkey

import { PinnedLayout } from "customization-api";

react-sdk

import { PinnedLayout } from "@appbuilder/react";

web-sdk

import { PinnedLayout } from "@appbuilder/web";

VideoComponent :

React.ComponentType

The VideoComponent is used to automatically render the user video feeds in the selected layout.

turnkey

import { VideoComponent } from "customization-api";

react-sdk

import { VideoComponent } from "@appbuilder/react";

web-sdk

import { VideoComponent } from "@appbuilder/web";

NameWithMicIcon :

React.ComponentType <NameWithMicIconProps >

The NameWithMicIcon component is used to render the user name along with their mic muted state.

turnkey

import { NameWithMicIcon } from "customization-api";

react-sdk

import { NameWithMicIcon } from "@appbuilder/react";

web-sdk

import { NameWithMicIcon } from "@appbuilder/web";

NameWithMicIconProps

Prop	Type	Description
user :	RenderInterface	The user object you need to display the name and mic status of

NetworkQualityPill :

React.ComponentType <NetworkQualityPillProps >

The NetworkQualityPill component is used to render the user network quality in a pill container that expands when hovered over.

turnkey

import { NetworkQualityPill } from "customization-api";

react-sdk

import { NetworkQualityPill } from "@appbuilder/react";

web-sdk

import { NetworkQualityPill } from "@appbuilder/web";

NetworkQualityPillProps

Prop	Type	Description
user :	RenderInterface	The user object you need to display the network quality of

VideocallScreen :

React.ComponentType

The VideocallScreen component is used to render the entire video call screen.

turnkey

import { VideocallScreen } from "customization-api";

react-sdk

import { VideocallScreen } from "@appbuilder/react";

web-sdk

import { VideocallScreen } from "@appbuilder/web";

SettingsView :

React.ComponentType

The SettingsView component is used to render the settings side panel.

turnkey

import { SettingsView } from "customization-api";

react-sdk

import { SettingsView } from "@appbuilder/react";

web-sdk

import { SettingsView } from "@appbuilder/web";

ParticipantsView :

React.ComponentType

The ParticipantsView component is used to render the participant panel that 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.

turnkey

import { ParticipantsView } from "customization-api";

react-sdk

import { ParticipantsView } from "@appbuilder/react";

web-sdk

import { ParticipantsView } from "@appbuilder/web";

Controls :

React.ComponentType

The Controls component is used to render all the meeting controls.

turnkey

import { Controls } from "customization-api";

react-sdk

import { Controls } from "@appbuilder/react";

web-sdk

import { Controls } from "@appbuilder/web";

note

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

NavBar :

React.ComponentType <NavBarProps >

The NavBar component displays the nav bar.

turnkey

import { NavBar } from "customization-api";

react-sdk

import { NavBar } from "@appbuilder/react";

web-sdk

import { NavBar } from "@appbuilder/web";

NavBarProps

Prop	Type	Description
message	string	Content of the chat message

HorizontalRule :

React.ComponentType <HorizontalRuleProps >

The HorizontalRule component displays a horizontal line.

turnkey

import { HorizontalRule } from "customization-api";

react-sdk

import { HorizontalRule } from "@appbuilder/react";

web-sdk

import { HorizontalRule } from "@appbuilder/web";

HorizontalRuleProps

Prop	Type	Description
style	viewProps	custom css to override existing style

RenderComponent :

React.ComponentType <RenderComponentProps >

The Render component handles rendering the correct content view component as defined in custom content api based on the content type corresponding to the uid as defined in the Render app state.

turnkey

import { RenderComponent } from "customization-api";

react-sdk

import { RenderComponent } from "@appbuilder/react";

web-sdk

import { RenderComponent } from "@appbuilder/web";

RenderComponentProps

Prop	Type	Description
uid	uidtype	uid of renderObject to be rendered

TextInput :

React.ComponentType< |TextInputProps >

The TextInput component is used to render a text input box.

turnkey

import { TextInput } from "customization-api";

react-sdk

import { TextInput } from "@appbuilder/react";

web-sdk

import { TextInput } from "@appbuilder/web";

PrimaryButton :

React.ComponentType <PrimaryButtonProps >

The PrimaryButton component is used to render a button with app builder primary button styling.

turnkey

import { PrimaryButton } from "customization-api";

react-sdk

import { PrimaryButton } from "@appbuilder/react";

web-sdk

import { PrimaryButton } from "@appbuilder/web";

PrimaryButtonProps

Prop	Type	Description
text	string	Text to be displayed on the button

SecondaryButton :

React.ComponentType <SecondaryButtonProps >

The SecondaryButton component is used to render a button with app builder primary button styling.

turnkey

import { SecondaryButton } from "customization-api";

react-sdk

import { SecondaryButton } from "@appbuilder/react";

web-sdk

import { SecondaryButton } from "@appbuilder/web";

SecondaryButtonProps

Prop	Type	Description
text	string	Text to be displayed on the button

UiKitBtnTemplate :

BtnTemplate

The UiKitBtnTemplate component renders a button in UiKit button structure.

turnkey

import { UiKitBtnTemplate } from "customization-api";

react-sdk

import { UiKitBtnTemplate } from "@appbuilder/react";

web-sdk

import { UiKitBtnTemplate } from "@appbuilder/web";

UiKitMaxVideoView :

MaxVideoView

The UiKitMaxVideoView component is used to render the user video feed along with a fallback component in case user video feed is disabled.

turnkey

import { UiKitMaxVideoView } from "customization-api";

react-sdk

import { UiKitMaxVideoView } from "@appbuilder/react";

web-sdk

import { UiKitMaxVideoView } from "@appbuilder/web";

UiKitImageIcon :

ImageIcon

The UiKitImageIcon component is used to render a given icon within a wrapper component.

turnkey

import { UiKitImageIcon } from "customization-api";

react-sdk

import { UiKitImageIcon } from "@appbuilder/react";

web-sdk

import { UiKitImageIcon } from "@appbuilder/web";

NavBarComponentsArray :

React.ComponentType[]

The NavBarComponentsArray is an array of all buttons present on the default nav bar component.

Index	Name	Type	Description
0	CopyJoinInfo	CopyJoinInfoComponent	Button to copy meeting invite
1	ParticipantsCountView	ParticipantsCountViewComponent	Element to show number of participant in the chat
2	ParticipantsIconButton	ParticipantsIconButtonComponent	Button to toggle participants sidepanel
3	ChatIconButton	ChatIconButtonComponent	Button to toggle chat sidepanel
4	LayoutIconButton	LayoutIconButtonComponent	Button to switch layouts
5	SettingsIconButton	SettingsIconButtonComponent	Button to toggle setting sidepanel

turnkey

import { NavBarComponentsArray } from "customization-api";

react-sdk

import { NavBarComponentsArray } from "@appbuilder/react";

web-sdk

import { NavBarComponentsArray } from "@appbuilder/web";

Navbar Components:

CopyJoinInfoComponent: React.ComponentType<CopyJoinInfoProps>

CopyJoinInfoProps

Key	Type	Description
showText	boolean	Flag to determine whether to show text besides button
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, buttonTemplateName: buttonTemplateName ) => JSX.Element	Component to be used to render the button

ParticipantsCountViewComponent: React.ComponentType

ParticipantsIconButtonComponent: React.ComponentType<ParticipantsIconButtonProps>

ParticipantsIconButtonProps

Key	Type	Description
badgeContainerPosition	{ top?: number, right?: number, left?: number, bottom?: number }	Position for pending chat messages alert badge
badgeTextStyle	TextStyle	custom style for badge text
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isPanelActive: boolean, totalUnreadCount: number , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

ChatIconButtonComponent: React.ComponentType<ChatIconButtonProps>

ChatIconButtonProps

Key	Type	Description
liveStreamingRequestAlertIconPosition	{ top?: number, right?: number, left?: number, bottom?: number }	Position for pending raise hand requests alert badge
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, isPanelActive: boolean, buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

LayoutIconButtonComponent: React.ComponentType<LayoutIconButtonProps>

LayoutIconButtonProps

Key	Type	Description
modalPosition	{ top?: number, right?: number, left?: number, bottom?: number }	Position of the switch layout modal
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

SettingsIconButtonComponent: React.ComponentType<SettingsIconButtonProps>

SettingsIconButtonProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

ControlsComponentsArray :

React.ComponentType[]

The ControlsComponentsArray is an array of all meeting control button subcomponents listed below.

Index	Name	Type	Description
0	LocalAudioMute	LocalAudioMuteComponent	Control button to mute/unmute local user audio
1	LocalVideoMute	LocalVideoMuteComponent	Control button to mute/unmute local user video
2	LocalSwitchCamera	LocalSwitchCameraComponent	Control button to switch local user video camera
3	ScreenshareButton	ScreenshareButtonComponent	Control button to start/stop screenshare
4	Recording	RecordingComponent	Control button to start/stop meeting recording
5	LocalEndCall	LocalEndCallComponent	Control button to end local user call
6	LiveStreamControls	LiveStreamControlsComponent	Control button to send/recall local user raise hand request

turnkey

import { ControlsComponentArray } from "customization-api";

react-sdk

import { ControlsComponentArray } from "@appbuilder/react";

web-sdk

import { ControlsComponentArray } from "@appbuilder/web";

Control Components:

LocalAudioMuteComponent: React.ComponentType<LocalAudioMuteProps>

LocalAudioMuteProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void, isEnabled: boolean, buttonTemplateName: buttonTemplateName ) => JSX.Element	Component to be used to render the button

LocalVideoMuteComponent: React.ComponentType<LocalVideoMuteProps>

LocalVideoMuteProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

LocalSwitchCameraComponent: React.ComponentType<LocalSwitchCameraProps>

LocalSwitchCameraProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

ScreenshareButtonComponent: React.ComponentType<ScreenshareButtonProps>

ScreenshareButtonProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

RecordingComponent: React.ComponentType<RecordingProps>

RecordingProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , isEnabled: boolean , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

LocalEndCallComponent: React.ComponentType<LocalEndCallProps>

LocalEndCallProps

Key	Type	Description
buttonTemplateName	buttonTemplateName	Type of button template to be used for the button
render?	( onPress: ()=>void , buttonTemplateName: buttonTemplateName ) => JSX.Element	Function to be used to render the button

LiveStreamControlsComponent : React.ComponentType<LiveStreamControlsProps>

LiveStreamControlsProps

Key	Type	Description
showControls	boolean	Determines if livestream controls are renders

SidePanelButtonsArray :

React.ComponentType[]

The SidePanelButtonsArray is an array of all the side panel button subcomponents listed below.

Index	Name	Type	Description
0	RemoteAudioMute	RemoteAudioMuteComponent	Side panel button to mute remote user audio
1	RemoteVideoMute	RemoteVideoMuteComponent	Side panel button to mute remote user video
2	RemoteEndCall	RemoteEndCallComponent	Side panel button to remote remote user from call
3	RemoteLiveStreamApprovedRequestRecall	RemoteLiveStreamApprovedRequestRecallComponent	Side panel button to recall attendee raise hand request
4	RemoteLiveStreamRequestApprove	RemoteLiveStreamRequestApproveComponent	Side panel button to approve attendee raise hand request
5	RemoteLiveStreamRequestReject	RemoteLiveStreamRequestRejectComponent	Side panel button to reject attendee raise hand request
6	ChatSendButton	ChatSendButtonComponent	Side panel button send chat message
7	MuteAllAudioButton	MuteAllAudioButtonComponent	Side panel button to mute all remote users audio
8	MuteAllVideoButton	MuteAllVideoButtonComponent	Side panel button to mute all remote users video

turnkey

import { SidePanelButtonsArray } from "customization-api";

react-sdk

import { SidePanelButtonsArray } from "@appbuilder/react";

web-sdk

import { SidePanelButtonsArray } from "@appbuilder/web";

SidePanel Button Components:

RemoteAudioMuteComponent : React.ComponentType<RemoteAudioMuteProps>

RemoteAudioMuteProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for
audio	boolean	audio mute state of the remote user
isHost	boolean	host status of the local user

RemoteVideoMuteComponent : React.ComponentType<RemoteVideoMuteProps>

RemoteVideoMuteProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for
video	boolean	video mute state of the remote user
isHost	boolean	host status of the local user

RemoteEndCallComponent : React.ComponentType<RemoteEndCallProps>

RemoteEndCallProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for
isHost	boolean	host status of the local user

RemoteLiveStreamApprovedRequestRecallComponent : React.ComponentType<RemoteLiveStreamApprovedRequestRecallProps>

RemoteLiveStreamApprovedRequestRecallProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for

RemoteLiveStreamRequestApproveComponent : React.ComponentType<RemoteLiveStreamControlApproveProps>

RemoteLiveStreamRequestApproveProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for

RemoteLiveStreamRequestRejectComponent : React.ComponentType<RemoteLiveStreamControlRejectProps>

RemoteLiveStreamRequestRejectProps

Key	Type	Description
uid	UidType	uid of the user to perform the action for

ChatSendButtonComponent : React.ComponentType<ChatSendButtonProps>

ChatSendButtonProps

Key	Type	Description
render	(onPress: () => void) => JSX.Element	Function to be used to render the button

MuteAllAudioButtonComponent : React.ComponentType<MuteAllAudioButtonProps>

MuteAllAudioButtonProps

Key	Type	Description
render	(onPress: () => void) => JSX.Element	Function to be used to render the button

MuteAllVideoButtonComponent: React.ComponentType<MuteAllVideoButtonProps>

MuteAllVideoButtonProps

Key	Type	Description
render	(onPress: () => void) => JSX.Element	Function to be used to render the button

---