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.

---

Toolbar :

React.ComponentType

The Toolbar component used to recreate custom toolbar. Its wrapper for custom toolbar component which provides the necessary width and height.

turnkey

import { Toolbar } from "customization-api";

react-sdk

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

web-sdk

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

ToolbarItem :

React.ComponentType

The ToolbarItem component used to recreate custom toolbar item. Its wrapper for custom toolbar item which provides the necessary width and height.

turnkey

import { ToolbarItem } from "customization-api";

react-sdk

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

web-sdk

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

ToolbarPreset :

React.ComponentType <ToolbarPresetProps >

The ToolbarPreset component used to display/customize the top/bottom toolbar.

turnkey

import { ToolbarPreset } from "customization-api";

react-sdk

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

web-sdk

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

ToolbarPresetProps

Prop	Type	Description
align	ToolbarPresetAlign	Used to get default top or bottom toolbar component
items	ToolbarItemsConfig	To modify/add toolbar items

ChatInput :

React.ComponentType

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

turnkey

import { ChatInput } from "customization-api";

react-sdk

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

web-sdk

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

ChatSendButtonProps

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

ChatAttachmentButton :

React.ComponentType <ChatAttachmentButtonProps >

The ChatAttachmentButton component provides an option to upload Image or File messages . Relies on ChatUiControl app state to determine required information.

turnkey

import { ChatAttachmentButton } from "customization-api";

react-sdk

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

web-sdk

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

ChatAttachmentButtonProps

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

ChatEmojiButton :

React.ComponentType <ChatEmojiButtonProps >

The ChatEmojiButton component provides an option to send emojis in the chat message. Relies on ChatUiControl app state to determine required information.

turnkey

import { ChatEmojiButton } from "customization-api";

react-sdk

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

web-sdk

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

ChatEmojiButtonProps

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

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
messageType	MessageType	Type of chat message sent / received
thumb	string	Thumbnail URL of the image message that is sent / received
fileName	string	Name of the image or file message that is sent / received
ext	string	Extension of image or file message that is sent / received

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
chatInput?	React.ComponentType	ChatInput component to be used

VideoPreview :

React.ComponentType <VideoPreviewProps >

Video Preview generates a camera track , this can be used to add virtual background effects on the preview video of the user.

VideoPreviewProps

Prop	Type	Description
isLocalVideoON	boolean	Indicates whether the user's local video is enabled

MaxVideoView :

React.ComponentType <MaxVideoViewProps >

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";

MaxVideoViewProps

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

GridLayout :

React.ComponentType <LayoutComponent >

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 <LayoutComponent >

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";

LayoutComponent

Prop	Type	Description
renderData:	contentStateInterface["activeUids"]	active uids data

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
name:	string	Display the user name
muted?:	boolean	mute state of user

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
uid:	UidType	Pass the UID of the user who you want to display the network quality indicator

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";

CaptionPanel :

React.ComponentType <CaptionPanelProps >

The CaptionPanel component is used to render the live caption data of the last two speaker. These caption will be updated if any correction needed

turnkey

import { CaptionPanel } from "customization-api";

react-sdk

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

web-sdk

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

CaptionPanelProps

Prop	Type	Description
containerStyle?:	ViewStyle	Style for the container of captions
captionUserStyle?:	TextStyle	Style for the display name of users whos caption is captured
captionTextStyle?:	TextStyle	Style for the display of caption Text

TranscriptPanel :

React.ComponentType

The TranscriptPanel component is used to render the transcript data of the all users during speech to text session. It will have list of finalized transcript data along with user name and option to download the transcript.

turnkey

import { TranscriptPanel } from "customization-api";

react-sdk

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

web-sdk

import { TranscriptPanel } 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";

---