docs: update concepts doc

docs/guides/live-video/build-live-video-app.mdx

@@ -1,6 +1,6 @@
 ---
-title: 'Integrate Dyte'
-sidebar_position: 3
+title: 'Integrate Dyte Old'
+sidebar_position: 5
 ---
 
 import IntegrateDyte from '/docs/partials/_integrate-dyte.mdx';

docs/guides/live-video/client-setup/no-code.mdx

@@ -0,0 +1,8 @@
+---
+title: 'No SDK (web)'
+sidebar_position: 7
+---
+
+import Quickstart from '/docs/partials/_nocode-quickstart.mdx';
+
+<Quickstart product="Video Conference" />

docs/guides/live-video/concepts-live-video.mdx

@@ -3,47 +3,22 @@ title: 'Concepts'
 sidebar_position: 2
 ---
 
-This topic covers essential concepts related to Dyte Live Video applications.
+We highly recommend that you go through this page to understand the basics of Dyte and to optimally use it in your applications. This page is divided into two sections **Basic Concepts** and **Architecture**.
 
-## Backend HTTP REST APIs
+- [Basic Concepts](#basic-concepts) section takes you through Dyte's key terminology to give you an understanding of what purpose they serve
+- [Architecture](#architecture) walks you through the different components of Dyte and how the pieces fit in with your existing application
 
-Your backend utilizes Dyte REST APIs to perform actions such as:
+## Basic Concepts
 
-- [Create meetings](/api#/operations/create_meeting)
-- [Add participants to a meeting](/api#/operations/add_participant)
-- [Start recording a meeting](/api#/operations/start_recording) and so on
-
-## Frontend SDKs
-
-Your applications bundle Dyte Core SDKs (and UI Kits) to acquire, transmit and play media, and manage network connections.
-
-- **Core SDK**: The Dyte Core SDK is designed to provide an easy way to incorporate real-time communication (RTC) solutions. With full customization and branding options, you can build your own UI from the ground up without dealing with complicated media layers. See [Introduction to Core SDK](/web-core/Introduction).
-
-- **UI Kit**: Dyte's UI Kit is a prebuilt design library of UI components designed to simplify the integration of video and voice calls into your product. See [UI Kit](/react-ui-kit).
-
-## Developer portal
-
-The [Developer Portal](https://dev.dyte.io/dashboard) serves as a comprehensive platform, offering access to meeting logs, API key management, billing operations, and various other functionalities in one place.
-
-You can also use Developer Portal to create meetings, presets, setup storage for recordings, add webhooks, and much more.
-
-<img
-  src="/static/guides/dev-portal.png"
-  width="600"
-  height="300"
-  alt="dev-portal"
-  className="dev-portal-preview"
-/>
-
-## Organization
+### Organization
 
 In Dyte, the organization serves as the top-level entity where all participants of your group are added. You can create an organization using the [API](/api#/operations/createOrg) or through the Developer Portal.
 
 - Meetings are created within the organization.
 - The API keys are generated for your organization. These API Keys are unique to your organization and are required to use Dyte REST APIs such as when instantiating a meeting.
 - Additionally, Dyte considers the organization as a billing unit.
 
-## Meeting
+### Meeting
 
 A communication channel created on Dyte is termed as a `meeting`. Meetings can be created using the [Create a meeting API](/api#/operations/create_meeting) or through the Developer Portal. Similarly, you can get the details of your meeting using the [API](/api#/operations/get_all_meetings) or developer portal.
 
@@ -57,7 +32,7 @@ An example from the Developer Portal displaying meeting details.
   className="concept-meeting-live-video"
 />
 
-## Session
+### Session
 
 In Dyte, a meeting is a communication channel, and each instance of that channel is called a session. A session represents an ongoing meeting within that communication channel. Like meetings, you can get fetch the details of a session via Developer Portal or using the [APIs](/api#/operations/GetSessions).
 
@@ -71,12 +46,45 @@ An example from the Developer Portal displaying session details.
   className="session-details-live-video"
 />
 
-## Preset
+### Preset
 
 A preset is a set of permissions and UI configurations that are applied to participants for different meeting types such as Group Call, Webinar, and Livestream. The presets define how a meeting will appear visually and functional aspects of the meeting. They allow customization options like setting maximum number of participants on-screen, permissions to share screen, enabling poll creation, disabling video and audio, adjusting text color, configuring plugins, etc.
 
 For more information, see [Add Presets](/guides/capabilities/presets).
 
-## Participants
+### Participant
 
 Anyone who joins the `meeting`, including actual users and machine users. You can add participants using the [Add Participant API](/api#/operations/add_participant). Participants will have permissions for the meeting depending on the selected preset. The `presetName` must be passed in the body of the Add Participant API request.
+
+## Architecture
+
+Now that you are familiar with the terminology of basic concepts on Dyte, we can take a look at how different offerings from Dyte come together. The key offerings are the REST API, core SDK , UIKit and a Developer Portal. Each of these serve different purposes and belong in different blocks of your application.
+
+Let’s dive deeper into what purpose each of these components server.
+
+### Developer Portal
+
+To begin with, let's start with our dashboard. This is where you will do a number of administrative tasks. This is your go-to-place for things like defining organisations, meeting logs, grabbing API Keys and billing operations.
+You can also use Developer Portal to create meetings, presets, setup storage for recordings, add webhooks, and much more.
+
+<img
+  src="/static/guides/dev-portal.png"
+  width="600"
+  height="300"
+  alt="dev-portal"
+  className="dev-portal-preview"
+/>
+
+### REST API
+
+Once you have grabbed your API key, we can begin to take a look at your server side. To enable live video on your platform, all you have to do is call Dyte’s REST API from your server and it does all the heavy lifting for you. We have endpoints for all your needs. We give you granular control over what all you can do through our infrastructure. On your server, all you need to worry about is how and when to make an API call to Dyte’s server and make use of the data or functionality you need. You can check out all the endpoints that are available to you [here](/api/)
+
+### Core SDK
+
+That’s all for the server, now let’s move to the client side which will majorly define how your user interacts with the services. In video calls, there are a number of interactions that the user needs to perform. These interactions can become really complex with things like handling audio/video permissions, but Dyte's SDK makes it really simple for you. It abstracts away all these tiresome details through a thin layer of abstraction that is our **coreSDK**. You still get granular control without having to worry about messy implementation details.
+
+To connect with the meetings from the client, you need to initialise the coreSDK. This requires the `authToken` which is unique to every participant in a meeting. Your client needs to connect with the meetings. The key requirement for initialising the coreSDK is the `authToken`. The coreSDK itself does not provide any UI components but instead is a data-only API layer.
+
+### UIKit
+
+We have separated the load of building user interactions from the UI components. You can simply use the coreSDK to enable components to perform actions around the meetings and extend your existing UI libraries. But to make your life easier, we offer a UIKit that can be easily integrated with your application including your branding! The UIKit provides multiple kinds of UI components which follow the atomic design principles. You can choose from a variety of basic components like buttons to very advanced components like meeting pages. Our UIKit is built on top of the coreSDK and it cannot function in isolation! Make sure you grab both the UIKit and the coreSDK when you choose to work with our UIKit. To learn more about how to work with UIKit you can head [here](link).

docs/guides/live-video/get-started.mdx

@@ -0,0 +1,74 @@
+---
+title: 'Getting Started'
+sidebar_position: 3
+---
+
+import ThemedImage from '@theme/ThemedImage';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+To get started with creating live video calls from Dyte, make sure to finish these steps and then move on to integrating Dyte in your application.
+
+### Step 1: Register in the Developer Portal
+
+To get started with Dyte, you must first register an account on the [Developer portal](https://dev.dyte.io).
+
+### Step 2: Create an Organisation
+
+After you have created your account on Dyte, it is necessary for you to create an orgnisation. All meeting, sessions, logs and recordings are created within an organisation.
+
+### Step 3: Get your API Keys
+
+Copy the [API Keys](https://dev.dyte.io/apikeys) for your organization from
+the Developer portal. The API Key is unique to your organization and is
+required as an authorization header to use Dyte REST APIs.
+
+<ThemedImage
+  alt="API key"
+  width="600"
+  height="300"
+  sources={{
+    light: useBaseUrl('/static/dev-portal/api-key-light.png'),
+    dark: useBaseUrl('/static/dev-portal/api-key-dark.png'),
+  }}
+/>
+
+### Step 4: Create Presets
+
+A preset is a set of permissions and UI configurations that would be
+applied to a participant. For more information, see [Add Presets](/guides/capabilities/presets).
+
+1. In the [Developer Portal](https://dev.dyte.io/), click **Presets**, and click **Create New**.
+   <ThemedImage
+     alt="Create preset"
+     width="600"
+     height="300"
+     sources={{
+       light: useBaseUrl('/static/dev-portal/create-preset-light.png'),
+       dark: useBaseUrl('/static/dev-portal/create-preset-dark.png'),
+     }}
+   />
+2. <span>
+     In the <b>Select Meeting Type</b>, select <b>Group Call</b>.
+   </span>
+   <ThemedImage
+     alt="Create preset"
+     width="600"
+     height="300"
+     sources={{
+       light: useBaseUrl('/static/preset/' + 'group-call' + '.png'),
+       dark: useBaseUrl('/static/preset/' + 'group-call' + '.png'),
+     }}
+   />
+
+3. Set permissions and UI configurations. For more details on what permissions you can change, refer to the [Presets](/guides/capabilities/presets) guide.
+
+4. Once you’ve made all the required changes to your preset, click **Save** at the right-corner.
+   <img
+     src="/static/preset/savepreset.png"
+     width="600"
+     height="300"
+     alt="preset-save"
+   />
+5. Enter the name for your preset and click **Save**. The preset name is often used in the code so we recommend naming it based on the user role it serves.
+
+The next guide (Integrate Dyte)[./build-live-video-app] will cover the steps to use Dyte in your application!

docs/guides/live-video/integrate-dyte.mdx

@@ -0,0 +1,42 @@
+---
+title: 'Integrate Dyte'
+sidebar_position: 4
+---
+
+Now that you have your Dyte API Key, you can move on to integrating Dyte's REST APIs with your server code.
+
+This diagram walks you through the flow request of starting a live video call via Dyte.
+![Diagram explaining how Dyte works](/static/home/how-dyte-works-v2.png)
+
+It all starts with creating a meeting which is needed to start a live video call. After a meeting has been created on Dyte's server, you can now add participants to the meeting. Each participant is given an `authToken` which is necessary for your client side to further interact with the meeting.
+
+:::info
+To learn move about these terms, refer to our [Concepts](./concepts/concepts-live-video.mdx) page.
+:::
+
+Let's dive into more details about this.
+
+### Step 1: Create a meeting
+
+There are two ways to go about creating a meeting.
+
+1. Create a Dyte meeting using the [Create Meeting API](/api#/operations/create_meeting). The API returns a unique identifier for your meeting which you will be using later.
+
+2. If you are going for a no-code integration, you can also create a meeting using the [Developer Portal](https://accounts.dyte.io/) and copy the unique identifier for the meeting.
+
+Dyte meetings do not have a specific date or time associated to them, so you can either create
+them in advance or right when users need to join the meeting. Your server has complete control over when to distribute the `authToken`.
+
+### Step 2: Add Participants
+
+Now that you have a meeting, it's time to add participants to the meeting. There are two ways in which you can add participants to a meeting:
+
+1. Call the [Add Participant API](/api#/operations/add_participant) with the unique identifier of your meeting. To specify the preset that your participant should use, remember to pass the `preset_name` parameter as well.
+
+2. Similar to creating a meeting, you can also add participants to the meeting through the [Developer Portal](https://accounts.dyte.io/) and share the `authToken` with the respective participants.
+
+On successfully creating a participant, you will recieve an authorization token (`authToken`) for each participant. Your server controls when to distribute this token to the participants. Your client side needs this token to connect and interact with the meeting.
+
+## What's Next?
+
+You have completed the basic steps needed to integrate dyte on the server side. Now, you can move now to integrating dyte on your client side or you can learn more about the different [REST APIs](/api/) that Dyte provides and how you can utilise them.

docs/partials/_nocode-quickstart.mdx

@@ -0,0 +1,53 @@
+<span class="mb-2 block">
+
+You can easily integrate Dyte's {props.product} into your project without any SDK
+using an <b>iFrame</b>. An iFrame is a quick and easy way to embed a {props.product} solution into your own website or application without modifying the underlying
+code.
+
+</span>
+
+You can use an iFrame for a variety of reasons, including lack of resources, technical expertise, or simply a preference for a lighter integration method. All you need to do is add a small piece of HTML code to your web application.
+
+## Prerequisites
+
+- Create a [Dyte Developer Account](https://dev.dyte.io/)
+- Create [Presets](https://dev.dyte.io/roles-presets)
+- Create a
+  [Dyte Meeting](https://docs.dyte.io/api/?v=v2#/operations/create_meeting)
+- [Add Participant](https://docs.dyte.io/api/?v=v2#/operations/add_participant)
+  to the meeting
+
+## Embed using an iFrame
+
+Pass your options with meeting ID and auth token in the URL query. Here's an example with all the available options:
+
+```html
+<iframe
+  src="https://app.dyte.in/v2/meeting?id=<meetingId>&authToken=<authToken>&showSetupScreen=true&disableVideoBackground=true&orgId=<orgId>"
+  allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
+/>
+```
+
+### Query Parameters
+
+| Name             | Required   | Description                                                                                                                      |
+| :--------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------- | --- |
+| `authToken`      | `required` | The token string you receive for every participant when you [add a Participant](/api/#/operations/add_participant) to a meeting. |
+| `meetingID`      | `required` | The ID of the meeting you receive when you [create a meeting](https://docs.dyte.io/api/?v=v2#/operations/create_meeting).        |
+| `endRedirectURL` | `optional` | The URL to which the meeting would be redirected on end of the meeting.                                                          |     |
+
+## Events
+
+```js
+window.addEventListener('message', receiveMessage, false);
+
+function receiveMessage(evt) {
+  if (evt.origin === 'https://app.dyte.in') {
+    const data = evt.data;
+    if (data.type === 'meetingEnded') {
+      const reason = data.kicked;
+      // take action on meeting end
+    }
+  }
+}
+```