Reworked circle component docs.

docs/guides/developing-antmedia-server/circle-component-usage.md

@@ -8,33 +8,61 @@ sidebar_position: 5
 
 # Circle App Component Usage
 
-Circle is a self-hosted, open source video conferencing software solution built by Ant Media.  It can be deployed anywhere, both locally or in the cloud. 
+[Circle](https://github.com/ant-media/conference-call-application) is a self-hosted, open source video conferencing solution built by Ant Media that can be deployed anywhere.
 
-It offers the highest quality with the lowest latency, and it can accommodate up to 200 participants. If you are concerned about Privacy or being behind a firewall, this is the best solution for you.
+Locally or in the cloud. It delivers high quality video with ultra-low latency and supports up to 200 participants per room. If you're concerned about **privacy** or operating behind a **firewall**, this is the ideal solution.
 
-This documentation will explain how you can integrate the Circle application into any existing webpage.
+This guide shows you how to integrate Circle's frontend component into your existing web application, allowing you to embed a complete video conferencing interface directly into your webpage so users can join conferences without leaving your app.
 
 
+## Prerequisites
 
-1. Clone [conference-call-application](https://github.com/ant-media/conference-call-application) repository.
-2. Install Node v20 LTS version and NPM v9
-3. Open terminal and go to react folder 
-4. Run ```npm install``` command
-5. Run ```npm run build``` command
-6. Go to build folder inside react folder
-7. Copy static folder, into your web application's path
-8. Open the HTML page that you wanted to add Circle App.
-9. Add CSS and JS files that we copy from conference-call-application/react/build folder into HTML header. NOTE: File names will change after every build process.
+- **Ant Media Enterprise Edition** 
+- **Node.js**: v20 LTS version
+- **NPM**: v9 or higher
 
-```html
-<script defer="defer" src="./static/js/main.9c1bebc8.js"></script>
-<link href="./static/css/main.24ed3d1e.css" rel="stylesheet" />
-```
+## Integration Steps
 
-10. Add following div element into the section that you wanted to add Circle App
+1. Clone the [conference-call-application](https://github.com/ant-media/conference-call-application) repository:
+   ```bash
+   git clone https://github.com/ant-media/conference-call-application.git
+   ```
 
-```html
-<div id="root" data-room-name="<room_name>" data-websocket-url="wss://<ip_address>:<port>/<application_name>/websocket" style="background-color: #001D1A; box-sizing: border-box; height: 480; width: 640; position: relative;"></div>
-```
+2. Navigate to the react directory and install dependencies:
+   ```bash
+   cd conference-call-application/react
+   npm install --legacy-peer-deps
+   ```
 
-11. Replace `room_name`, `ip_address`, `port` and `application_name` variables and it's ready to use.
+3. Build the application:
+   ```bash
+   npm run build
+   ```
+
+4. Copy static assets:
+   - Go to the `build` folder inside the `react` directory
+   - Copy the entire `static` folder to your web application's public path
+
+5. Include CSS and JS files in your HTML header:
+   ```html
+   <script defer="defer" src="./static/js/main.9c1bebc8.js"></script>
+   <link href="./static/css/main.24ed3d1e.css" rel="stylesheet" />
+   ```
+   **Note**: File names change with each build. Check the actual filenames in your build folder.
+
+6. Add the Circle component container to your webpage:
+   ```html
+   <div id="root" 
+        data-room-name="<room_name>" 
+        data-websocket-url="wss://<ip_address>:<port>/<application_name>/websocket" 
+        style="background-color: #001D1A; box-sizing: border-box; height: 480px; width: 640px; position: relative;">
+   </div>
+   ```
+
+7. Configure the parameters:
+   - Replace `<room_name>` with your desired room identifier
+   - Replace `<ip_address>` with your Ant Media Server IP address  
+   - Replace `<port>` with your server port (typically 5443 for HTTPS)
+   - Replace `<application_name>` with your application name
+
+That's it! The Circle conference component will now render within your application, allowing users to join video conferences directly from your webpage.