-
-
-
-
-
-
-
-
- Dyte's documentation portal, built with Docusaurus.
-
- Explore the docs »
+ Documentation portal for OSPI (Open Standard Product Identification), built with Docusaurus.
- View Demo
- ·
- Report Bug
+ Platform source
·
- Request Feature
+ Report an issue
onAudioUpdate callback to DyteSelfEventsListener")
-
- class eam basic;
-```
-
-onVideoUpdate callback to DyteSelfEventsListener")
-
- class eam basic;
-```
-
-
diff --git a/docs/android/build-pre-call-ui/build-your-own/edit-user-name.mdx b/docs/android/build-pre-call-ui/build-your-own/edit-user-name.mdx
deleted file mode 100644
index 3c6ec04805..0000000000
--- a/docs/android/build-pre-call-ui/build-your-own/edit-user-name.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Edit user name
-sidebar_position: 2
----
-
-A common use case of pre-call UI is to give the user a option to set / edit their name.
-
-### Permissions
-
-Requires `meeting.localUser.permissions.miscellaneous.canEditDisplayName` to be `true`
-
-In the preset editor, ensure `Miscellaneous > Edit Name` is toggled enabled.
-
-
-
-### File: CustomMeetingPreview.tsx
-
-We add a `
-
-Let's put a basic skeleton and the initial boilerplate code.
-
-Barebone xml needed to redner ui for self name and a button to join the meeting will look as follow:
-
-```xml
-
-
diff --git a/docs/android/build-pre-call-ui/default-setup-screen.mdx b/docs/android/build-pre-call-ui/default-setup-screen.mdx
deleted file mode 100644
index 84e472ffd1..0000000000
--- a/docs/android/build-pre-call-ui/default-setup-screen.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: DyteSetupScreen
-sidebar_position: 4
----
-
-Dyte provides a default pre-call preview UI, also known as setup screen as part of our UI components.
-
-To use the default pre-built setup screen you can use `DyteSetupFragment` from our components.
-
-```kotlin
-fragmentManager
- .beginTransaction()
- .add(id.fragmentContainer, DyteSetupFragment(), "TAG")
- .commit()
-```
-
-If you want to break down the above for a custom UI but still want to reuse the default setup screen, use the following component.
-
-If you want to build a custom pre-call UI, let's go to the next page to start building one.
diff --git a/docs/android/chat/_category_.json b/docs/android/chat/_category_.json
deleted file mode 100644
index fce8ca11dd..0000000000
--- a/docs/android/chat/_category_.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "position": 7,
- "label": "Chat",
- "collapsible": true
-}
diff --git a/docs/android/chat/prebuilt-screen.mdx b/docs/android/chat/prebuilt-screen.mdx
deleted file mode 100644
index a6a8f8794f..0000000000
--- a/docs/android/chat/prebuilt-screen.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-sidebar_position: 1
-title: Prebuilt Chat Screen
----
-
-## Introduction to Chat in Dyte Meetings
-
-In Dyte meetings, participants can also engage in real-time communication by sending chat messages.
-These messages can be text, images, or files, depending on the [chat permissions](/guides/livestream/advanced/configuring-permissions#chat)
-set in their preset.
-
-## Dyte's Prebuilt Chat Screen
-
-Dyte's Android UI Kit includes prebuilt Chat screen that handle the complete chat logic and offer
-a range of features to enhance the chat experience in Dyte meetings:
-
-- **Display Messages**: Displays all chat messages, including text, images, and files, in a clear and organized manner
-- **Image Preview**: Allows users to tap on an image message to view it in full screen
-- **File Download**: Enables users to download files sent in chat messages with a simple tap
-- **Message Composer**: Provides a user-friendly interface for composing messages, supporting text,
- image, and file messages. It automatically adjusts the UI based on the user's chat permissions,
- hiding or disabling options that are not permitted
-- **Auto-Scroll**: Auto-scrolls to new messages as they are received but stops auto-scrolling if the user
- has scrolled up to read an old message
-- **Device Permissions**: Handles device permissions elegantly on all supported Android versions for sending images, files,
- and downloading files to the device. This saves developers effort, allowing them to focus on building their apps
-
-
-
- 
-
-
-
-## Host Controls
-
-If you are the host of the room, you will see the **host controls** when you click the **three-dot menu** on the top right corner of the participants list. The host controls allow you to manage the participants in the room.
-
-The host controls include the following options:
-
-- **Mute/Unmute**: Mute or unmute a participant.
-- **Kick**: Kick a participant from the room.
-- **Pin**: Pin a participant's video.
-- **Turn off video**: Turn off a participant's video.
-
-
-
-
-## Using a plugin in a meeting
-
-To use a plugin in a meeting, you can use the rocket icon next to the plugin name in the plugins list.
-
-
-
-
-## Send data to the plugin
-
-You can send data (type `any`) to a plugin using the `sendData()` method. This method comes in handy when building your own plugin.
-
-```kotlin
-val pluginId = '...';
-val plugin = meeting.plugins.active.firstOrNull { it.id == pluginId }
-
-plugin?.let { p ->
- p.sendData(
- eventName = "my-custom-event",
- data = "Hello world"
- )
-}
-```
-
-## Receive data from the plugin
-
-You can receive data from a plugin by subscribing to the `onPluginActivated` event in through our `DytePluginEventsListener` interface.
-
-```kotlin
-private var pluginEventListener: DytePluginEventsListener =
- object : DytePluginEventsListener {
- override fun onPluginActivated(plugin: DytePlugin) {
- // do something with the plugin
- }
-
- ...
- }
-
-// use while initializing the meeting
-meeting.addPluginEventsListener(pluginEventListener)
-```
diff --git a/docs/android/polls/_category_.json b/docs/android/polls/_category_.json
deleted file mode 100644
index 38f4bee4c0..0000000000
--- a/docs/android/polls/_category_.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "position": 9,
- "label": "Polls",
- "collapsible": true
-}
diff --git a/docs/android/polls/prebuilt-create-poll.mdx b/docs/android/polls/prebuilt-create-poll.mdx
deleted file mode 100644
index d0ddeb51a3..0000000000
--- a/docs/android/polls/prebuilt-create-poll.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-sidebar_position: 2
-title: Prebuilt Create Poll Screen
----
-
-In Dyte meetings, participants can create polls to gather opinions or make decisions collectively.
-The ability to create polls is determined by the [polls permissions](/guides/livestream/advanced/configuring-permissions#polls)
-set in the participant's preset.
-
-## Using Dyte's Create Poll Screen
-
-Dyte's Android UI Kit provides a user-friendly prebuilt screen, [DyteCreatePollBottomSheet](/android/components/dyte-poll-form),
-for creating polls in a Dyte meeting. When using the DyteCreatePollBottomSheet, the poll creator can:
-
-- Add more options to the poll (default is 2)
-- Choose to make the poll voting anonymous
-- Choose to hide the poll results before voting, keeping the vote count and voters hidden from participants
-
-To integrate the `DyteCreatePollBottomSheet` into your app and allow participants to create polls,
-use the provided code snippet:
-
-```kotlin
-import dyte.io.uikit.screens.polls.DyteCreatePollBottomSheet
-
-val createPollBottomSheet = DyteCreatePollBottomSheet()
-createPollBottomSheet.show(childFragmentManager, TAG)
-```
-
-
-
-**Wrap Up**: With Dyte's prebuilt Create Poll screen, you can easily add interactive polls features
-to your app, enhancing participant engagement in Dyte meetings.
diff --git a/docs/android/polls/prebuilt-polls-screen.mdx b/docs/android/polls/prebuilt-polls-screen.mdx
deleted file mode 100644
index 53955c193a..0000000000
--- a/docs/android/polls/prebuilt-polls-screen.mdx
+++ /dev/null
@@ -1,65 +0,0 @@
----
-sidebar_position: 1
-title: Prebuilt Polls Screen
----
-
-## Introduction to Polls in Dyte Meetings
-
-In Dyte meetings, participants can engage in polls to gather opinions or make decisions collectively.
-Polls enhance the interactive nature of meetings, allowing participants to actively express their views.
-The ability to create, or interact with polls is determined by the [polls permissions](/guides/livestream/advanced/configuring-permissions#polls)
-set in the participant's preset.
-
-## Dyte's Prebuilt Polls Screen
-
-Dyte's Android UI Kit provides a prebuilt Polls screen with the following features:
-
-- Displays all created polls if the participant has permission to view them
-- Allows participants to vote by selecting a checkbox for their chosen option
-- Shows the number of votes each poll option has received
-
-### Usage Options
-
-The prebuilt Polls screen is available in two variants:
-
-1. [**DytePollsBottomSheet**](/android/components/dyte-polls): Displays the Polls list as a full-screen bottom sheet that can be dismissed by swiping down.
-
-```kotlin
-import dyte.io.uikit.screens.polls.DytePollsBottomSheet
-
-val dytePollsBottomSheet = DytePollsBottomSheet()
-dytePollsBottomSheet.show(childFragmentManager, TAG)
-```
-
-2. **DytePollsFragment**: Shows the list of ongoing polls inside an Android fragment, providing flexibility
- to show the Polls UI fullscreen or in a part of the screen along with other UI elements.
-
-```xml
-
-
-
-## Next Steps
-
-In the next guide, we will explore the "Prebuilt Create Poll screen" which allows participants to create polls
-if they have permission in their preset.
diff --git a/docs/android/quickstart.mdx b/docs/android/quickstart.mdx
deleted file mode 100644
index b86e085998..0000000000
--- a/docs/android/quickstart.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
----
-sidebar_position: 1
-slug: /
-description: >-
- Dive into Dyte's Android documentation to integrate video collaboration
- seamlessly into your Android applications.
----
-
-import { MavenLatestInstallation } from '@site/src/components/LatestInstallation';
-
-# Quickstart
-
-This quickstart shows how to use Dyte's Android UI Kit SDK to add live video and
-audio to your Android applications.
-
-To get started quickly, you can use our sample code. Simply clone and run a sample application
-from the Android UIKit samples, available in both [Kotlin](https://github.com/dyte-io/android-samples/tree/main/samples/android-ui-kit-sample-kotlin) and [Java](https://github.com/dyte-io/android-samples/tree/main/samples/android-uikit-sample-java).
-
-## Objective
-
-You'll learn how to:
-
-- [Install the Dyte SDK](#step-1-install-the-sdk-from-mavencentral)
-- [Configure a Dyte meeting](#step-2-configure-a-dyte-meeting)
-- [Initialize the SDK](#step-3-initialize-the-sdk)
-- [Launch the meeting UI](#step-4-launch-the-meeting-ui)
-
-## Before Getting Started
-
-Make sure you've read the
-[Getting Started with Dyte](/getting-started) topic and
-completed the steps in the
-[Integrate Dyte](/getting-started#integrate-dyte) section.
-You must complete the following steps:
-
-- Create a [Dyte Developer Account](https://dev.dyte.io/)
-- Create a
- [Dyte Meeting](/api/?v=v2#/operations/create_meeting)
-- [Add Participant](/api/?v=v2#/operations/add_participant)
- to the meeting
-- Install [Android Studio](https://developer.android.com/studio)
-
-## Step 1: Install the SDK from MavenCentral
-
-
-
-## Using DyteParticipantTileView
-
-To achieve this UI, we will utilize the `DyteParticipantTileView` provided by Dyte's Android UI Kit.
-This custom Android view renders the video of a single participant and automatically handles displaying
-the video or a placeholder when the participant turns their camera on or off.
-
-## Getting Started
-
-Before we begin, let's understand the key components we'll be working with:
-
-- **DyteParticipantTileView**: Renders the video of a single participant
-- **DyteJoinedMeetingParticipant**: Represents a participant who has joined the meeting. The joined list
- in `DyteParticipants` holds objects of this type
-- **DyteSelfParticipant**: Represents the local user
-- **DyteMobileClient**: Provides access to meeting and participant information. Use the `meeting.participants.joined` list
- to retrieve the list of participants who have joined the meeting
-
-## Building the UI
-
-1. **XML Layout**: Define the layout of your video calling screen. Use two `DyteParticipantTileViews`
- to represent the remote participant and the local user.
-
-```xml
-
-
-
-## Wrap-Up
-
-Congratulations! You've successfully built a custom UI to render participant videos using Dyte's Android UI Kit.
-With components like **DyteGridView** and **DyteParticipantTileView**, Dyte's UI Kit simplifies video rendering
-in meetings and offers the flexibility to create dynamic video calling experiences.
-
-### Complete Code
-
-You can find the complete code for this example in Dyte's [Facetime sample repository](https://github.com/dyte-io/android-samples/tree/main/samples/facetime).
-Feel free to explore and try it out!
diff --git a/docs/android/render-participant-videos/using-dytegrid.mdx b/docs/android/render-participant-videos/using-dytegrid.mdx
deleted file mode 100644
index 539f4be62b..0000000000
--- a/docs/android/render-participant-videos/using-dytegrid.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: Using DyteGridView
-sidebar_position: 1
----
-
-The [DyteGridView](/android/components/dyte-grid) is a custom Android View provided by Dyte's Android UI Kit, designed to simplify
-the rendering of participant videos in a meeting. It abstracts the grid handling logic, making it easy to
-display videos in a grid layout.
-
-To render participant videos using `DyteGridView`, follow these steps:
-
-1. **Add DyteGridView to your layout**:
-
-```xml
-
-
-## Building Your Own UI
-
-While DyteGridView provides a convenient way to render participant videos, you may want to customize the UI further.
-In the next section, we will explore how to build your own UI to render participant videos according to your application's specific requirements.
diff --git a/docs/android/sample-app.mdx b/docs/android/sample-app.mdx
deleted file mode 100644
index 1ea027a440..0000000000
--- a/docs/android/sample-app.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
----
-sidebar_position: 11
-description: >-
- Explore and learn from the Android sample app provided in Dyte's
- documentation.
----
-
-# Sample app
-
-You can check out an example of this integration by cloning our
-[Android UI Kit sample app repo](https://github.com/dyte-io/android-samples/tree/main/samples/android-ui-kit-sample-kotlin).
-
-
- | + Security Scheme Type: + | + http + | +
|---|---|
| + HTTP Authorization Scheme: + | + bearer + | +
| + Bearer format: + | + JWT or ospi_ API key + | +
onAudioUpdate callback to DyteSelfEventsListener")
-
- class eam basic;
-```
-
-onVideoUpdate callback to DyteSelfEventsListener")
-
- class eam basic;
-```
-
-
| 
|
diff --git a/docs/flutter/Components/dyte-chat-icon-widget.mdx b/docs/flutter/Components/dyte-chat-icon-widget.mdx
deleted file mode 100644
index 4537809dcd..0000000000
--- a/docs/flutter/Components/dyte-chat-icon-widget.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-# DyteChatIconWidget
-
-A widget for displaying a chat icon in a Dyte-based Flutter application, enabling users to navigate to the chat page.. The icon triggers navigation to the `ChatsPage` upon being pressed and marks all messages as read.
-
-:::info
-
-[`DyteProvider`](./dyte-provider.mdx) needs to be added above `DyteChatIconWidget` which will manage dyte client object for polls screen by itself.
-
-:::
-
-## Usage
-
-Below is an example illustrating the integration of `DyteChatIconWidget` within a Flutter application:
-
-```dart
-DyteChatIconWidget()
-```
-
-## Details
-
-When the `DyteChatIconWidget` is tapped, it performs two primary actions:
-
-1. Marks all chat messages as read.
-2. Navigates the user to the `ChatsPage`.
-
-| Chat Icon | Chat Screen |
-| --------------------------------------------------------------------- | --------------------------------------------------------------- |
-| 
| 
|
diff --git a/docs/flutter/Components/dyte-join-button.mdx b/docs/flutter/Components/dyte-join-button.mdx
deleted file mode 100644
index 8f627e09f6..0000000000
--- a/docs/flutter/Components/dyte-join-button.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-# DyteJoinButton
-
-A button widget specifically designed for joining a Dyte meeting room. This widget encapsulates functionality related to the meeting room joining process, providing visual feedback to the user based on the current state of the joining process.
-
-## Usage
-
-Here is a basic example of how to use the `DyteJoinButton` in your Flutter app:
-
-```dart
-DyteJoinButton(
- dyteMobileClient = yourDyteMobileClientInstance,
- onMeetingJoined = () {
- // Your code to execute after joining the meeting
- },
- height = 50.0,
- width = 200.0,
- isDisabled = false,
-)
-```
-
-## Properties
-
-- `dyteMobileClient`: (**Required**) An instance of `DyteMobileClient` to manage meeting room events.
-- `onMeetingJoined`: (Optional) A callback that gets called when the meeting room is successfully joined.
-- `dyteDesignToken`: (Optional) An instance of `DyteDesignTokens` for customizing the button's appearance according to the Dyte Design System.
-- `height`: (Optional) The height of the button. If not specified, it defaults to the height defined by the button style.
-- `width`: (Optional) The width of the button. If not specified, it defaults to the width defined by the button style.
-- `isDisabled`: (Optional) A boolean that disables the button when set to `true`. Default is `false`.
-
-## Screenshot
-
-
diff --git a/docs/flutter/Components/dyte-leave-button.mdx b/docs/flutter/Components/dyte-leave-button.mdx
deleted file mode 100644
index 9a8d67e7ca..0000000000
--- a/docs/flutter/Components/dyte-leave-button.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-# DyteLeaveButton
-
-A specialized button widget for leaving a Dyte meeting. This widget is designed in accordance with the Dyte UI Kit and facilitates a seamless exit process from a meeting environment.
-
-## Usage
-
-Here is how you can use the `DyteLeaveButton` in your Flutter application:
-
-```dart
-DyteLeaveButton(
- dyteMobileClient: yourDyteMobileClientInstance,
- height: 50.0,
- width: 50.0,
-)
-```
-
-## Properties
-
-- `dyteMobileClient`: (**Required**) An instance of `DyteMobileClient` used to perform the leave meeting operation.
-- `designToken`: (Optional) An instance of `DyteDesignTokens` for customizing the appearance according to the Dyte Design System. If not specified, the widget will default to the global design tokens.
-- `height`: (Optional) The height of the button. If not specified, it defaults to a predefined size based on the design tokens.
-- `width`: (Optional) The width of the button. If not specified, it defaults to a predefined size based on the design tokens.
-
-## Features
-
-- **Customizable Size**: The size of the button can be adjusted using the `height` and `width` properties.
-- **Consistent Styling**: Adheres to the Dyte Design System for visual consistency across the Dyte UI Kit.
-- **Leave Dialog**: Upon pressing the button, a confirmation dialog is displayed to the user to prevent accidental meeting exits.
-
-## Screenshot
-
-
diff --git a/docs/flutter/Components/dyte-leave-meeting-dialog.mdx b/docs/flutter/Components/dyte-leave-meeting-dialog.mdx
deleted file mode 100644
index 4ad73b18ad..0000000000
--- a/docs/flutter/Components/dyte-leave-meeting-dialog.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-# DyteLeaveMeetingDialog
-
-A dialog widget designed for confirming the action of leaving a Dyte meeting. This widget is part of the Dyte UI Kit and is intended to provide a clear and concise user interface for confirming the exit process from a meeting environment.
-
-## Usage
-
-Here is how you can use the `DyteLeaveMeetingDialog` in your Flutter application:
-
-```dart
-DyteLeaveMeetingDialog(
- dyteMobileClient: yourDyteMobileClientInstance,
-)
-```
-
-## Properties
-
-- `dyteMobileClient`: (**Required**) An instance of `DyteMobileClient` used to perform actions like leaving the meeting room or ending the meeting for all participants.
-- `designToken`: (Optional) An instance of `DyteDesignTokens` for customizing the appearance according to the Dyte Design System. If not specified, the widget will default to the global design tokens.
-
-## Design Token
-
-The `DyteLeaveMeetingDialog` utilizes `DyteDesignTokens` for theming:
-
-- `borderRadius`: The border radius of the dialog box, which defaults to a value defined in the design tokens.
-- `fillColor`: The background color of the dialog, typically set to provide a neutral or alerting backdrop for the content.
-- `textColor`: The color of the text within the dialog, ensuring it is readable against the `fillColor`.
-
-## Features
-
-- **Confirmation Prompt**: Provides a clear prompt asking the user if they are sure they want to leave the meeting.
-- **Action Buttons**: Includes "Cancel" and "Leave" buttons, allowing the user to either cancel the action or confirm their intent to leave the meeting.
-- **Host Controls**: If the user has host permissions, an additional button "End meeting for all" is displayed, providing the option to end the meeting for all participants.
-
-## Screenshot
-
-
diff --git a/docs/flutter/Components/dyte-meeting-title.mdx b/docs/flutter/Components/dyte-meeting-title.mdx
deleted file mode 100644
index c861b16528..0000000000
--- a/docs/flutter/Components/dyte-meeting-title.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-# DyteMeetingTitle
-
-A simple, customizable widget designed to display the title of a Dyte meeting. This widget is part of the Dyte UI Kit and integrates seamlessly with Dyte's design system and meeting services.
-
-## Usage
-
-Below is a basic example of how to use the `DyteMeetingTitle` widget in your Flutter app:
-
-```dart
-DyteMeetingTitle(
- dyteMobileClient: yourDyteMobileClientInstance,
-)
-```
-
-## Properties
-
-- `dyteMobileClient`: (**Required**) An instance of `DyteMobileClient`. This is used to fetch and display the current meeting's title.
-- `designToken`: (Optional) An instance of `DyteDesignTokens` for customizing the appearance according to the Dyte Design System. If not specified, the widget will use the global design tokens.
-
-## Screenshot
-
-
diff --git a/docs/flutter/Components/dyte-name-tag-widget.mdx b/docs/flutter/Components/dyte-name-tag-widget.mdx
deleted file mode 100644
index da3300a1fa..0000000000
--- a/docs/flutter/Components/dyte-name-tag-widget.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-# DyteNameTag
-
-A widget with name tag of the participant in participant tile.
-
-## Usage
-
-```dart
-DyteNameTag(
- size: size, // type: double, size of the name tag
- color: widget.textColor, // color: Color, color of the name tag
- participant: widget.participant, // type: DyteMeetingParticipant
-);
-```
-
-## Screenshot
-
-| Name Tag Widget | Meeting Screen |
-| ------------------------------------------------------------- | -------------------------------------------------------------------- |
-| 
| 
|
diff --git a/docs/flutter/Components/dyte-participant-tile.mdx b/docs/flutter/Components/dyte-participant-tile.mdx
deleted file mode 100644
index 8d184ff021..0000000000
--- a/docs/flutter/Components/dyte-participant-tile.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-# DyteParticipantTile
-
-A comprehensive widget designed to display a participant's video or avatar within a Dyte meeting environment. This widget is part of the Dyte UI Kit and is optimized for showing participant information, including live video feed, name, and audio status.
-
-:::info
-
-[`DyteProvider`](./dyte-provider.mdx) needs to be added above `DyteParticipantTile` which will manage dyte client object for polls screen by itself.
-
-:::
-
-## Usage
-
-Below is an example of how to use the `DyteParticipantTile` in your Flutter application:
-
-```dart
-DyteParticipantTile(
- participant,
- designToken: yourDesignToken,
- height: 240,
- width: 180,
-)
-```
-
-## Properties
-
-- `participant`: (**Required**) An instance of `DyteMeetingParticipant`. This represents the participant whose information and video are to be displayed.
-- `designToken`: (Optional) An instance of `DyteDesignTokens` for customizing the appearance according to the Dyte Design System. If not specified, the widget will use the global design tokens.
-- `height`: (Optional) The height of the tile. Default is `240`.
-- `width`: (Optional) The width of the tile. Default is `180`.
-
-## Features
-
-- **Video or Avatar Display**: Automatically displays the participant's video feed if available; otherwise, shows the participant's avatar.
-- **Dynamic Resizing**: Adapts size based on the constraints provided by the parent widget.
-- **Pinned Status**: Indicates if the participant is pinned in the meeting.
-- **Audio Status**: Shows an icon indicating whether the participant's audio is on or off.
-- **Name Tag**: Displays the participant's name and, if applicable, indicates if they are the local user with a "You" tag.
-
-## Screenshot
-
-
diff --git a/docs/flutter/Components/dyte-participants-icon-widget.mdx b/docs/flutter/Components/dyte-participants-icon-widget.mdx
deleted file mode 100644
index 11758b16ec..0000000000
--- a/docs/flutter/Components/dyte-participants-icon-widget.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-# DyteParticipantsIconWidget
-
-This widget is designed to integrate a participants icon within a Dyte-based Flutter application. It facilitates navigation to the `DyteParticipantPage` when pressed, serving as a user interface element for accessing the participants list of a Dyte session.
-
-:::info
-
-[`DyteProvider`](./dyte-provider.mdx) needs to be added above `DyteParticipantsIconWidget` which will manage dyte client object for polls screen by itself.
-
-:::
-
-## Usage
-
-To use the `DyteParticipantsIconWidget` in a Flutter application, instantiate it directly in your widget tree:
-
-```dart
-DyteParticipantsIconWidget()
-```
-
-## Details
-
-Upon interacting with the widget, the following actions occur:
-
-- The application navigates to the `DyteParticipantPage`, which displays the list of participants in the current session.
-
-| Participant Icon | Participant Screen |
-| ---------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
-| 
| 
|
diff --git a/docs/flutter/Components/dyte-plugins-screen.mdx b/docs/flutter/Components/dyte-plugins-screen.mdx
deleted file mode 100644
index 163b556156..0000000000
--- a/docs/flutter/Components/dyte-plugins-screen.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-# DytePluginsScreen
-
-A widget that provides a well-built plugins screen using molecular components. This widget integrates with the Dyte UI Kit and return our plugins page as a widget.
-
-:::info
-
-[`DyteProvider`](./dyte-provider.mdx) needs to be added above `DytePluginsScreen` which will manage dyte client object for polls screen by itself.
-
-:::
-
-## Usage
-
-```dart
-DytePluginsScreen()
-```
diff --git a/docs/flutter/Components/dyte-polls-screen.mdx b/docs/flutter/Components/dyte-polls-screen.mdx
deleted file mode 100644
index 5c43754d15..0000000000
--- a/docs/flutter/Components/dyte-polls-screen.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-# DytePollsScreen
-
-A widget that provides a well-built polls screen using molecular components. This widget integrates with the Dyte UI Kit and return our polls page as a widget.
-
-:::info
-
-[`DyteProvider`](./dyte-provider.mdx) needs to be added above `DytePollsScreen` which will manage dyte client object for polls screen by itself.
-
-:::
-
-## Usage
-
-```dart
-DytePollsScreen();
-```
diff --git a/docs/flutter/Components/dyte-provider.mdx b/docs/flutter/Components/dyte-provider.mdx
deleted file mode 100644
index 612b4666be..0000000000
--- a/docs/flutter/Components/dyte-provider.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
-# DyteProvider
-
-A foundational widget designed to initialize and provide the necessary Dyte environment for a Flutter application. The `DyteProvider` acts as a context wrapper that sets up design tokens, client configurations, and UI Kit information required for Dyte components. It ensures that Dyte functionalities are available and properly initialized throughout the widget tree where it's used.
-
-## Usage
-
-To use `DyteProvider`, wrap the root of your application:
-
-```dart
-DyteProvider(
- client: dyteMobileClientInstance,
- uiKitInfo: dyteUIKitInfoInstance,
- child: MaterialApp(
- // Your app's home screen or an entry widget
- home: YourAppHome(),
- ),
-)
-```
-
-if you don't want to wrap the root of your app inside `DyteProvider`, you can also wrap a specific part of your app where you want to use Dyte components but after adding `DyteProvider` you need a `MaterialApp` widget under it.
-
-This approach ensures that all the necessary Dyte setup is done before your app UI starts, allowing you to utilize Dyte features seamlessly within your application.
-
-## Properties
-
-- `child`: (**Required**) The widget below this widget in the tree. This is usually your MaterialApp or your application's home widget.
-- `client`: (**Required**) An instance of `DyteMobileClient`. This represents the Dyte client configuration that includes authentication and other essential settings.
-- `uiKitInfo`: (**Required**) An instance of `DyteUIKitInfo`. This holds information related to the Dyte UI Kit such as design tokens and other UI configurations.
-
-## Notes
-
-Ensure that the `DyteMobileClient` and `DyteUIKitInfo` are properly configured before passing them to the `DyteProvider`. This is crucial for the proper functioning of all Dyte-related components within your application.
-
-## Example
-
-Here is an example of using `DyteProvider` in an application:
-
-```dart
-class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return DyteProvider(
- client: DyteMobileClient(
- // Dyte client configuration
- ),
- uiKitInfo: DyteUIKitInfo(
- // UI Kit information and design tokens
- ),
- child: MaterialApp(
- home: HomeScreen(),
- ),
- );
- }
-}
-```
-
-By wrapping your app with `DyteProvider`, you ensure that all necessary Dyte setups are initialized and available for your app components, allowing you to build a fully functional Dyte-enabled application.
diff --git a/docs/flutter/Components/dyte-self-audio-toggle.mdx b/docs/flutter/Components/dyte-self-audio-toggle.mdx
deleted file mode 100644
index 3c803f7aec..0000000000
--- a/docs/flutter/Components/dyte-self-audio-toggle.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-# DyteSelfAudioToggleButton
-
-A toggle button widget designed for controlling the audio state in the Dyte video conference environment. This widget integrates with the Dyte UI Kit and allows users to enable or disable their microphone audio during a meeting.
-
-## Usage
-
-Here is a basic example of how to use the `DyteSelfAudioToggleButton` in your Flutter app:
-
-```dart
-DyteSelfAudioToggleButton(
- dyteMobileClient: yourDyteMobileClientInstance,
- onAudioToggle: () {
- // Your code to handle toggle
- },
- iconSize: 24.0,
- iconColor: Colors.blue,
- showLabel: true,
-)
-```
-
-## Properties
-
-- `dyteMobileClient`: (**Required**) An instance of `DyteMobileClient` to manage the audio state and events.
-- `onAudioToggle`: (Optional) A callback that gets called when the audio toggle button is pressed.
-- `iconSize`: (Optional) Size of the icon inside the toggle button. If not specified, the default size is used.
-- `iconColor`: (Optional) Color of the icon inside the toggle button. If not specified, the default color from the design tokens is used.
-- `showLabel`: (Optional) Boolean to show or hide the label next to the icon. Default is `false`.
-
-## Design Token
-
-The widget uses `DyteDesignTokens` for theming, which allows for customization according to the Dyte Design System. The `designToken` can be passed as a parameter or will default to the global design token.
-
-## Screenshot
-
-
diff --git a/docs/flutter/Components/dyte-self-video-toggle.mdx b/docs/flutter/Components/dyte-self-video-toggle.mdx
deleted file mode 100644
index 1f0b7b53d0..0000000000
--- a/docs/flutter/Components/dyte-self-video-toggle.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-# DyteSelfVideoToggleButton
-
-A custom Flutter widget designed for toggling video state in a Dyte video conference environment. This widget is part of the Dyte UI Kit and allows users to enable or disable their video during a meeting.
-
-## Usage
-
-Below is an example of how to integrate the `DyteSelfVideoToggleButton` into your Flutter app:
-
-```dart
-DyteSelfVideoToggleButton(
- dyteMobileClient: yourDyteMobileClientInstance,
- onVideoToggle: () {
- // Code to execute after video toggle
- },
- iconSize: 24.0,
- iconColor: Colors.red,
- showLabel: true,
-)
-```
-
-## Properties
-
-- `dyteMobileClient`: (**Required**) An instance of `DyteMobileClient` to manage video state and events.
-- `onVideoToggle`: (Optional) A callback that is called when the video toggle button is pressed.
-- `iconSize`: (Optional) Size of the icon inside the toggle button. If not specified, a default size is used.
-- `iconColor`: (Optional) Color of the icon inside the toggle button. If not specified, the default color from the design tokens is used.
-- `showLabel`: (Optional) A boolean to show or hide the label next to the icon. Default is `false`.
-- `dyteDesignToken`: (Optional) An instance of `DyteDesignTokens` for customizing the appearance according to the Dyte Design System.
-
-## Design Token
-
-The widget utilizes `DyteDesignTokens` for theming, which allows customization following the Dyte Design System. The `designTokens` can either be passed as a parameter or will default to the global design tokens.
-
-## Screenshot
-
-
diff --git a/docs/flutter/Components/dyte-setup-screen-component.mdx b/docs/flutter/Components/dyte-setup-screen-component.mdx
deleted file mode 100644
index 1ce0a8198f..0000000000
--- a/docs/flutter/Components/dyte-setup-screen-component.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-# DyteSetupScreen
-
-A widget that provides a well-built setup screen using our exportable components itself. This widget integrates with the Dyte UI Kit and gives our setup page as a widget.
-
-:::info
-
-[`DyteProvider`](./dyte-provider.mdx) needs to be added above `DyteSetupScreen` which will manage dyte client object for polls screen by itself.
-
-:::
-
-## Usage
-
-Here is a basic example of how to use the `DyteSetupScreen` in your Flutter app:
-
-```dart
-DyteSetupScreen(
- selectedAudioDevice,
- selectedVideoDevice,
-);
-```
-
-Here, `selectedAudioDevice` and `selectedVideoDevice` can be fetched using `dyteClient.getSelectedAudioDevice()` & `dyteClient.getSelectedVideoDevice()` respectively.
-
-## Screenshot
-
-
diff --git a/docs/flutter/design-token.mdx b/docs/flutter/design-token.mdx
deleted file mode 100644
index e393f2abe0..0000000000
--- a/docs/flutter/design-token.mdx
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: Design System
-description: >-
- Explore design token integration in Flutter with Dyte's documentation. Follow
- our guide for effective design token implementation in your app.
-sidebar_position: 3
-tags:
- - Flutter UI Kit
- - Design System
----
-
-# Design System
-
-A design system is a collection of reusable components, defined by clear standards, that can be assembled together to build any number of applications.
-
-Dyte's UI kit uses the Atomic design principle, which logically organizes screens for various devices, making it a versatile system. Design tokens are used in Dyte's UI Kit to maintain a consistent look across platforms. By combining design tokens and Atomic design principles, Dyte ensures a smooth and adaptable user interface experience on different platforms.
-
-## Design Tokens
-
-Design tokens are the single source of truth to name and store design decisions.They are values that help keep the design consistent and flexible. These values include things like font styles, spacing, colors, borders, and more, allowing you to easily customize the overall look and feel of a system.
-
-In the Flutter UI kit, design tokens are shared and managed using `themes`. Themes in Flutter use the `ThemeData` class to store and propagate design properties, such as colors, fonts, and more, throughout the widget tree.
-
-Let's understand how you can customize your UI with Dyte's Flutter UI Kit using design tokens.
-
-### Customize themes with design tokens
-
-Dyte offers the `DyteDesignToken` class to customize the theme of the UI kit. Pass the `DyteDesignToken` object within the `DyteUIKitInfo` object to customize the theme.
-
-With `DyteDesignToken`, you can customize the following design properties:
-
-- `backgroundColor`:The background color of the UI Kit.
-- `textOnBackground`: The text color on the background of the UI Kit.
-- `backgroundColorSwatch`: The background color swatch of the UI Kit.
-- `brandColor`: The primary color of the UI Kit.
-- `textOnBrand`: The text color on the brand color of the UI Kit.
-- `brandColorSwatch`: The brand color swatch of the UI Kit.
-- `danger`: The danger color of the UI Kit.
-- `success`: The success color of the UI Kit.
-- `warning`: The warning color of the UI Kit.
-
-You have two options to customize the UI Kit's theme:
-
-#### Pass a single color.
-
-You can pass a single color to the `backgroundColor`, `brandColor` parameters. Or you can use a combination of `backgroundColorSwatch` and `brandColor` to customize the theme.
-
-#### Use a color swatch.
-
-For the brand color swatch, make sure it contains 5 entries with keys 300, 400, 500, 600, and 700.
-For the background color swatch, provide 5 entries with keys 600, 700, 800, 900, and 1000.
-
-To achieve this, utilize the `DyteColorSwatch` class with two parameters: the default color key and a map of colors.
-
-```dart
-final primarySwatch = DyteColorSwatch(
- 500,
- {
- 300: Colors.blue.shade300,
- 400: Colors.blue.shade400,
- 500: Colors.blue.shade500,
- 600: Colors.blue.shade600,
- 700: Colors.blue.shade700,
- },
- );
-```
-
-### Customize borders with configuration
-
-To customize the border radius and border width of the UI Kit, you can use the `DyteBorderRadius` and `DyteBorderWidth` enum values in the design token.
-
-Here are the available `DyteBorderRadius` values:
-
-| Token Name | values |
-| ------------------ | ---------------------------------------------- |
-| `DyteBorderRadius` | `sharp`, `rounded`, `extraRounded`, `circular` |
-
-Here are the available `DyteBorderWidth` values:
-
-| Token Name | values |
-| ----------------- | --------------------- |
-| `DyteBorderWidth` | `none`, `thin`, `fat` |
-
-## Example
-
-Here's an example of how you can customize the Flutter UI Kit using the design token:
-
-```dart
-final uikitInfo = DyteUIKitInfo(meetingInfo,
- designToken: DyteDesignToken(
- colorToken: DyteColorToken(
- borderRadius: DyteBorderRadius.circular,
- borderWidth: DyteBorderWidth.fat,
- backgroundColor: Colors.black,
- textOnBrand: Colors.white,
- textOnBackground: Colors.white,
- danger: Colors.red,
- success: Colors.green,
- warning: Colors.yellow,
- brandColorSwatch: DyteColorSwatch(
- 500,
- {
- 300: Colors.blue.shade300,
- 400: Colors.blue.shade400,
- 500: Colors.blue.shade500,
- 600: Colors.blue.shade600,
- 700: Colors.blue.shade700,
- },
- )),
- ));
-```
-
-
| Allows you to create breakout rooms, assign participants, start and close the breakout rooms, switch between breakout rooms. |
-
-### Participants
-
-| **Switch Connected Meetings** | **Permission** |
-| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| 
| Allows you to create breakout rooms, assign participants, start and close the breakout rooms, switch between breakout rooms. |
-
-| **Switch to Parent Meeting** | **Permission** |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| 
| Allows you to switch to the main meeting. |
-
-You can choose to provide **Switch Connected Meetings** and **Switch to Parent Meeting** permissions both to the participants.
-
-## Step 3: Save the Preset Changes
-
-1. Once you've made all the changes that you need to add to your preset, click **Save** at the right-corner.
-2. Enter the name for your preset and click **Save**.
-3. Your preset is listed. Click **Edit** to make any changes to the preset.
-
-## Step 4: Create a Meeting
-
-Create a Dyte meeting using the [Create Meeting API](/api#/operations/create_meeting). This API returns a unique identifier for your meeting.
-
-## Step 5: Add Participants
-
-After you've created the meeting, add each participant to the meeting using the [Add Participant API](/api#/operations/add_participant).
-The `presetName` created earlier must be passed in the body of the Add Participant API request.
-
-## Step 6: Start Breakout Room
-
-1. In your Dyte meeting, click **Breakout Rooms**.
-
-
-
-2. In the **Create Breakout**, add the number of rooms you want and click **Create**.
-
-
-
-Once you've created a breakout room, assign participants to the breakout rooms. You have the option to either individually select the participants and add them to the room manually or allow Dyte to split your participants evenly across the rooms.
-
-### Assign participants automatically
-
-To assign participants automatically, do the following:
-
-1. In the **Assign Participants**, click the shuffle button.
-
-
-
-2. Participants are assigned to the rooms.
-
-
-
-3. You can also edit the room names. To edit the room name, click the pencil icon beside the room name.
-
-
-
-4. You can also choose to move the participants to different rooms.
-
-5. Once you've made all the changes, click **Start Breakout**.
-
-6. Click **Yes, start** in the **Start breakout rooms** pop-up. You will enter the breakout room.
-
-### Assign participants manually
-
-You can select which participants you would like in each room. To assign participants manually, do the following:
-
-1. In the **Assign Participants**, select the participant/s that you want to assign to a room.
-
-
-
-2. In the **Rooms**, click **Assign**.
-
-3. Once you've assigned all the participants to the rooms of your choice, click **Start Breakout**.
-
-4. Click **Yes, start** in the **Start breakout rooms** pop-up. You will enter the breakout room.
-
-
-