diff --git a/docs/ios/Pre-Built-Plugins_Guides/Plugins.mdx b/docs/ios/Pre-Built-Plugins_Guides/Plugins.mdx
new file mode 100644
index 0000000000..ec0ac72c53
--- /dev/null
+++ b/docs/ios/Pre-Built-Plugins_Guides/Plugins.mdx
@@ -0,0 +1,36 @@
+---
+description: >-
+ Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit
+ with our detailed documentation.
+---
+
+# Pre-built Plugin screen
+## Overview: How to use existing plugins screen.
+We have to use a class [DytePluginViewController](/ios/components/dyte-plugins), which is used to show exising list of plugins
+supported in current meeting.
+Screen is build with [UITableView](https://developer.apple.com/documentation/uikit/uitableview).
+
+
+```swift
+ private func showPluginScreen() {
+ let controller = DytePluginViewController(plugins: meeting.plugins.all)
+ let navigationController = UINavigationController(rootViewController: controller)
+ navigationController.modalPresentationStyle = .fullScreen
+ presentingViewController.present(navigationController,
+ animated: false,
+ completion: nil)
+}
+```
+We can use above code to launch list of plugin screen inside app.
+
+
+
+Every Cell of UITableView we are showing a plugin with activate/deactivate icon on the extreme right.
+
+For example Plugin name "Rustpad v2" in 3rd cell is showing a cross icon to deactivate plugin and every other cell is showing icon
+to activate plugin.
+
+
+
+ iOS DyteAvatarView
+
diff --git a/docs/ios/Pre-Built-Plugins_Guides/_category_.json b/docs/ios/Pre-Built-Plugins_Guides/_category_.json
new file mode 100644
index 0000000000..5772922e2f
--- /dev/null
+++ b/docs/ios/Pre-Built-Plugins_Guides/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 8,
+ "label": "Plugins",
+ "collapsible": true
+}
diff --git a/docs/ios/Pre-Built-Plugins_Guides/load-plugin.mdx b/docs/ios/Pre-Built-Plugins_Guides/load-plugin.mdx
new file mode 100644
index 0000000000..5e7f44a144
--- /dev/null
+++ b/docs/ios/Pre-Built-Plugins_Guides/load-plugin.mdx
@@ -0,0 +1,53 @@
+---
+description: >-
+ Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit
+ with our detailed documentation.
+---
+
+
+# Load Plugins
+## Overview: How to display plugins inside plugins view.
+To display individual plugin inside App. We will be using component [DytePluginsView](/ios/components/dyte-plugin-view)
+
+### Creating plugin view
+
+```swift
+ let viewModel = VideoPeerViewModel(mobileClient: meeting,
+ participant: meeting.localUser,
+ showSelfPreviewVideo: false,
+ showScreenShareVideoView: true)
+ let pluginView = DytePluginsView(videoPeerViewModel:viewModel)
+ self.view.addSubview(pluginView)
+```
+Use above code to create instance of DytePluginsView and add this view to any view of your choice.
+
+#### Loading pluginView with plugins
+
+You can get the list of active plugins with the help of below API
+
+```swift
+let plugins: [DytePlugin] = self.dyteMobileClient.plugins.active
+let arrButtons = [DytePluginScreenShareTabButton]()
+
+for plugin in plugins {
+ let button = DytePluginScreenShareTabButton(image: plugin.picture, title: plugin.name, id: plugin.id)
+ arrButtons.append(button)
+}
+```
+To show `arrButtons` created from above code on the [DytePluginsView](/ios/components/dyte-plugin-view), We will be using
+below API.
+
+```swift
+self.pluginView.setButtons(buttons: arrButtons, selectedIndex: 0) { [weak self] button, pluginIsClicked in
+ guard let self = self else {return}
+ // We are having plugin button tapped by the user.
+ // So to load this plugin inside PluginsView we need to call this API.
+ self.pluginView.show(pluginView: button.plugin.getPluginView())
+}
+
+```
+
+
+
+ iOS DyteAvatarView
+
diff --git a/docs/ios/Pre-Built-Polls_Guides/Polls.mdx b/docs/ios/Pre-Built-Polls_Guides/Polls.mdx
new file mode 100644
index 0000000000..d30ff74097
--- /dev/null
+++ b/docs/ios/Pre-Built-Polls_Guides/Polls.mdx
@@ -0,0 +1,29 @@
+---
+description: >-
+ Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit
+ with our detailed documentation.
+---
+
+# Pre-built create poll Scren
+## Overview: How to use existing create polls screen.
+We have to use a class [DyteCreatePollsViewController](/ios/components/dyte-poll-form), which is used to create polls for the participant.
+
+
+
+When user press the create poll button, use below code
+```swift
+@objc func createPollClick(button: DyteButton) {
+ let controller = DyteCreatePollsViewController(dyteMobileClient: dyteMobileClient) { [weak self] result in
+ guard let self = self else {return}
+ self.controller?.view.removeFromSuperview()
+ self.controller = nil
+ }
+ controller.view.backgroundColor = self.view.backgroundColor
+ self.view.addSubview(controller.view)
+ self.creatPollController = controller
+}
+```
+
+
+ iOS DyteAvatarView
+
diff --git a/docs/ios/Pre-Built-Polls_Guides/_category_.json b/docs/ios/Pre-Built-Polls_Guides/_category_.json
new file mode 100644
index 0000000000..634d8c5d64
--- /dev/null
+++ b/docs/ios/Pre-Built-Polls_Guides/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 11,
+ "label": "Polls",
+ "collapsible": true
+}
diff --git a/docs/ios/Pre-Built-Polls_Guides/prebuilt_polls.mdx b/docs/ios/Pre-Built-Polls_Guides/prebuilt_polls.mdx
new file mode 100644
index 0000000000..3d484d91ee
--- /dev/null
+++ b/docs/ios/Pre-Built-Polls_Guides/prebuilt_polls.mdx
@@ -0,0 +1,25 @@
+---
+description: >-
+ Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit
+ with our detailed documentation.
+---
+
+# Pre-built Polls Screen
+## Overview: How to use existing polls screen.
+We have to use a class [DyteShowPollsViewController](/ios/components/dyte-polls), which is used to show exising list of polls
+created by participants in current meeting. With a button at the bottom to create polls.
+
+
+
+### To launch this screen we have to use below API.
+
+```swift
+func launchPollsScreen() {
+ let controller = DyteShowPollsViewController(meeting: self.meeting)
+ self.presentingViewController.present(controller, animated: true)
+}
+```
+
+
+ iOS DyteAvatarView
+
diff --git a/docs/ios/Pre-Built-Settings_Guides/Settings.mdx b/docs/ios/Pre-Built-Settings_Guides/Settings.mdx
new file mode 100644
index 0000000000..f3a39d935f
--- /dev/null
+++ b/docs/ios/Pre-Built-Settings_Guides/Settings.mdx
@@ -0,0 +1,37 @@
+---
+description: >-
+ Learn how to use and customize the DyteAvatarView component in Dyte's iOS UiKit
+ with our detailed documentation.
+---
+
+# Pre-built Settings screen
+
+## Overview: How to use existing Settings screen.
+
+We have to use a class [DyteSettingViewController](/ios/components/dyte-settings), which is used to select Audio device and Camera device
+from the list of available devices.
+
+
+
+### Launch prebuilt setting screen
+
+```swift
+private func launchSettingScreen() {
+ let controller = DyteSettingViewController(nameTag: self.meeting.localUser.name,
+ meeting: self.meeting,
+ completion: {})
+ controller.modalPresentationStyle = .fullScreen
+ self.present(controller, animated: true)
+}
+```
+
+`completion` param is a clouser of type `(()->Void)? = nil`
+
+
+ iOS DyteAvatarView
+
diff --git a/docs/ios/Pre-Built-Settings_Guides/_category_.json b/docs/ios/Pre-Built-Settings_Guides/_category_.json
new file mode 100644
index 0000000000..fdc3a9779c
--- /dev/null
+++ b/docs/ios/Pre-Built-Settings_Guides/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 7,
+ "label": "Settings",
+ "collapsible": true
+}
diff --git a/docs/ios/build-pre-call-ui/_category_.json b/docs/ios/build-pre-call-ui/_category_.json
new file mode 100644
index 0000000000..ff59d70cc0
--- /dev/null
+++ b/docs/ios/build-pre-call-ui/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 5,
+ "label": "Pre-call preview UI",
+ "collapsible": true
+}
diff --git a/docs/ios/build-pre-call-ui/build-your-own/_category_.json b/docs/ios/build-pre-call-ui/build-your-own/_category_.json
new file mode 100644
index 0000000000..ec59ec7c2d
--- /dev/null
+++ b/docs/ios/build-pre-call-ui/build-your-own/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 5,
+ "label": "Build your own",
+ "collapsible": true
+}
diff --git a/docs/ios/build-pre-call-ui/build-your-own/dyte-setting.mdx b/docs/ios/build-pre-call-ui/build-your-own/dyte-setting.mdx
new file mode 100644
index 0000000000..90b88af729
--- /dev/null
+++ b/docs/ios/build-pre-call-ui/build-your-own/dyte-setting.mdx
@@ -0,0 +1,51 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-settings.svg
+sidebar_position: 2
+description: >-
+ Learn how to use and customize the DyteSettingViewController component in Dyte's
+ iOS UiKit with our detailed documentation.
+---
+
+# Setting Screen
+
+## Overview
+
+A screen that is used to show settings to switch between different audio/video devices.
+
+### Create DyteSettingViewController
+
+```swift
+init(nameTag: String, meeting: DyteMobileClient, completion:(()->Void)? = nil)
+```
+
+Creates settings screen with name tag.
+
+#### Parameters:
+
+_Required:_
+**nameTag:** An String representing participant name.
+**meeting:** Default meeting object
+_Optional:_
+**completion:** Closure to get a callback when user presses back button present on [DyteNavigationBar](/ios/components/dyte-navigationbar)
+
+### Hide/Show top bar
+
+```swift
+var shouldShowTopBar: Bool = true
+```
+
+Default value is `true`. To hide the topbar assign this to `false`.
+
+### To show DyteSettingViewController do in iOS as follows:
+
+```swift
+let controller = DyteSettingViewController(nameTag: participant.name,
+ meeting: mobileClient)
+controller.view.backgroundColor = self.view.backgroundColor
+controller.modalPresentationStyle = .fullScreen
+self.present(controller, animated: true)
+```
+
+
+ iOS DyteSettingViewController
+
diff --git a/docs/ios/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx b/docs/ios/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx
new file mode 100644
index 0000000000..344ca5dc60
--- /dev/null
+++ b/docs/ios/build-pre-call-ui/build-your-own/initial-code-skeleton.mdx
@@ -0,0 +1,73 @@
+---
+title: Basic structure
+sidebar_position: 1
+---
+
+## What are we building?
+
+We are deconstructing the default setup screen.
+
+At the end of this group of docs, we should have the following screen built using low level components.
+
+![meeting UI screenshot with labeled parts](/static/ios/meeting-setup.png)
+
+Let's put a basic skeleton and the initial boilerplate code.
+
+Barebone ui needed to redner for name textField and a button to join the meeting will look as follow:
+
+```swift
+let joinButton = DyteJoinButton(meeting: self.mobileClient) { [weak self] button, success in
+ guard let self = self else {return}
+ if success {
+ self.delegate?.userJoinedMeetingSuccessfully(sender: self)
+ }
+ }
+
+let textFieldBottom: DyteTextField = {
+ let textField = DyteTextField()
+ textField.setPlaceHolder(text: "Insert your name")
+ return textField
+ }()
+```
+
+Now inside your `setup screen` you'll need to set name for user
+
+```swift
+public override func viewDidLoad() {
+ super.viewDidLoad()
+ textFieldBottom.text = self.meeting.localUser.name
+}
+```
+
+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.
+
+
+
+Observe and change textField on text changes
+
+```swift
+
+func setupTextField() {
+ textFieldBottom.addTarget(self, action: #selector(textFieldEditingDidChange), for: .editingChanged)
+ textFieldBottom.delegate = self
+}
+
+@objc func textFieldEditingDidChange(_ sender: Any) {
+ if !((textFieldBottom.text?.trimmingCharacters(in: .whitespaces).isEmpty) ?? false) {
+ if let text = textFieldBottom.text {
+ self.meeting.localUser.name = text
+ }
+ }
+}
+
+```
+
+`meeting.localUser.name = text` sets the new name for the participant.
+
+At the end, we let user join the meeting using `meeting.joinRoom()`.
diff --git a/docs/ios/build-pre-call-ui/default-setup-screen.mdx b/docs/ios/build-pre-call-ui/default-setup-screen.mdx
new file mode 100644
index 0000000000..05c9469c03
--- /dev/null
+++ b/docs/ios/build-pre-call-ui/default-setup-screen.mdx
@@ -0,0 +1,55 @@
+---
+title: DyteSetupScreen
+sidebar_position: 4
+---
+
+Dyte provides a default pre-call preview UI, also known as setup screen as part of our UI components.
+
+# SetupViewController
+
+## Overview
+
+A screen shown before joining the meeting, where you can edit your display name,
+and media settings. This screen initialize the meeting and on successfull initialization
+it shows a join button to join meeting.
+
+## Topics:
+
+### Create SetupViewController
+
+```swift
+ init(meetingInfo: DyteMeetingInfoV2, mobileClient: DyteMobileClient, completion:@escaping()->Void)
+
+```
+
+Creates setup screen with the configuration object of type `DyteMeetingInfoV2`
+
+#### Parameters:
+
+Required:
+meetingInfo: An instance of type `DyteMeetingInfoV2`
+meeting: Default meeting object
+completion: escaping closure to get a callback when Meetings ends up. For eg. When user leaved the meeting then
+you want to present the starting screen.
+
+```swift
+let controller = SetupViewController(meetingInfo: dyteMeetingInfo,
+ meeting: metting) { [weak self] in
+ guard let self = self else {return}
+ self.dismiss(animated: true)
+ self.view.hideActivityIndicator()
+}
+controller.modalPresentationStyle = .fullScreen
+self.present(controller, animated: true)
+
+```
+
+### Customising flow of SetupViewController using protocol
+
+[SetupViewControllerDelegate](/ios/components/dyte-setup-screen-delegate)
+
+```swift
+ weak var delegate: SetupViewControllerDelegate?
+```
+
+The delegate of the [SetupViewController](/ios/components/dyte-setup-screen) object.
diff --git a/docs/ios/chat/_category_.json b/docs/ios/chat/_category_.json
new file mode 100644
index 0000000000..fce8ca11dd
--- /dev/null
+++ b/docs/ios/chat/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 7,
+ "label": "Chat",
+ "collapsible": true
+}
diff --git a/docs/ios/chat/attachments-in-chat.mdx b/docs/ios/chat/attachments-in-chat.mdx
new file mode 100644
index 0000000000..b3805c6b70
--- /dev/null
+++ b/docs/ios/chat/attachments-in-chat.mdx
@@ -0,0 +1,46 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-chat.svg
+sidebar_position: 3
+description: >-
+ Learn how to use and customize the CustomChatViewController component in Dyte's iOS UiKit with
+ send file and image documentation.
+---
+
+# Attachments in Chat
+
+## Overview
+
+A custom chat view controller used to show chat screen with image & file upload.
+
+### Topics:
+
+Add selectors to file and image button, on tap of file and image buttons
+we can open respective pickers like follows:
+
+```swift
+ @objc func addFileButtonTapped() {
+ var filePicker: UIDocumentPickerViewController
+ if #available(iOS 14.0, *) {
+ filePicker = UIDocumentPickerViewController(forOpeningContentTypes: [.pdf, .text, .plainText, .audio, .video, .movie, .image, .livePhoto], asCopy: false)
+ } else {
+ filePicker = UIDocumentPickerViewController(documentTypes: [], in: .import)
+ }
+ messageTextView.resignFirstResponder()
+ filePicker.delegate = self
+ present(filePicker, animated: true, completion: nil)
+}
+
+@objc func addImageButtonTapped() {
+ messageTextView.resignFirstResponder()
+ imagePicker.delegate = self
+ imagePicker.sourceType = .photoLibrary
+ present(imagePicker, animated: true, completion: nil)
+}
+```
+
+Implement delegates of pickerViews and once you have path to image/file this can be sent using
+`meeting.chat.sendFileMessage(filePath: selectedFileURL.path)`
+
+
+ iOS CustomChatViewController
+
diff --git a/docs/ios/chat/components-in-chat.mdx b/docs/ios/chat/components-in-chat.mdx
new file mode 100644
index 0000000000..73661d34eb
--- /dev/null
+++ b/docs/ios/chat/components-in-chat.mdx
@@ -0,0 +1,129 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-chat.svg
+sidebar_position: 2
+description: >-
+ Learn how to use and customize the CustomChatViewController component in Dyte's iOS UiKit with
+ our detailed documentation.
+---
+
+# Chat Components
+
+## Overview
+
+A custom chat view controller used to show chat screen with image & file upload.
+
+### Topics:
+
+Listen to chat message updates using `meeting.addChatEventsListener(chatEventsListener: self)` & get callbacks:
+
+```swift
+extension ChatViewController: DyteChatEventsListener {
+ public func onNewChatMessage(message: DyteChatMessage) {
+ //This can be used to show local notifications
+ }
+
+ public func onChatUpdates(messages: [DyteChatMessage]) {
+ loadChatMessages()
+ }
+}
+```
+
+Creating a custom chat screen, you need following things:
+
+```swift
+var messages: [DyteChatMessage]?
+let messageTableView = UITableView()
+let sendFileButton = DyteButton(style: .iconOnly(icon: DyteImage(image: sendFileImageIcon)), dyteButtonState: .focus)
+let sendImageButton = DyteButton(style: .iconOnly(icon: DyteImage(image: sendImageIcon)), dyteButtonState: .active)
+let sendMessageButton = DyteButton(style: .iconOnly(icon: DyteImage(image: sendMessageIcon)), dyteButtonState: .active)
+var documentsViewController: DocumentsViewController?
+let imagePicker = UIImagePickerController()
+let messageTextView = UITextView()
+```
+
+`CustomChatViewController` will have a tableView and at bottom buttons to select image/file and button to send message
+Load messages & scroll to bottom to show latest message:
+
+```swift
+private func loadChatMessages() {
+ self.messages = self.meeting.chat.messages
+ if messages.count > 0 {
+ messageTableView.reloadData(completion: {
+ DispatchQueue.main.async { [weak self] in
+ let indexPath = IndexPath(row: (self?.messages?.count ?? 1)-1, section: 0)
+ self?.messageTableView.scrollToRow(at: indexPath, at: .bottom, animated: true)
+ }
+ })
+ }
+}
+```
+
+Send text message, if it is correct and empty `textView` once done:
+
+```swift
+@objc func sendButtonTapped() {
+ if !messageTextView.text.isEmpty {
+ let spacing = CharacterSet.whitespacesAndNewlines
+ let message = messageTextView.text.trimmingCharacters(in: spacing)
+ try?meeting.chat.sendTextMessage(message: message)
+ messageTextView.text = ""
+ }
+}
+```
+
+Few helper functions:
+
+```swift
+
+public extension UITableView {
+
+ func reloadData(completion: @escaping () -> ()) {
+ UIView.animate(withDuration: 0, animations: {
+ self.reloadData()
+ }, completion: { _ in
+ completion()
+ })
+ }
+
+ func scrollToFirstCell() {
+ if numberOfSections > 0 {
+ if numberOfRows(inSection: 0) > 0 {
+ scrollToRow(at: IndexPath(row: 0, section: 0), at: .top, animated: true)
+ }
+ }
+ }
+
+ func scrollToLastCell(animated: Bool) {
+ if numberOfSections > 0 {
+ let nRows = numberOfRows(inSection: numberOfSections - 1)
+ if nRows > 0 {
+ scrollToRow(at: IndexPath(row: nRows - 1, section: numberOfSections - 1), at: .bottom, animated: animated)
+ }
+ }
+ }
+
+ func stopScrolling() {
+
+ guard isDragging else {
+ return
+ }
+
+ var offset = self.contentOffset
+ offset.y -= 1.0
+ setContentOffset(offset, animated: false)
+
+ offset.y += 1.0
+ setContentOffset(offset, animated: false)
+ }
+
+ func scrolledToBottom() -> Bool {
+ return contentOffset.y >= (contentSize.height - bounds.size.height)
+ }
+}
+```
+
+`DyteChatMessage` can be of type `DyteTextMessage`, `DyteFileMessage` or `DyteImageMessage`.
+
+
+ iOS CustomChatViewController
+
diff --git a/docs/ios/chat/pre-built-chat-screen.mdx b/docs/ios/chat/pre-built-chat-screen.mdx
new file mode 100644
index 0000000000..33d68c02d7
--- /dev/null
+++ b/docs/ios/chat/pre-built-chat-screen.mdx
@@ -0,0 +1,64 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-chat.svg
+sidebar_position: 1
+description: >-
+ Learn how to use and customize the DyteChatViewController component in Dyte's iOS UiKit with
+ our detailed documentation.
+---
+
+# Pre-built 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 iOS UiKit 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
+
+### Topics:
+
+Creating a chat screen.
+
+```swift
+ let chatView = ChatViewController(dyteMobileClient: self.meeting)
+```
+
+Add this `chatView` to your View hierarchy. In case you need to add this to a `ViewController` you can
+add it inside a view of sub `ViewController`, following example shows how to show chat screen on tap of button.
+
+```swift
+private var splitContentViewController: UIViewController?
+private let splitContentBaseView = UIView()
+
+func chatClick(button: DyteControlBarButton) {
+ if button.isSelected {
+ let controller = ChatViewController(dyteMobileClient: self.meeting)
+ self.splitContentBaseView.addSubview(controller.view)
+ controller.view.set(.fillSuperView(self.splitContentBaseView))
+ self.splitContentViewController = controller
+ }
+}
+```
+
+#### Parameters:
+
+meeting: Current ongoing meeting object.
+
+
+ iOS DyteChatViewController
+
diff --git a/docs/ios/components/_category_.json b/docs/ios/components/_category_.json
index 674879114a..6c81c57fdb 100644
--- a/docs/ios/components/_category_.json
+++ b/docs/ios/components/_category_.json
@@ -1,5 +1,5 @@
{
- "position": 5,
+ "position": 11,
"label": "Components",
"collapsible": true
}
diff --git a/docs/ios/components/dyte-active-tab-selector-view.mdx b/docs/ios/components/dyte-active-tab-selector-view.mdx
new file mode 100644
index 0000000000..f96ae4ec49
--- /dev/null
+++ b/docs/ios/components/dyte-active-tab-selector-view.mdx
@@ -0,0 +1,41 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-plugins.svg
+description: >-
+ Learn how to use and customize the DytePluginViewController component in Dyte's
+ iOS UiKit with our detailed documentation.
+---
+
+# DyteActiveTabSelectorView
+## Overview
+A view which show list of button of Type [DytePluginScreenShareTabButton](/ios/components/dyte-pluginScreenShareTab-button) shown
+ horizontally.
+
+
+
+
+```swift
+var buttons: [DytePluginScreenShareTabButton]
+```
+Array of buttons of Type [DytePluginScreenShareTabButton](/ios/components/dyte-pluginScreenShareTab-button) which are shown inside this list.
+
+
+```swift
+func scrollToVisible(button: DytePluginScreenShareTabButton)
+```
+When there are buttons more than width of this view, Then use this method to scroll to button.
+#### Parameters:
+**button:** button which should must be present inside `var buttons: [DytePluginScreenShareTabButton]`
+
+
+```swift
+func setAndDisplayButtons(_ buttons: [DytePluginScreenShareTabButton])
+```
+This method is used to update buttons on this view. Setting buttons will reset buttons on this view.
+#### Parameters:
+**buttons:** Array of [DytePluginScreenShareTabButton](/ios/components/dyte-pluginScreenShareTab-button)
+ to be shown on `DyteActiveTabSelectorView`
+
+
+
+ iOS DytePluginViewController
+
diff --git a/docs/ios/components/dyte-avatar.mdx b/docs/ios/components/dyte-avatar.mdx
index 935b617e41..8860d377b4 100644
--- a/docs/ios/components/dyte-avatar.mdx
+++ b/docs/ios/components/dyte-avatar.mdx
@@ -5,20 +5,41 @@ description: >-
---
# DyteAvatarView
+## Overview
-Avatar component which renders a participant's image or their initials.
+View which renders a participant's image or their initials. If image is present then name initials are not
+shown vice versa.
+
+### Topics:
+
+### Creating a Avatar view for the participant passed.
```swift
-DyteAvatarView(participant: dyteMeetingParticipant)
+init(participant: DyteMeetingParticipant)
```
+Creates DyteAvatarView for the participant object you passed.
+
+#### Parameters:
+**participant:** Participant object for which you want to show image/name initials.
+
+
+### Explicit update the participant object for this view to show.
+
+```swift
+func set(participant: DyteMeetingParticipant)
+```
+Update Avatar view with recent participant object.
+#### Parameters:
+**participant:** Participant object for which you want to show image/name initials.
+
-And to setup DyteAvatarView inside your iOS code use as follow:
+### Refreshing DyteAvatarView with latest values.
```swift
-val dyteAvatarView = DyteAvatarView(participant: dyteMeetingParticipant)
-self.dyteAvatarView.set(participant: dyteMeetingParticipant)
-self.dyteAvatarView.refresh()
+func refresh()
```
+Call this method to refresh the view.
+For example if someone update the participant name. Then call this to show latest values.
iOS DyteAvatarView
diff --git a/docs/ios/components/dyte-button.mdx b/docs/ios/components/dyte-button.mdx
index 474f40b595..2843d9e45b 100644
--- a/docs/ios/components/dyte-button.mdx
+++ b/docs/ios/components/dyte-button.mdx
@@ -6,21 +6,73 @@ description: >-
---
# DyteButton
-
+## Overview
A button that follows Dyte's Design System.
+### Topics:
+
+### Creating a button.
+
+```swift
+public init(style: Style = .solid, dyteButtonState: States = .active, size: Size = .large, appearance: DyteButtonAppearance = DyteButtonAppearanceModel())
+```
+Creates DyteButton for the **Style** **States** **Size** you passed.
+
+#### Parameters:
+*Optional*
+**style:** passed any type of Style. Default value of style is `solid`.
+**dyteButtonState:** passed any type of States. Default value of states is `active`.
+**size:** passed any type of Size. Default value of size is `large`.
+**appearance:** Any type which conforms to protocol `DyteButtonAppearance`
+
+### Style
+```swift
+public enum Style {
+ case solid
+ case line
+ case iconLeftLable(icon: DyteImage)
+ case iconRightLable(icon: DyteImage)
+ case text
+ case textIconLeft(icon: DyteImage)
+ case textIconRight(icon: DyteImage)
+ case iconOnly(icon: DyteImage)
+ case splitButton
+}
+```
+
+### States
+```swift
+public enum States
+{
+ case active
+ case disabled
+ case hover
+ case focus
+ case pressed
+}
+```
+
+### Size
+```swift
+public enum Size {
+ case small
+ case medium
+ case large
+}
+```
+For example we can use DyteButton as follows
```swift
let dyteImage = DyteImage(image:ImageProvider.image(named: "icon_down_arrow"))
let downloadButton: DyteButton = {
- let button = DyteButton(style: .iconOnly(icon: dyteImage),
- dyteButtonState: .active)
- button.backgroundColor = dyteSharedTokenColor.background.shade800
- button.isUserInteractionEnabled = false
- button.tintColor = .white
- // Set additional button properties if needed
- button.selectedStateTintColor = DesignLibrary.shared.color.status.danger
- return button
- }()
+ let button = DyteButton(style: .iconOnly(icon: dyteImage),
+ dyteButtonState: .active)
+ button.backgroundColor = dyteSharedTokenColor.background.shade800
+ button.isUserInteractionEnabled = false
+ button.tintColor = .white
+ // Set additional button properties if needed
+ button.selectedStateTintColor = DesignLibrary.shared.color.status.danger
+ return button
+}()
```
diff --git a/docs/ios/components/dyte-camera-toggle.mdx b/docs/ios/components/dyte-camera-toggle.mdx
index f8b91bd139..a13a3419d7 100644
--- a/docs/ios/components/dyte-camera-toggle.mdx
+++ b/docs/ios/components/dyte-camera-toggle.mdx
@@ -5,13 +5,26 @@ description: >-
---
# DyteSwitchCameraButtonControlBar
+## Overview
+This button is use to implement the action for toggling the Camera from front to back and vice-versa.
-A button which toggles your camera.
+### Topics:
+
+### Creating a Camera toggles button.
+
+```swift
+ init(meeting: DyteMobileClient)
+```
+#### Parameters:
+**meeting:** Current ongoing meeting object.
+
+
+### Override the onClick action.
```swift
-let cameraSwitchButton = DyteSwitchCameraButtonControlBar(mobileClient: meeting)
-cameraSwitchButton.backgroundColor = self.backgroundColor
+func onClick(button: DyteControlBarButton)
```
+You can override this method inside the subclass of `DyteSwitchCameraButtonControlBar` to customize the functionality when user presses this button.
iOS DyteCameraToggle
diff --git a/docs/ios/components/dyte-chat.mdx b/docs/ios/components/dyte-chat.mdx
index 56f64122b9..143cd88f67 100644
--- a/docs/ios/components/dyte-chat.mdx
+++ b/docs/ios/components/dyte-chat.mdx
@@ -1,18 +1,26 @@
---
image: /static/ui-kit/1.x.x/components/dyte-chat.svg
description: >-
- Learn how to use and customize the ChatViewController component in Dyte's iOS UiKit with
+ Learn how to use and customize the DyteChatViewController component in Dyte's iOS UiKit with
our detailed documentation.
---
-# ChatViewController
+# DyteChatViewController
+## Overview
+A view controller used to show chat screen with image & file upload and auto-scroll functionality.
-Fully featured chat screen with image & file upload and auto-scroll.
+
+### Topics:
+
+### Creating a chat screen.
```swift
-let controller = ChatViewController(dyteMobileClient: self.meeting)
+ init(meeting: DyteMobileClient)
```
+#### Parameters:
+**meeting:** Current ongoing meeting object.
+
- iOS ChatViewController
+ iOS DyteChatViewController
diff --git a/docs/ios/components/dyte-clock.mdx b/docs/ios/components/dyte-clock.mdx
index 40eff4cdb9..7a4b330618 100644
--- a/docs/ios/components/dyte-clock.mdx
+++ b/docs/ios/components/dyte-clock.mdx
@@ -5,14 +5,34 @@ description: >-
with our detailed documentation.
---
+
+
# DyteClockView
+## Overview
+This view is used to show elapsed time for the meeting in the format Hours:Minute:Seconds.
+
+
+### Topics:
+
+### Creating a clock view
+
+```swift
+ init(meeting: DyteMobileClient, appearance: DyteTextAppearance = AppTheme.shared.clockViewAppearance)
+```
+Creates a DyteClockView for meeting passed.
+
+#### Parameters:
+*Required*
+**meeting:** Current ongoing meeting object.
+*Optional*
+**appearance:** Any type which conforms to protocol "DyteTextAppearance"
```swift
private lazy var clockView: DyteClockView = {
- let label = DyteClockView(meeting: self.meeting)
- label.textAlignment = .left
- return label
- }()
+ let label = DyteClockView(meeting: self.meeting)
+ label.textAlignment = .left
+ return label
+}()
```
diff --git a/docs/ios/components/dyte-configure-alertview-protocol.mdx b/docs/ios/components/dyte-configure-alertview-protocol.mdx
new file mode 100644
index 0000000000..b7fe90d3bb
--- /dev/null
+++ b/docs/ios/components/dyte-configure-alertview-protocol.mdx
@@ -0,0 +1,64 @@
+---
+description: >-
+ Learn how to use and customize the ConfigureWebinerAlertView component in Dyte's iOS UiKit
+ with our detailed documentation.
+---
+
+# ConfigureWebinerAlertView
+## Overview
+Methods and properties for managing Webinar AlertView. This will create an alert which will tells user about their
+Audio and Video status before joining the webinar stage.
+
+## Topics:
+
+### Creating an alertview
+
+```swift
+ init(meeting: DyteMobileClient, participant: DyteJoinedMeetingParticipant) {
+```
+#### Parameters:
+Required:
+meeting: Current ongoing meeting object.
+participant: Participant to join stage.
+
+### Show AlertView to user
+
+```swift
+func show(on view: UIView)
+```
+#### Parameters:
+Required:
+view: Parent View on which this alertView will be shown
+
+### Button with functionality to join stage
+
+```swift
+var confirmAndJoinButton: DyteButton {get}
+```
+Define it as follows
+
+```swift
+public let confirmAndJoinButton: DyteButton = {
+ let button = DyteUIUTility.createButton(text: "Confirm & join stage")
+ return button
+}()
+```
+
+### Button with functionality to remove the alertview
+
+```swift
+var cancelButton: DyteButton {get }
+```
+Define it as follows
+
+ ```swift
+public let cancelButton: DyteButton = {
+ let button = DyteUIUTility.createButton(text: "Cancel")
+ button.backgroundColor = dyteSharedTokenColor.background.shade800
+ return button
+}()
+ ```
+
+
+ iOS ConfigureWebinerAlertView
+
diff --git a/docs/ios/components/dyte-controlbar-button.mdx b/docs/ios/components/dyte-controlbar-button.mdx
index 4c4b987fcb..2ba6211020 100644
--- a/docs/ios/components/dyte-controlbar-button.mdx
+++ b/docs/ios/components/dyte-controlbar-button.mdx
@@ -6,32 +6,22 @@ description: >-
---
# DyteControlBarButton
+## Overview
+Subclass of [UIButton](https://developer.apple.com/documentation/uikit/uibutton)
+A skeleton component used for composing Dyte buttons which are mostly add inside DyteTabbarBar
+This is a base class for component likes [DyteAudioButtonControlBar](/ios/components/dyte-mic-toggle) [DyteMoreButtonControlBar](/ios/components/dyte-more-toggle)
-A skeleton component used for composing buttons.
-
-```swift
-let dyteImage = DyteImage(image: ImageProvider.image(named: "icon_more_tabbar"))
-let moreButton = DyteControlBarButton(image: dyteImage, title: "More")
+### Creating button
+```swift
+init(image: DyteImage, title: String = "", appearance: DyteControlBarButtonAppearance = DyteControlBarButtonAppearanceModel())
```
+#### Parameters
+*Required*
+**image:** Instance of type `DyteImage` to be passed
+*Optional*
+**title:** title to be shown below the DyteImage. Default value of this is Empty Strings.
+**appearance:** Any type that follows `DyteControlBarButtonAppearance`
-To setup the controlbar button inside kotlin/Java code do as follows
-
-```swift
-let controlBar = DyteTabbarBar(delegate: nil)
-let moreImage = DyteImage(image: ImageProvider.image(named: "icon_more_tabbar"))
-let moreButton = DyteControlBarButton(image: moreImage, title: "More")
-moreButton.addTarget(self, action: #selector(clickMore(button:)), for: .touchUpInside)
-let liveImage = DyteImage(image: ImageProvider.image(named: "icon_go_live"))
-let liveButton = DyteControlBarButton(image: liveImage, title: "Go Live")
-let endLiveImage = DyteImage(image: ImageProvider.image(named: "icon_end_live"))
-liveButton.setSelected(image: endLiveImage, title: "End Live")
-liveButton.addTarget(self, action: #selector(clickLive(button:)), for: .touchUpInside)
-controlBar.setButtons([liveButton, moreButton, endCallButton])
-self.view.addSubview(controlBar)
-// In case you want to set constraints programmatically
-controlBar.set(.sameLeadingTrailing(self.view),
- .bottom(self.view))
-```
iOS DyteControlBarButton
diff --git a/docs/ios/components/dyte-end-meeting.mdx b/docs/ios/components/dyte-end-meeting.mdx
new file mode 100644
index 0000000000..1380d25c54
--- /dev/null
+++ b/docs/ios/components/dyte-end-meeting.mdx
@@ -0,0 +1,31 @@
+
+# DyteEndMeetingControlBarButton
+## Overview
+This button is use to implement the action for leaving the meeting. You can add functionality to leave the meeting
+inside the app by using this button.
+
+
+### Topics:
+
+### Creating a End meeting button which you mostly add inside Control Bar
+
+```swift
+init(meeting: DyteMobileClient, alertViewController: UIViewController , onClick:((DyteEndMeetingControlBarButton, DyteLeaveDialog.DyteLeaveDialogAlertButtonType)->Void)? = nil, appearance: DyteControlBarButtonAppearance = AppTheme.shared.controlBarButtonAppearance)
+```
+Creates a DyteEndMeetingControlBarButton with multiple parameters.
+
+#### Parameters:
+*Required*
+**meeting:** Current ongoing meeting object.
+**alertViewController:** UIViewController object on which you want to present the UIAlertViewController. UIAlertView shown as final confirmation
+to leave meeting from the user.
+*Optional*
+**onClick:** Closure that you passed to get callback when user take action on UIAlertView
+appearance: Any type which conforms to protocol "DyteControlBarButtonAppearance"
+
+
+### Override the onClick action.
+```swift
+open func onClick(button: DyteEndMeetingControlBarButton)
+```
+You can override this method inside the subclass of `DyteEndMeetingControlBarButton` to customize the functionality when user presses this button.
diff --git a/docs/ios/components/dyte-grid.mdx b/docs/ios/components/dyte-grid.mdx
index 4dcb5e6475..eb0b1c0502 100644
--- a/docs/ios/components/dyte-grid.mdx
+++ b/docs/ios/components/dyte-grid.mdx
@@ -12,20 +12,20 @@ it for you.
```swift
gridView = GridView(showingCurrently: 9, getChildView: {
- return DyteParticipantTileContainerView()
- })
+ return DyteParticipantTileContainerView()
+})
```
To setup the grid inside kotlin/Java code do as follows
```swift
self.gridView.settingFramesForPluginsActiveInLandscapeMode(visibleItemCount: 7,
- animation: true) { finish in
- completion()
+ animation: true) { finish in
+ completion()
}
//Get a peerView
if let peerView = self.gridView.childView(index: index)?.tileView {
- peerView.pinView(show: show)
+ peerView.pinView(show: show)
}
```
diff --git a/docs/ios/components/dyte-join-stage.mdx b/docs/ios/components/dyte-join-stage.mdx
index 830e3fb420..9c3a36a371 100644
--- a/docs/ios/components/dyte-join-stage.mdx
+++ b/docs/ios/components/dyte-join-stage.mdx
@@ -1,16 +1,31 @@
---
description: >-
- Learn how to use and customize the WebinarAlertView component in Dyte's iOS UiKit
+ Learn how to use and customize the DyteWebinarAlertView component in Dyte's iOS UiKit
with our detailed documentation.
---
-# WebinarAlertView
-
+# DyteWebinarAlertView
+## Overview
A confirmation dialog screen which is shown
-
- When the user's request to Join Stage is approved by the meeting host.
- When host invites the localUser to join stage.
+### Topics:
+
+### Creating a Audio control button which you mostly add inside Control Bar
+
+```swift
+init(meeting: DyteMobileClient, participant: DyteJoinedMeetingParticipant) {
+```
+Creates a [DyteAudioButtonControlBar](/ios/components/dyte-mic-toggle) with multiple parameters.
+
+#### Parameters:
+*Required*
+**meeting:** Current ongoing meeting object.
+**participant:** Participant to join stage.
+
+For example below code to join stage.
+
```swift
let alert = WebinarAlertView(meetingClient: meeting, participant: meeting.localUser)
alert.layer.zPosition = 1.0
diff --git a/docs/ios/components/dyte-leave-alert-actions.mdx b/docs/ios/components/dyte-leave-alert-actions.mdx
new file mode 100644
index 0000000000..5dde97d504
--- /dev/null
+++ b/docs/ios/components/dyte-leave-alert-actions.mdx
@@ -0,0 +1,25 @@
+
+
+# DyteLeaveDialogAlertButtonType
+## Overview
+Button types to show different action which can be taken by user when decided to leave meeting.
+
+
+### Topics:
+
+#### Types.
+*case* **willLeaveMeeting**
+ Action type which tells the client that user is about to leave a meeting.
+
+*case* **didLeaveMeeting**
+ Action type which tells the client that user leaved a meeting.
+
+*case* **willEndMeetingForAll**
+ Action type which tells the client that user is about to end meeting for all participants.
+
+*case* **didEndMeetingForAll**
+ Action type which tells the client that user has ended meeting for all participants.
+
+*case* **cancel**
+ Action type that tells the client that user revert his action.
+
diff --git a/docs/ios/components/dyte-leave-meeting-alert.mdx b/docs/ios/components/dyte-leave-meeting-alert.mdx
new file mode 100644
index 0000000000..5aa7c475ad
--- /dev/null
+++ b/docs/ios/components/dyte-leave-meeting-alert.mdx
@@ -0,0 +1,35 @@
+
+# DyteLeaveDialog
+## Overview
+This class is use to show UIAlertView with various option present to user before ending the meeting.
+
+
+### Topics:
+
+### Creating a Leave Dialog shown to user.
+
+```swift
+init(meeting: DyteMobileClient, onClick:((DyteLeaveDialogAlertButtonType)->Void)? = nil)
+```
+Creates a `DyteLeaveDialog` to end meeting with options to be selected by user of type `DyteLeaveDialogAlertButtonType`.
+
+#### Parameters:
+*Required*
+**meeting:** Default meeting object
+
+*Optional*
+**onClick:** Callback is used to tell the action taken by user. Action is of type `DyteLeaveDialogAlertButtonType`
+
+
+### Show alert to user.
+```swift
+func show(on viewController: UIViewController)
+```
+Call this method to present an alert on viewController passed.
+#### Parameters:
+*Required*
+**viewController:** ViewController on which you want to present this alert.
+
+
+ iOS DyteLeaveDialog
+
diff --git a/docs/ios/components/dyte-leave-meeting.mdx b/docs/ios/components/dyte-leave-meeting.mdx
deleted file mode 100644
index 35c07b6db0..0000000000
--- a/docs/ios/components/dyte-leave-meeting.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-image: /static/ui-kit/1.x.x/components/dyte-leave-meeting.svg
-description: >-
- Learn how to use and customize the DyteLeaveDialog component in Dyte's
- iOS UiKit with our detailed documentation.
----
-
-# DyteLeaveDialog
-
-A component which allows you to leave a meeting or end meeting for all, if you
-have the permission.
-
-To use the component do in kotlin/java as follows:
-
-```swift
-let dialog = DyteLeaveDialog(meeting: self.meeting) { alertAction in
- if alertAction == .willLeaveMeeting || alertAction == .willEndMeetingForAll {
- self.showActivityIndicator()
- } else if alertAction == .didLeaveMeeting || alertAction == .didEndMeetingForAll {
- self.hideActivityIndicator()
- if alertAction == .didLeaveMeeting {
- self.onClick?(self , .didLeaveMeeting)
- } else if alertAction == .didEndMeetingForAll {
- self.onClick?(self, .didEndMeetingForAll)
- }
- }
-}
-dialog.show(on: self.alertPresentingController)
-```
-
-
- iOS DyteLeaveMeetingView
-
diff --git a/docs/ios/components/dyte-meeting-title.mdx b/docs/ios/components/dyte-meeting-title.mdx
deleted file mode 100644
index 6e77ec8ec7..0000000000
--- a/docs/ios/components/dyte-meeting-title.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
----
-image: /static/ui-kit/1.x.x/components/dyte-meeting-title.svg
-description: >-
- Learn how to use and customize the DyteMeetingTitleView component in Dyte's
- iOS UiKit with our detailed documentation.
----
-
-# DyteMeetingTitleView
-
-A component which displays the title of the meeting.
-
-```swift
-let title = DyteMeetingTitle(meeting: self.meeting)
-```
-
-
- iOS DyteMeetingTitleView
-
diff --git a/docs/ios/components/dyte-meeting-titlelabel.mdx b/docs/ios/components/dyte-meeting-titlelabel.mdx
new file mode 100644
index 0000000000..8e06b4a826
--- /dev/null
+++ b/docs/ios/components/dyte-meeting-titlelabel.mdx
@@ -0,0 +1,32 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-meeting-title.svg
+description: >-
+ Learn how to use and customize the DyteMeetingTitleView component in Dyte's
+ iOS UiKit with our detailed documentation.
+---
+
+# DyteMeetingTitleLabel
+Subclass of [UILabel](https://developer.apple.com/documentation/uikit/uilabel) which displays the title of the meeting.
+
+### Topics:
+### Creating a DyteMeetingTitleLabel.
+
+```swift
+init(meeting: DyteMobileClient, appearance: DyteTextAppearance = AppTheme.shared.meetingTitleAppearance)
+```
+#### Parameters:
+*Required*
+**meeting:** Current ongoing meeting object.
+*Optional*
+**appearance:** Any type which conforms to protocol "DyteTextAppearance"
+
+For example you can use this as below.
+
+```swift
+let title = DyteMeetingTitleLabel(meeting: self.meeting)
+self.view.addSubview(title)
+```
+
+
+ iOS DyteMeetingTitleLabel
+
diff --git a/docs/ios/components/dyte-mic-toggle.mdx b/docs/ios/components/dyte-mic-toggle.mdx
index 65925a5394..0d3d930267 100644
--- a/docs/ios/components/dyte-mic-toggle.mdx
+++ b/docs/ios/components/dyte-mic-toggle.mdx
@@ -5,16 +5,33 @@ description: >-
---
# DyteAudioButtonControlBar
+## Overview
+Subclass of [DyteControlBarButton](/ios/components/dyte-controlbar-button)
+This button is use to implement the action for mute/unmute microphone for the ongoing meeting.
-A button which toggles your microphone.
+### Topics:
+
+### Creating a Audio control button which you mostly add inside Control Bar
```swift
-var buttons = [DyteControlBarButton]()
-if meeting.localUser.permissions.media.canPublishAudio {
- let micButton = DyteAudioButtonControlBar(meeting: meeting)
- buttons.append(micButton)
-}
+init(meeting: DyteMobileClient, onClick:((DyteAudioButtonControlBar)->Void)? = nil, appearance: DyteControlBarButtonAppearance = AppTheme.shared.controlBarButtonAppearance)
+```
+Creates a `DyteAudioButtonControlBar` with multiple parameters.
+
+#### Parameters:
+*Required*
+**meeting:** Current ongoing meeting object.
+*Optional*
+**onClick:** Closure that you passed to get callback when user click this button.
+**appearance:** Any type which conforms to protocol `DyteControlBarButtonAppearance`
+
+
+### Override the onClick action.
+```swift
+open func onClick(button: DyteAudioButtonControlBar)
```
+You can override this method inside the subclass of `DyteAudioButtonControlBar` to customize the functionality when user presses this button.
+
iOS DyteAudioButtonControlBar
diff --git a/docs/ios/components/dyte-more-toggle.mdx b/docs/ios/components/dyte-more-toggle.mdx
index 659a63c123..b4e48566ff 100644
--- a/docs/ios/components/dyte-more-toggle.mdx
+++ b/docs/ios/components/dyte-more-toggle.mdx
@@ -4,27 +4,44 @@ description: >-
iOS UiKit with our detailed documentation.
---
-# DyteMoreMenuBottomSheet
+# DyteMoreButtonControlBar
+## Overview
+Subclass of [DyteControlBarButton](/ios/components/dyte-controlbar-button)
+This button is use to show/hide bottom sheet. Pressing this button again and again will toggle show/hide bottom sheet. You can add this button to show various action which are applicable according
+to your presets for eg. You can show below actions
+1. Mute audio for all participants
+2. Mute video for all participants
+3. Start/Stop meeting recording.
+4. Can launch plugins.
+5. Can launch polls.
+6. Can lauch chats screen.
+7. Can launch settings screen.
-A button which toggles visibility of a more menu.
+All options depends on Users presets.
-```swift
-var menus = [MenuType]()
-if meeting.localUser.permissions.host.canMuteAudio {
- menus.append(.muteAllAudio)
-}
+### Topics:
+
+### Creating a More Menu meeting button which you mostly add inside Control Bar.
+
+```swift
+init(meeting: DyteMobileClient, presentingViewController: UIViewController, settingViewControllerCompletion:(()->Void)? = nil) {
+```
+Creates a DyteMoreButtonControlBar with multiple parameters.
-if meeting.localUser.permissions.host.canMuteVideo {
- menus.append(.muteAllVideo)
-}
+#### Parameters:
+*Required*
+**meeting:** Current ongoing meeting object.
+**presentingViewController:** UIViewController object on which you want to present this bottom sheet.
+*Optional*
+**settingViewControllerCompletion:** Closure that you passed to get callback when user open Setting screen from setting option
+from bottom sheet and closed it. When user press back from setting screen then you get this callback.
-self.bottomSheet = DyteMoreMenuBottomSheet(
- menus: menus,
- meeting: self.meeting,
- presentingViewController: self.presentingViewController)
-self.bottomSheet.show()
+### Override the onClick action.
+```swift
+func onClick(button: DyteControlBarButton)
```
+You can override this method inside the subclass of `DyteMoreButtonControlBar` to customize the functionality when user presses this button.
iOS DyteMoreToggleButton
diff --git a/docs/ios/components/dyte-name-tag.mdx b/docs/ios/components/dyte-name-tag.mdx
index fefde81c9b..ec04c07036 100644
--- a/docs/ios/components/dyte-name-tag.mdx
+++ b/docs/ios/components/dyte-name-tag.mdx
@@ -6,12 +6,43 @@ description: >-
---
# DyteMeetingNameTag
+## Overview
+This view is use show participant name followed by mic image (mute/unmute).
-A component which shows a participant's name.
+
+### Topics:
+
+### Creating a meeting tag.
+
+```swift
+init(meeting: DyteMobileClient, participant: DyteMeetingParticipant, appearance: DyteNameTagAppearance = AppTheme.shared.nameTagAppearance)
+```
+
+#### Parameters:
+*Required*
+**meeting:** Current ongoing meeting object.
+**participant:** Participant object for which you want to show name and Mic state enabled/disbaled.
+*Optional*
+**appearance:** Any type which conforms to protocol "DyteNameTagAppearance"
+
+### Explicit update the participant object for this view to show.
```swift
-let nameTag = DyteMeetingNameTag(meeting: meeting, participant: participant)
+func set(participant: DyteMeetingParticipant)
```
+Update Meeting tag view with recent participant object.
+#### Parameters:
+**participant:** Participant object for which you want to show name and Mic state enabled/disbaled.
+
+
+### Refreshing DyteMeetingNameTag with latest values.
+
+```swift
+func refresh()
+```
+Call this method to refresh the view.
+For example if someone update the participant name. Then call this to show latest values.
+
iOS DyteMeetingNameTag
diff --git a/docs/ios/components/dyte-navigationbar.mdx b/docs/ios/components/dyte-navigationbar.mdx
new file mode 100644
index 0000000000..0fe005c632
--- /dev/null
+++ b/docs/ios/components/dyte-navigationbar.mdx
@@ -0,0 +1,51 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-clock.svg
+description: >-
+ Learn how to use and customize the DyteNavigationBar component in Dyte's iOS UiKit
+ with our detailed documentation.
+---
+
+
+
+# DyteNavigationBar
+## Overview
+This view is used as Navigation bar and can be added anywhere on any UIView.
+This view consist of title and back button.
+We can add custom action to back button by using
+`func setClicks(previousButton:@escaping(DyteControlBarButton)->Void)`
+
+
+### Topics:
+
+### Creating a Navigation bar view
+
+```swift
+ init(title: String)
+```
+Creates a DyteNavigationBar with title.
+
+#### Parameters:
+**title:** Title shown at the center of NavigationBar.
+
+### Getting titleLabel which is of type UILabel
+```swift
+let titleLabel: DyteLabel
+```
+
+### Getting backButton which is of type `DyteControlBarButton`
+
+```swift
+let leftButton: DyteControlBarButton
+```
+
+### Setting back button click action.
+
+```swift
+func setBackButtonClick(callBack: @escaping(DyteControlBarButton)->Void)
+```
+This method is used to set the callback which is called when the user presses the back button.
+
+
+
+ iOS DyteNavigationBar
+
diff --git a/docs/ios/components/dyte-participant-count.mdx b/docs/ios/components/dyte-participant-count.mdx
index de044976e0..a2e6c40f6f 100644
--- a/docs/ios/components/dyte-participant-count.mdx
+++ b/docs/ios/components/dyte-participant-count.mdx
@@ -6,15 +6,29 @@ description: >-
---
# DyteParticipantCountView
+## Overview
+Subclass of [UILabel](https://developer.apple.com/documentation/uikit/uilabel) which shows count of total joined participants in a meeting.
-A component which shows count of total joined participants in a meeting.
+### Topics:
+### Creating a DyteParticipantCountView.
+
+```swift
+ init(meeting: DyteMobileClient, appearance: DyteTextAppearance = AppTheme.shared.participantCountAppearance) {
+```
+#### Parameters:
+*Required*
+**meeting:** Current ongoing meeting object.
+*Optional:*
+**appearance:** Any type which conforms to protocol "DyteTextAppearance"
+
+For example you can use this as below.
```swift
public lazy var lblSubtitle: DyteParticipantCountView = {
- let label = DyteParticipantCountView(meeting: self.meeting)
- label.textAlignment = .left
- return label
- }()
+ let label = DyteParticipantCountView(meeting: self.meeting)
+ label.textAlignment = .left
+ return label
+}()
```
diff --git a/docs/ios/components/dyte-participant-tile-view.mdx b/docs/ios/components/dyte-participant-tile-view.mdx
new file mode 100644
index 0000000000..19811eca54
--- /dev/null
+++ b/docs/ios/components/dyte-participant-tile-view.mdx
@@ -0,0 +1,40 @@
+---
+description: >-
+ Learn how to use and customize the DyteStageActionButtonControlBar component in
+ Dyte's iOS UiKit with our detailed documentation.
+---
+
+# DyteParticipantTileView
+## Overview
+This view will show Video of participant with combination of [DyteMeetingNameTag](/ios/components/dyte-name-tag) and [DyteAvatarView](/ios/components/dyte-avatar)
+
+
+
+
+If video is disabled then [DyteAvatarView](/ios/components/dyte-avatar) is visible to user.
+
+
+
+
+
+### Create Tile view
+
+```swift
+init(viewModel: VideoPeerViewModel)
+```
+#### Parameters
+**viewModel:** Instance of type [VideoPeerViewModel](/ios/Helper-Classes/dyte-plugin-view-model)
+
+
+### Showing pin image on top left
+```swift
+func pinView(show: Bool)
+```
+This method is used to show/hide pin image on top left.
+
+#### Parameters
+**show:** `true` to show pin image and `false` to hide.
+
+
+ iOS DyteWebinarStageToggleButton
+
diff --git a/docs/ios/components/dyte-participants.mdx b/docs/ios/components/dyte-participants.mdx
index 7df75d0d4a..2e84b1ddb6 100644
--- a/docs/ios/components/dyte-participants.mdx
+++ b/docs/ios/components/dyte-participants.mdx
@@ -10,11 +10,10 @@ description: >-
A component which lists all participants, with ability to run privileged actions
on each participant according to your permissions.
-To show DyteParticipantsFragment do in kotlin/Java as follows:
+To show ParticipantViewController do as follows:
```swift
-let controller = ParticipantViewController(viewModel:
- ParticipantViewControllerModel(mobileClient: meeting))
+let controller = ParticipantViewController(viewModel: ParticipantViewControllerModel(mobileClient: meeting))
controller.modalPresentationStyle = .fullScreen
self.present(controller, animated: true)
```
diff --git a/docs/ios/components/dyte-plugin-view.mdx b/docs/ios/components/dyte-plugin-view.mdx
new file mode 100644
index 0000000000..9cbfb10458
--- /dev/null
+++ b/docs/ios/components/dyte-plugin-view.mdx
@@ -0,0 +1,43 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-plugins.svg
+description: >-
+ Learn how to use and customize the DytePluginViewController component in Dyte's
+ iOS UiKit with our detailed documentation.
+---
+
+# DytePluginsView
+## Overview
+A view which show individual (plugin/screen share) view. On top of this view we are showing instance of
+[DyteActiveTabSelectorView](/ios/components/dyte-active-tab-selector-view).
+In case of Mutliple(Count more than 1) plugins or Screen share, We are showing `DyteActiveTabSelectorView`
+else it will be hidden.
+
+Below is the image of plugin view with 3 plugins. You can select one plugin at a time.
+ Now plugin name: "DocShare".
+
+
+
+## Topics:
+
+### Create plugins view
+```swift
+init(videoPeerViewModel: VideoPeerViewModel)
+```
+#### Parameters
+**videoPeerViewModel** Instance of type [VideoPeerViewModel](/ios/Helper-Classes/dyte-plugin-view-model)
+
+### Adding plugins tab button
+
+```swift
+func setButtons(buttons: [DytePluginScreenShareTabButton], selectedIndex: Int?, clickAction:@escaping(DytePluginScreenShareTabButton, Bool)->Void)
+```
+#### Parameters
+**buttons:** Array of DytePluginScreenShareTabButton to be shown inside [DyteActiveTabSelectorView](/ios/components/dyte-active-tab-selector-view)
+**selectedIndex:** Index of plugin button which needs to be selected from `buttons: [DytePluginScreenShareTabButton]`
+**clickAction:** Call back of type `(DytePluginScreenShareTabButton, Bool)->Void`.
*First parameter* is the button selected by user
+.
*Second parameter* is bool that tells whether button tapped is plugin or either screen share button. `true` is plugin/screen share button clicked.
+
+
+
+ iOS DytePluginViewController
+
diff --git a/docs/ios/components/dyte-pluginScreenShareTab-button.mdx b/docs/ios/components/dyte-pluginScreenShareTab-button.mdx
new file mode 100644
index 0000000000..c37062d69d
--- /dev/null
+++ b/docs/ios/components/dyte-pluginScreenShareTab-button.mdx
@@ -0,0 +1,53 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-plugins.svg
+description: >-
+ Learn how to use and customize the DytePluginViewController component in Dyte's
+ iOS UiKit with our detailed documentation.
+---
+
+# DytePluginScreenShareTabButton
+## Overview
+Subclass of [UIButton](https://developer.apple.com/documentation/uikit/uibutton)
+Mostly used to add plugin button to [DyteActiveTabSelectorView](/ios/components/dyte-active-tab-selector-view)
+
+## Topics:
+
+### Creating button
+
+```swift
+init(image: DyteImage?, title: String = "", id: String = "", appearance: DytePluginScreenShareTabButtonDesignDependency = DytePluginScreenShareTabButtonDesignDependencyModel())
+```
+#### Parameters
+*Required*
+**image:** Image of type `DyteImage` to be shown on extreme left.
+*Optional*
+**title:** Title of type String to be shown as button title.
+**id:** identifier used to identify this button.
+**appearance:** Any type that confirms to DytePluginScreenShareTabButtonDesignDependency
+
+
+
+For example in above image , We have created three buttons
+1. With title "Rustpad V2" and isSelected = `false`
+2. With title "Excalidraw" and isSelected = `false`
+3. With title "DocShare" and isSelected = `true`
+
+### Setting the image and title
+Set the image and title which is used when client sets `UIButton` [isSelected](https://developer.apple.com/documentation/uikit/uicontrol/1618203-isselected) property
+
+```swift
+func setSelected(image: DyteImage)
+```
+#### Parameters
+**image:** Image of type `DyteImage` to be shown on extreme left when [isSelected](https://developer.apple.com/documentation/uikit/uicontrol/1618203-isselected) sets to `true`.
+
+```swift
+func setSelected(title: String)
+```
+#### Parameters
+**title:** Title of type String to be shown when [isSelected](https://developer.apple.com/documentation/uikit/uicontrol/1618203-isselected) sets to `true`.
+
+
+
+ iOS DytePluginViewController
+
diff --git a/docs/ios/components/dyte-plugins.mdx b/docs/ios/components/dyte-plugins.mdx
index 9e7f8b89fd..64c809c103 100644
--- a/docs/ios/components/dyte-plugins.mdx
+++ b/docs/ios/components/dyte-plugins.mdx
@@ -1,22 +1,34 @@
---
image: /static/ui-kit/1.x.x/components/dyte-plugins.svg
description: >-
- Learn how to use and customize the PluginViewController component in Dyte's
+ Learn how to use and customize the DytePluginViewController component in Dyte's
iOS UiKit with our detailed documentation.
---
-# PluginViewController
-
-A component which lists all available plugins from their preset, and ability to
+# DytePluginViewController
+## Overview
+A viewcontroller which lists all available plugins from their preset, and ability to
enable or disable plugins.
+
+### Topics:
+### Creating a DytePluginViewController.
+
+```swift
+init(plugins: [DytePlugin])
+```
+#### Parameters:
+**meeting:** Current ongoing meeting object.
+
+
+
```swift
-let controller = PluginViewController(polls: dyteMobileClient.plugins.all)
+let controller = DytePluginViewController(plugins: dyteMobileClient.plugins.all)
let navigationController = UINavigationController(rootViewController: controller)
navigationController.modalPresentationStyle = .fullScreen
present(navigationController, animated: true, completion: nil)
```
- iOS PluginViewController
+ iOS DytePluginViewController
diff --git a/docs/ios/components/dyte-poll-form.mdx b/docs/ios/components/dyte-poll-form.mdx
index 4f5450efd3..ab89d5b02c 100644
--- a/docs/ios/components/dyte-poll-form.mdx
+++ b/docs/ios/components/dyte-poll-form.mdx
@@ -1,20 +1,29 @@
---
description: >-
- Learn how to use and customize the CreatePollsViewController component in
+ Learn how to use and customize the DyteCreatePollsViewController component in
Dyte's iOS UiKit with our detailed documentation.
---
-# CreatePollsViewController
+# DyteCreatePollsViewController
+## Overview
+A view controller used to create and publish a poll.
-A component that lets you create a poll.
+### Topics:
+### Creating a DyteCreatePollsViewController.
-To show CreatePollsViewController do in iOS as follows:
+```swift
+ init(meeting: DyteMobileClient)
+```
+#### Parameters:
+**meeting:** Current ongoing meeting object.
+
+### To show DyteCreatePollsViewController do in iOS as follows:
```swift
-let controller = CreatePollsViewController(dyteMobileClient: dyteMobileClient)
+let controller = DyteCreatePollsViewController(dyteMobileClient: dyteMobileClient)
self.present(controller, animated: true)
```
- iOS CreatePollsViewController
+ iOS DyteCreatePollsViewController
diff --git a/docs/ios/components/dyte-polls.mdx b/docs/ios/components/dyte-polls.mdx
index 4db9253a54..6c215b1c0a 100644
--- a/docs/ios/components/dyte-polls.mdx
+++ b/docs/ios/components/dyte-polls.mdx
@@ -1,20 +1,32 @@
---
description: >-
- Learn how to use and customize the ShowPollsViewController component in
+ Learn how to use and customize the DyteShowPollsViewController component in
Dyte's iOS UiKit with our detailed documentation.
---
-# ShowPollsViewController
+# DyteShowPollsViewController
-A component that lets you create a poll.
+## Overview
+A view controller used to show list of existing polls and a button to create polls
-To show ShowPollsViewController do in iOS as follows:
+### Topics:
+
+### Creating a show polls screen.
+
+```swift
+ init(meeting: DyteMobileClient)
+```
+#### Parameters:
+**meeting:** Current ongoing meeting object.
+
+
+### To present DyteShowPollsViewController do in iOS as follows:
```swift
-let controller = ShowPollsViewController(dyteMobileClient: self.dyteMobileClient)
+let controller = DyteShowPollsViewController(dyteMobileClient: self.dyteMobileClient)
self.present(controller, animated: true)
```
- iOS ShowPollsViewController
+ iOS DyteShowPollsViewController
diff --git a/docs/ios/components/dyte-recording-indicator.mdx b/docs/ios/components/dyte-recording-indicator.mdx
index 2a6b846674..ef1138ef71 100644
--- a/docs/ios/components/dyte-recording-indicator.mdx
+++ b/docs/ios/components/dyte-recording-indicator.mdx
@@ -6,22 +6,43 @@ description: >-
---
# DyteRecordingView
+## Overview
+This view is used to show Recording status of an ongoing meeting. When a participant starts recording meeting, this view will automatically get visible to user and start blinking.
+When participant stop recording then this view get automatically hide.
-A component which indicates the recording status of a meeting.
-It will not render anything if no recording is taking place.
+### Topics:
+
+### Creating a recording view
+```swift
+init(meeting: DyteMobileClient, title: String = "Rec", image: DyteImage? = nil, appearance: DyteRecordingViewAppearance = DyteRecordingViewAppearanceModel(designLibrary: DesignLibrary.shared))
+```
+Creates a DyteRecordingView with specified title and other informations.
+
+#### Parameters:
+*Required*
+**meeting:** Default meeting object
+*Optional:*
+**title:** String which you want to show. Default value is “Rec”
+**image:** Image of type DtyeImage. Default value of it is nil.
+**appearance:** Any type which conforms to protocol “DyteRecordingViewAppearance”
```swift
private lazy var recordingView: DyteRecordingView = {
- let view = DyteRecordingView(
- meeting: self.meeting,
- title: "Rec",
- image: nil,
- appearance: AppTheme.shared.recordingViewAppearance)
- view.isHidden = true
- return view
- }()
+ let view = DyteRecordingView(
+ meeting: self.meeting)
+ return view
+}()
+```
+
+### Managing the recording view
+```swift
+func blinking(start: Bool)
```
+Force start and stop blinking of the recording view.
+#### Parameters:
+**start:**
+`true` for start blinking, if you specify `false` then blinking is stop and view automatically gets disappear.
iOS DyteRecordingView
diff --git a/docs/ios/components/dyte-settings.mdx b/docs/ios/components/dyte-settings.mdx
index 458cd2b261..4cfec50fa4 100644
--- a/docs/ios/components/dyte-settings.mdx
+++ b/docs/ios/components/dyte-settings.mdx
@@ -1,24 +1,45 @@
---
image: /static/ui-kit/1.x.x/components/dyte-settings.svg
description: >-
- Learn how to use and customize the SettingViewController component in Dyte's
+ Learn how to use and customize the DyteSettingViewController component in Dyte's
iOS UiKit with our detailed documentation.
---
-# SettingViewController
+# DyteSettingViewController
+## Overview
+A screen that is used to show settings to switch between different audio/video devices.
-A settings component to see and change your audio/video devices.
-To show SettingViewController do in iOS as follows:
+### Create DyteSettingViewController
+```swift
+init(nameTag: String, meeting: DyteMobileClient, completion:(()->Void)? = nil)
+```
+Creates settings screen with name tag.
+
+#### Parameters:
+*Required:*
+**nameTag:** An String representing participant name.
+**meeting:** Default meeting object
+*Optional:*
+**completion:** Closure to get a callback when user presses back button present on [DyteNavigationBar](/ios/components/dyte-navigationbar)
+
+### Hide/Show top bar
+```swift
+var shouldShowTopBar: Bool = true
+```
+
+Default value is `true`. To hide the topbar assign this to `false`.
+
+### To show DyteSettingViewController do in iOS as follows:
```swift
-let controller = SettingViewController(nameTag: participant.name,
- dyteMobileClient: mobileClient)
+let controller = DyteSettingViewController(nameTag: participant.name,
+ meeting: mobileClient)
controller.view.backgroundColor = self.view.backgroundColor
controller.modalPresentationStyle = .fullScreen
self.present(controller, animated: true)
```
- iOS SettingViewController
+ iOS DyteSettingViewController
diff --git a/docs/ios/components/dyte-setup-screen-delegate.mdx b/docs/ios/components/dyte-setup-screen-delegate.mdx
new file mode 100644
index 0000000000..4d50177624
--- /dev/null
+++ b/docs/ios/components/dyte-setup-screen-delegate.mdx
@@ -0,0 +1,29 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-setup-screen.svg
+description: >-
+ Learn how to use and customize the SetupViewController component in Dyte's
+ iOS UiKit with our detailed documentation.
+---
+
+# SetupViewControllerDelegate
+## Overview
+A protocol which will be used as delegate to [SetupViewController](/ios/components/dyte-setup-screen).
+
+## Topics:
+
+```swift
+protocol SetupViewControllerDelegate
+```
+The interface for an object that serves as a Setup ViewController's delegate.
+
+### Methods:
+
+ ```swift
+ func userJoinedMeetingSuccessfully(sender: UIViewController)
+ ```
+ Tells delegate object when a user successfully joined the meeting so your app can take the next indicated action.
+
+
+
+ iOS SetupViewController
+
diff --git a/docs/ios/components/dyte-setup-screen.mdx b/docs/ios/components/dyte-setup-screen.mdx
index dce14dde65..bcc0f88c70 100644
--- a/docs/ios/components/dyte-setup-screen.mdx
+++ b/docs/ios/components/dyte-setup-screen.mdx
@@ -5,20 +5,47 @@ description: >-
iOS UiKit with our detailed documentation.
---
-# SetupViewController
-
+# DyteSetupViewController
+## Overview
A screen shown before joining the meeting, where you can edit your display name,
-and media settings.
+and media settings. This screen initialize the meeting and on successfull initialization
+it shows a join button to join meeting.
+
+## Topics:
+
+### Create SetupViewController
+```swift
+ init(meetingInfo: DyteMeetingInfoV2,
+ mobileClient: DyteMobileClient,
+ completion:@escaping()->Void)
+```
+Creates setup screen with the configuration object of type `DyteMeetingInfoV2`
-To show SetupViewController do in iOS as follows:
+#### Parameters:
+Required:
+meetingInfo: An instance of type `DyteMeetingInfoV2`
+meeting: Default meeting object
+completion: escaping closure to get a callback when Meetings ends up. For example. When user leaved the meeting then
+you want to present the starting screen.
```swift
let controller = SetupViewController(meetingInfo: dyteMeetingInfo,
- mobileClient: metting,
- completion: {})
+ meeting: metting) { [weak self] in
+ guard let self = self else {return}
+ self.dismiss(animated: true)
+ self.view.hideActivityIndicator()
+}
+controller.modalPresentationStyle = .fullScreen
self.present(controller, animated: true)
```
+### Customising flow of SetupViewController using protocol [SetupViewControllerDelegate](/ios/components/dyte-setup-screen-delegate)
+
+```swift
+weak var delegate: SetupViewControllerDelegate?
+```
+The delegate of the [SetupViewController](/ios/components/dyte-setup-screen) object.
+
iOS SetupViewController
diff --git a/docs/ios/helper-classes/_category_.json b/docs/ios/helper-classes/_category_.json
new file mode 100644
index 0000000000..e332e33d18
--- /dev/null
+++ b/docs/ios/helper-classes/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 11,
+ "label": "Helper-Classes",
+ "collapsible": true
+}
diff --git a/docs/ios/helper-classes/dyte-plugin-view-model.mdx b/docs/ios/helper-classes/dyte-plugin-view-model.mdx
new file mode 100644
index 0000000000..0d3ff0c050
--- /dev/null
+++ b/docs/ios/helper-classes/dyte-plugin-view-model.mdx
@@ -0,0 +1,68 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-plugins.svg
+description: >-
+ Learn how to use and customize the DytePluginViewController component in Dyte's
+ iOS UiKit with our detailed documentation.
+---
+
+# VideoPeerViewModel
+## Overview
+A view model for instances of class [DyteParticipantTileView](/ios/components/dyte-participant-tile-view).
+
+### Create instance of this class
+
+```swift
+init(meeting: DyteMobileClient, participant: DyteJoinedMeetingParticipant, showSelfPreviewVideo: Bool, showScreenShareVideoView: Bool = false)
+```
+#### Parameters
+**meeting:** Current ongoing meeting.
+**participant:** Participant for whom you want to load video.
+**showSelfPreviewVideo**: This flags tell whether you want load video of self or not. `true` load video of self
+**showScreenShareVideoView:** This flag will tell wheter to load screen share view'
+
+### Update the participant
+```swift
+func set(participant: DyteJoinedMeetingParticipant)
+```
+
+### Call back when audio state gets updated
+
+```swift
+var audioUpdate: (()->Void)?
+```
+Whenever `func onAudioUpdate(isEnabled: Bool)` protocol method of `DyteParticipantUpdateListener` get called,
+ this Call back is generated.
+
+### Call back when video state gets updated
+
+```swift
+var videoUpdate: (()->Void)?
+```
+Whenever `func onVideoUpdate(isEnabled: Bool)` protocol method of `DyteParticipantUpdateListener` get called,
+ this Call back is generated.
+
+
+### Call back when participants gets updated
+```swift
+var loadNewParticipant: ((DyteJoinedMeetingParticipant)->Void)?
+```
+Whenever `func set(participant: DyteJoinedMeetingParticipant)` get called, Call back is generated
+
+
+### Call back when name initials of participant gets updated
+```swift
+var nameInitialsUpdate: (()->Void)?
+```
+Whenever `func refreshInitialName` get called, Call back is generated
+
+### Call back when name of participant gets updated
+
+```swift
+var nameUpdate: (()->Void)?
+```
+Whenever `func refreshNameTag` get called, Call back is generated
+
+
+
+ iOS DytePluginViewController
+
diff --git a/docs/ios/participants/_category_.json b/docs/ios/participants/_category_.json
new file mode 100644
index 0000000000..e6fd581d33
--- /dev/null
+++ b/docs/ios/participants/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 9,
+ "label": "Participants",
+ "collapsible": true
+}
diff --git a/docs/ios/participants/host-controls.mdx b/docs/ios/participants/host-controls.mdx
new file mode 100644
index 0000000000..929020bcac
--- /dev/null
+++ b/docs/ios/participants/host-controls.mdx
@@ -0,0 +1,72 @@
+---
+image: /static/ui-kit/1.x.x/components/more-menu.svg
+sidebar_position: 4
+description: >-
+ Learn how to create and use a "More" menu for host control in your iOS app
+ with our detailed documentation.
+---
+
+# Host Controls
+
+This documentation explains how to create and utilize a "More" menu for host control in your iOS app.
+
+To create the More menu, use the following code:
+
+```swift
+private func createMoreMenu(participantListener: DyteParticipantUpdateEventListener, indexPath: IndexPath) -> Bool {
+ var menus = [MenuType]()
+ let participant = participantListener.participant
+ let hostPermission = self.viewModel.mobileClient.localUser.permissions.host
+
+ if hostPermission.canPinParticipant {
+ if !participant.isPinned {
+ menus.append(.pin)
+ } else {
+ menus.append(.unPin)
+ }
+ }
+
+ if hostPermission.canMuteAudio && participant.audioEnabled {
+ menus.append(.muteAudio)
+ }
+
+ if hostPermission.canMuteVideo && participant.videoEnabled {
+ menus.append(.muteVideo)
+ }
+
+ if hostPermission.canKickParticipant && participant != self.viewModel.mobileClient.localUser {
+ menus.append(.kick)
+ }
+
+ if menus.isEmpty {
+ return false
+ }
+ menus.append(contentsOf: [.cancel])
+
+ let moreMenu = DyteMoreMenu(title: participant.name, features: menus, onSelect: { [weak self] menuType in
+ guard let self = self else { return }
+ switch menuType {
+ case .pin:
+ try? participant.pin()
+ case .unPin:
+ try? participant.unpin()
+ case .muteAudio:
+ try? participant.disableAudio()
+ case .muteVideo:
+ try? participant.disableVideo()
+ case .kick:
+ try? participant.kick()
+ case .cancel:
+ print("Operation cancelled")
+ default:
+ print("No action needed")
+ }
+ })
+ moreMenu.show(on: self.view)
+ return true
+}
+```
+
+This code creates a "More" menu with various options based on the host's permissions and
+the participant's current state. The menu allows the host to perform actions like pinning/unpinning
+a participant, muting their audio or video, and kicking them from the session.
diff --git a/docs/ios/participants/introduction.mdx b/docs/ios/participants/introduction.mdx
new file mode 100644
index 0000000000..d0efde8644
--- /dev/null
+++ b/docs/ios/participants/introduction.mdx
@@ -0,0 +1,35 @@
+---
+title: Introduction
+sidebar_position: 1
+---
+
+# Introduction
+
+the data regarding all meeting participants is stored under `meeting.participants`. These **does not** include the local user. Use the methods and events to consume the participants data. For example, to get all the participants who joined the meeting:
+
+```swift
+// get all joined participants [DyteJoinedMeetingParticipant]
+let joined = meeting.participants.joined
+
+// get all participants [DyteParticipant]
+val allParticipants = meeting.participants.all
+```
+
+The `meeting.participants` object has the following **array** of participants
+
+- **all**: A list that contains all the participants who have joined the meeting except the local user
+- **joined**: A list that contains all the participants who are currently in the meeting
+ except the local user
+- **waitlisted**: A list that contains all the participants waiting to join the
+ meeting.
+- **active**: A list that contains all the participants except the local user whose media is subscribed to i.e
+ participants are supposed to be on the screen at the moment except the local user
+- **pinned**: A list that contains all the pinned participants of the meeting.
+- **screenShares**: A list that contains all the participants who are sharing their screen.
+
+Therefore if you were to make a video / audio grid of participants, you'd use the `active` map, but to display the
+list of all participants in the meeting you'd use the `joined` map.
+
+Each participant in each of the `joined`, `active`, `pinned` and `screenShares` list are of
+type `DyteJoinedMeetingParticipant`, `waitlisted` list is of type `DyteWaitlistedParticipant` and `all` list
+is of type `DyteParticipant`.
diff --git a/docs/ios/participants/pre-built-participants-screen.mdx b/docs/ios/participants/pre-built-participants-screen.mdx
new file mode 100644
index 0000000000..fd0157006d
--- /dev/null
+++ b/docs/ios/participants/pre-built-participants-screen.mdx
@@ -0,0 +1,25 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-participants.svg
+sidebar_position: 2
+description: >-
+ Learn how to use and customize the ParticipantViewController component in
+ Dyte's iOS UiKit with our detailed documentation.
+---
+
+# Pre-built Participants Screen
+
+A component which lists all participants, with ability to run privileged actions
+on each participant according to your permissions.
+
+To show ParticipantViewController do as follows:
+
+```swift
+let controller = ParticipantViewController(viewModel:
+ ParticipantViewControllerModel(mobileClient: meeting))
+controller.modalPresentationStyle = .fullScreen
+self.present(controller, animated: true)
+```
+
+
+ iOS ParticipantViewController
+
diff --git a/docs/ios/participants/type-of-participants.mdx b/docs/ios/participants/type-of-participants.mdx
new file mode 100644
index 0000000000..d07e74c1bf
--- /dev/null
+++ b/docs/ios/participants/type-of-participants.mdx
@@ -0,0 +1,61 @@
+---
+image: /static/ui-kit/1.x.x/components/participant-types.svg
+sidebar_position: 3
+description: >-
+ Learn how to handle various types of participants in your iOS app using Dyte's participant view controllers with our detailed documentation.
+---
+
+# Participant Types
+
+This documentation explains how to handle different types of participants in your iOS app using Dyte's participant view controllers.
+
+## Participant Cell Configuration
+
+We need a `tableView` to show different types of participants on this screen.
+The following code snippet demonstrates how to configure participant cells based on their types.
+
+```swift
+public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+ let cell = self.viewModel.dataSourceTableView.configureCell(tableView: tableView, indexPath: indexPath)
+ if let cell = cell as? ParticipantInCallTableViewCell {
+ cell.buttonMoreClick = { [weak self] button in
+ guard let self = self else {return}
+ //createMoreMenu is covered in host control docs
+ self.createMoreMenu(participantListner: cell.model.participantUpdateEventListner, indexPath: indexPath)
+ }
+ } else if let cell = cell as? ParticipantWaitingTableViewCell {
+ cell.buttonCrossClick = { [weak self] button in
+ guard let self = self else {return}
+ self.viewModel.waitlistEventListner.rejectWaitingRequest(participant: cell.model.participant)
+ }
+ cell.buttonTickClick = { [weak self] button in
+ guard let self = self else {return}
+ self.viewModel.waitlistEventListner.acceptWaitingRequest(participant: cell.model.participant)
+ }
+ } else if let cell = cell as? OnStageWaitingRequestTableViewCell {
+ cell.buttonCrossClick = { [weak self] button in
+ guard let self = self else {return}
+ self.viewModel.mobileClient.stage.denyAccess(id: cell.model.participant.id)
+ self.reloadScreen()
+ }
+ cell.buttonTickClick = { [weak self] button in
+ guard let self = self else {return}
+ self.viewModel.mobileClient.stage.grantAccess(id: cell.model.participant.id)
+ self.reloadScreen()
+ }
+ } else if let cell = cell as? AcceptButtonTableViewCell {
+ cell.buttonClick = { [weak self] button in
+ guard let self = self else {return}
+ self.viewModel.acceptAll()
+ self.reloadScreen()
+ }
+ } else if let cell = cell as? RejectButtonTableViewCell {
+ cell.buttonClick = { [weak self] button in
+ guard let self = self else {return}
+ self.viewModel.rejectAll()
+ self.reloadScreen()
+ }
+ }
+ return cell
+}
+```
diff --git a/docs/ios/rendering-participant-video/_category_.json b/docs/ios/rendering-participant-video/_category_.json
new file mode 100644
index 0000000000..90a28ba35f
--- /dev/null
+++ b/docs/ios/rendering-participant-video/_category_.json
@@ -0,0 +1,5 @@
+{
+ "position": 6,
+ "label": "Rendering participant video",
+ "collapsible": true
+}
diff --git a/docs/ios/rendering-participant-video/build-your-own-grid.mdx b/docs/ios/rendering-participant-video/build-your-own-grid.mdx
new file mode 100644
index 0000000000..607810ffe5
--- /dev/null
+++ b/docs/ios/rendering-participant-video/build-your-own-grid.mdx
@@ -0,0 +1,71 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-grid.svg
+sidebar_position: 2
+description: >-
+ Learn how to create a custom grid view component in Dyte's iOS UIKit with our detailed documentation.
+---
+
+# Custom Grid View
+
+## Introduction
+
+The `GridView` class provided in Dyte's iOS UIKit allows you to create custom grid views to display content
+in a structured layout. This guide will walk you through the process of understanding, customizing, and
+utilizing the `GridView` class to create your custom grid views.
+
+## Step 1: Understanding the GridView Class
+
+The `GridView` class is a customizable UIView subclass designed to display a grid of views. It provides properties
+and methods to manage the arrangement and presentation of child views within the grid.
+
+### Key Components:
+
+- **Properties Needed to manage GridView**:
+
+ - `maxItems`: Maximum number of items the grid can contain.
+ - `currentVisibleItem`: Number of items currently visible in the grid.
+ - `scrollView`: UIScrollView for enabling scrolling if the grid overflows.
+ - `views`: Array holding the child views of the grid.
+
+### Example Usage:
+
+```swift
+let tile = DyteParticipantTileView(mobileClient: meeting,
+ participant: participant,
+ isForLocalUser: false,
+ showScreenShareVideoView: false)
+```
+
+These tiles stored in `views` array can be rendered in `scrollView` and `currentVisibleItem`, `maxItems` can
+manage state of grid to show/hide certain tiles if pagination is needed.
+
+Remove tile from view using `tileView?.removeFromSuperview()`
+
+## Integrating Participant Tile Views
+
+To display video views within the `GridView`, you can utilize the `DyteParticipantTileContainerView` and
+`DyteParticipantTileView` classes provided by Dyte's iOS UIKit. These classes encapsulate the logic for
+rendering video streams of meeting participants.
+
+### `DyteParticipantTileContainerView`
+
+The `DyteParticipantTileContainerView` is a UIView subclass designed to contain a single `DyteParticipantTileView`.
+It provides methods for preparing the view for reuse and setting the participant whose video stream should be displayed.
+
+#### Example Usage:
+
+```swift
+let tileContainerView = DyteParticipantTileContainerView()
+tileContainerView.setParticipant(meeting: myMeetingClient,
+ participant: meetingParticipant)
+```
+
+### DyteParticipantTileView
+
+The [DyteParticipantTileView](/ios/components/dyte-participant-tile-view) class represents a single tile
+within the grid view, displaying the video stream of a meeting participant.
+It manages the layout and presentation of the participant's video view, along with
+additional features such as participant name tags and pin indicators.
+
+You can add instances of DyteParticipantTileView to the GridView to render multiple video streams within the grid,
+providing a comprehensive view of meeting participants during video conferences.
diff --git a/docs/ios/rendering-participant-video/using-dyteGrid.mdx b/docs/ios/rendering-participant-video/using-dyteGrid.mdx
new file mode 100644
index 0000000000..b2d39134b2
--- /dev/null
+++ b/docs/ios/rendering-participant-video/using-dyteGrid.mdx
@@ -0,0 +1,37 @@
+---
+image: /static/ui-kit/1.x.x/components/dyte-grid.svg
+sidebar_position: 1
+description: >-
+ Learn how to use and customize the GridView component in Dyte's iOS UiKit
+ with our detailed documentation.
+---
+
+# Using Dyte GridView
+
+The main grid component which abstracts all the grid handling logic and renders
+it for you.
+
+```swift
+var gridView = GridView(showingCurrently: 9, getChildView: {
+ return DyteParticipantTileContainerView()
+ })
+```
+
+# Populate Grid Child Views
+
+To setup the grid & set Participant inside code do as follows
+
+```swift
+func populateGridChildViews(participants: [DyteJoinedMeetingParticipant]) {
+ for i in 0..
+ iOS DyteGridViewV2
+
diff --git a/static/static/ios/iOS_plugins.png b/static/static/ios/iOS_plugins.png
new file mode 100644
index 0000000000..01aef6f75a
Binary files /dev/null and b/static/static/ios/iOS_plugins.png differ
diff --git a/static/static/ios/iOS_show_plugin.jpg b/static/static/ios/iOS_show_plugin.jpg
new file mode 100644
index 0000000000..b579e5006c
Binary files /dev/null and b/static/static/ios/iOS_show_plugin.jpg differ
diff --git a/static/static/ios/ios_active_HorizontalView.png b/static/static/ios/ios_active_HorizontalView.png
new file mode 100644
index 0000000000..7a6ecd539a
Binary files /dev/null and b/static/static/ios/ios_active_HorizontalView.png differ
diff --git a/static/static/ios/ios_create_polls.png b/static/static/ios/ios_create_polls.png
new file mode 100644
index 0000000000..3ab91f276f
Binary files /dev/null and b/static/static/ios/ios_create_polls.png differ
diff --git a/static/static/ios/ios_participant-tile-avatar-view.png b/static/static/ios/ios_participant-tile-avatar-view.png
new file mode 100644
index 0000000000..115ead237a
Binary files /dev/null and b/static/static/ios/ios_participant-tile-avatar-view.png differ
diff --git a/static/static/ios/ios_participant-tile-view.png b/static/static/ios/ios_participant-tile-view.png
new file mode 100644
index 0000000000..6bdff416b0
Binary files /dev/null and b/static/static/ios/ios_participant-tile-view.png differ
diff --git a/static/static/ios/ios_settings.jpg b/static/static/ios/ios_settings.jpg
new file mode 100644
index 0000000000..90da3ccaa6
Binary files /dev/null and b/static/static/ios/ios_settings.jpg differ
diff --git a/static/static/ios/ios_settings_avatar.png b/static/static/ios/ios_settings_avatar.png
new file mode 100644
index 0000000000..d62e4a31a0
Binary files /dev/null and b/static/static/ios/ios_settings_avatar.png differ
diff --git a/static/static/ios/ios_show_polls.png b/static/static/ios/ios_show_polls.png
new file mode 100644
index 0000000000..73d79b994b
Binary files /dev/null and b/static/static/ios/ios_show_polls.png differ