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.

---

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

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
isLocal	boolean	Specifies if the message is from a local user or if it is from a remote user
message	string	Content of the chat message
createdTimestamp	number	Timestamp of the message creation
updatedTimestamp	number	Timestamp of the message updation
uid	UidType	Uid of the user who sent the message
msgId	string	Unique id for identify the message
isDeleted	boolean	Flag to confirm is the meesage is deleted
isSameUser	boolean	Flag to confirm is the meesage send by the local user
previousMessageCreatedTimestamp	string	Previous message(n-1) timestamp
render?	(isLocal: boolean, message: string, createdTimestamp: string,uid: UidType,msgId: string,isDeleted: boolean,updatedTimestamp: string,isSameUser: boolean, previousMessageCreatedTimestamp?: string,) => JSX.Element	Render method for chat bubble to provide a ui

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

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	The Uid of the user that 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";

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

---