cometchat · swapnil-cometchat · Feb 11, 2026 · Feb 12, 2026 · Feb 13, 2026 · Feb 13, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 
 .kiro/
+/cometchat-uikit-react-6
diff --git a/fundamentals/extensions-overview.mdx b/fundamentals/extensions-overview.mdx
@@ -11,32 +11,32 @@ Extensions pickup where our core leaves. They help extend the functionality of C
 
 Extensions that help improve the user messaging experience. *Recommended for most apps.*
 
-[Pin message](/fundamentals/pin-message)\
 [Bitly](/fundamentals/bitly)\
-[Avatars](/fundamentals/avatars)\
-[Message shortcuts](/fundamentals/message-shortcuts)\
 [Link Preview](/fundamentals/link-preview)\
+[Message shortcuts](/fundamentals/message-shortcuts)\
+[Pin message](/fundamentals/pin-message)\
 [Rich Media Preview](/fundamentals/rich-media-preview)\
 [Save message](/fundamentals/save-message)\
 [Thumbnail Generation](/fundamentals/thumbnail-generation)\
 [TinyURL](/fundamentals/tinyurl)\
-[Voice Transcription](/fundamentals/voice-transcription)
+[Voice Transcription](/fundamentals/voice-transcription)\
+[Avatars](/fundamentals/avatars)
 
 ### User Engagement
 
 Extensions that help increase user engagement. *Recommended for advanced apps.*
 
-[Email replies](/fundamentals/email-replies)\
-[Polls](/fundamentals/polls)\
 [Giphy](/fundamentals/giphy)\
-[Mentions](/fundamentals/mentions)\
 [Message Translation](/fundamentals/message-translation)\
-[Reactions](/fundamentals/reactions)\
-[Smart Reply](/fundamentals/smart-replies)\
+[Polls](/fundamentals/polls)\
+[Reminders](/fundamentals/reminders)\
 [Stickers](/fundamentals/stickers)\
 [Stipop](/fundamentals/stickers-stipop)\
 [Tenor](/fundamentals/tenor)\
-[Reminders](/fundamentals/reminders)\
+[Email replies](/fundamentals/email-replies)\
+[Mentions](/fundamentals/mentions)\
+[Reactions](/fundamentals/reactions)\
+[Smart Reply](/fundamentals/smart-replies)\
 [Live Streaming by api.video](/fundamentals/video-broadcasting)
 
 ### Collaboration
@@ -46,12 +46,19 @@ Extensions that help with collaboration. *Recommended for advanced apps.*
 [Collaborative Whiteboard](/fundamentals/collaborative-whiteboard)\
 [Collaborative Document](/fundamentals/collaborative-document)
 
+### Security
+
+*Extensions that help you to build adding extra security to your apps.* *Recommended for live streaming and event apps.*
+
+[Disappearing messages](/fundamentals/disappearing-messages)\
+[End to End Encryption](/fundamentals/end-to-end-encryption)
+
 ### Customer Support
 
 Extensions that help you add support to your app. *Recommended for advanced apps.*
 
-[Intercom](/fundamentals/intercom)\
-[Chatwoot](/fundamentals/chatwoot)
+[Chatwoot](/fundamentals/chatwoot)\
+[Intercom](/fundamentals/intercom)
 
 ### Notifications
 
@@ -66,10 +73,3 @@ Extensions that help alert users of new messages. *Recommended for all apps.*
 *Extensions that help you to build a safe messaging environment.* *Recommended for live streaming and event apps.*
 
 [Legacy Moderation Extensions](/moderation/legacy-extensions)
-
-### Security
-
-*Extensions that help you to build adding extra security to your apps.* *Recommended for live streaming and event apps.*
-
-[Disappearing messages](/fundamentals/disappearing-messages)\
-[End to End Encryption](/fundamentals/end-to-end-encryption)
@@ -1,8 +1,16 @@
 ---
 title: "Video View Customisation"
+description: "Customize the main video container in CometChat calls — aspect ratio, full screen button, name label, and network label positioning."
 ---
 
-
+<Info>
+**Quick Reference**
+- **Class:** `CometChat.MainVideoContainerSetting`
+- **Apply via:** `CallSettingsBuilder.setMainVideoContainerSetting(videoSettings)`
+- **Customizable elements:** Aspect ratio, full screen button, name label, network label
+- **Position constants:** `POSITION_TOP_LEFT`, `POSITION_TOP_RIGHT`, `POSITION_BOTTOM_LEFT`, `POSITION_BOTTOM_RIGHT`
+- **Requires:** [Default Calling](/sdk/javascript/default-call) or [Direct Calling](/sdk/javascript/direct-call) setup
+</Info>
 
 This section will guide you to customise the main video container.
 
@@ -26,16 +34,62 @@ The `MainVideoContainerSetting` Class is the required in case you want to custom
 Example:
 
 <Tabs>
-<Tab title="TypeScript">
-```typescript
+<Tab title="JavaScript">
+```javascript
 let videoSettings = new CometChat.MainVideoContainerSetting();
 
-videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN);	
+videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN);
 videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);
 videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)");
-videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true); 
+videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);
 ```
-
 </Tab>
+<Tab title="TypeScript">
+```typescript
+let videoSettings: CometChat.MainVideoContainerSetting = new CometChat.MainVideoContainerSetting();
 
+videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN);
+videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);
+videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)");
+videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);
+```
+</Tab>
 </Tabs>
+
+<AccordionGroup>
+<Accordion title="Best Practices">
+
+| Practice | Details |
+| --- | --- |
+| Aspect ratio choice | Use `ASPECT_RATIO_CONTAIN` to show the full video without cropping; use `ASPECT_RATIO_COVER` for a full-bleed look that may crop edges |
+| Label positioning | Avoid placing the name label and network label in the same corner to prevent overlap |
+| Full screen button | Keep the full screen button visible for better UX; only hide it if your app provides its own full screen toggle |
+
+</Accordion>
+<Accordion title="Troubleshooting">
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Video settings not applied | `setMainVideoContainerSetting()` not called on `CallSettingsBuilder` | Pass the `MainVideoContainerSetting` object to `CallSettingsBuilder.setMainVideoContainerSetting()` before calling `startCall()` |
+| Labels overlapping | Multiple labels positioned in the same corner | Assign different position constants to each label |
+| Full screen button missing | Visibility set to `false` | Set the second parameter of `setFullScreenButtonParams()` to `true` |
+
+</Accordion>
+</AccordionGroup>
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Default Calling" icon="phone" href="/sdk/javascript/default-call">
+    Implement default audio/video calling.
+  </Card>
+  <Card title="Direct Calling" icon="video" href="/sdk/javascript/direct-call">
+    Implement direct calling without call events.
+  </Card>
+  <Card title="Virtual Background" icon="image" href="/sdk/javascript/virtual-background">
+    Add virtual background and blur effects.
+  </Card>
+  <Card title="Recording" icon="circle-dot" href="/sdk/javascript/recording">
+    Record calls for playback.
+  </Card>
+</CardGroup>
@@ -1,8 +1,16 @@
 ---
 title: "Virtual Background"
+description: "Implement virtual background features in CometChat video calls — background blur, custom images, and enforced backgrounds using the JavaScript SDK."
 ---
 
-
+<Info>
+**Quick Reference**
+- **Settings class:** `CometChat.VirtualBackground`
+- **Apply via:** `CallSettingsBuilder.setVirtualBackground(virtualBackground)`
+- **Toggle UI:** `CallSettingsBuilder.showVirtualBackgroundSetting(true|false)`
+- **Runtime control:** `CometChat.CallController.getInstance()` → `setBackgroundBlur()`, `setBackgroundImage()`, `openVirtualBackground()`
+- **Requires:** [Default Calling](/sdk/javascript/default-call) or [Direct Calling](/sdk/javascript/direct-call) setup
+</Info>
 
 This section will guide you to implement virtual background feature in video calls.
 
@@ -35,21 +43,17 @@ You can use the `openVirtualBackground()` method to open the virtual background
 
 <Tabs>
 <Tab title="JavaScript">
-```js
+```javascript
 let callController = CometChat.CallController.getInstance();
 callController.openVirtualBackground();
 ```
-
 </Tab>
-
 <Tab title="TypeScript">
 ```typescript
 let callController: CometChat.CallController = CometChat.CallController.getInstance();
 callController.openVirtualBackground();
 ```
-
 </Tab>
-
 </Tabs>
 
 ### Set Background Blur
@@ -58,23 +62,19 @@ You can use the `setBackgroundBlur()` method to apply background blur on the vid
 
 <Tabs>
 <Tab title="JavaScript">
-```js
+```javascript
 let callController = CometChat.CallController.getInstance();
 let blurLevel = 1;
 callController.setBackgroundBlur(blurLevel);
 ```
-
 </Tab>
-
 <Tab title="TypeScript">
 ```typescript
 let callController: CometChat.CallController = CometChat.CallController.getInstance();
 let blurLevel: number = 1;
 callController.setBackgroundBlur(blurLevel);
 ```
-
 </Tab>
-
 </Tabs>
 
 ### Set Background Image
@@ -83,23 +83,19 @@ You can use the `setBackgroundImage()`method to set the background image. This m
 
 <Tabs>
 <Tab title="JavaScript">
-```js
+```javascript
 let callController = CometChat.CallController.getInstance();
 let imageURL = "URL_OF_BACKGROUND_IMAGE";
 callController.setBackgroundImage(imageURL);
 ```
-
 </Tab>
-
 <Tab title="TypeScript">
 ```typescript
 let callController: CometChat.CallController = CometChat.CallController.getInstance();
 let imageURL: string = "URL_OF_BACKGROUND_IMAGE";
 callController.setBackgroundImage(imageURL);
 ```
-
 </Tab>
-
 </Tabs>
 
 ## Virtual Background Settings
@@ -114,3 +110,44 @@ The `VirtualBackground` Class is the required in case you want to change how the
 | `setImages(images: Array<String>)`                       | This method allows developer to add their custom background image which the end user can choose.                                                                         |
 | `enforceBackgroundBlur(enforceBackgroundBlur: number)`   | This method starts the call with background blurred. To blur the background you need to pass an integer value between 1-99 which decides the blur level. **Default = 0** |
 | `enforceBackgroundImage(enforceBackgroundImage: string)` | This methods starts the call with the provided background image.                                                                                                         |
+
+<AccordionGroup>
+<Accordion title="Best Practices">
+
+| Practice | Details |
+| --- | --- |
+| Blur level range | Use values between 1-99 for `enforceBackgroundBlur()`. Higher values produce stronger blur. A value of 0 disables blur |
+| Image hosting | Host background images on a CDN for fast loading. Large images may cause lag when applied |
+| Enforce vs allow | Use `enforceBackgroundBlur()` or `enforceBackgroundImage()` when you want a mandatory background (e.g., for privacy). Use `allowBackgroundBlur()` and `allowUserImages()` to let users choose |
+| Custom buttons | Use `CallController` methods (`setBackgroundBlur`, `setBackgroundImage`, `openVirtualBackground`) when building a custom UI instead of the default CometChat menu |
+
+</Accordion>
+<Accordion title="Troubleshooting">
+
+| Symptom | Cause | Fix |
+| --- | --- | --- |
+| Virtual background option not visible | `showVirtualBackgroundSetting(false)` was set | Set `showVirtualBackgroundSetting(true)` in `CallSettingsBuilder` |
+| Background blur not applied on call start | `enforceBackgroundBlur()` not set or set to 0 | Pass a value between 1-99 to `enforceBackgroundBlur()` |
+| Custom images not appearing | `setImages()` not called or empty array passed | Pass a non-empty array of valid image URLs to `setImages()` |
+| `CallController.getInstance()` returns null | Called before the call has started | Only use `CallController` methods after `startCall()` has been invoked |
+| User can't upload their own images | `allowUserImages(false)` was set | Set `allowUserImages(true)` in the `VirtualBackground` configuration |
+
+</Accordion>
+</AccordionGroup>
+
+## Next Steps
+
+<CardGroup cols={2}>
+  <Card title="Video View Customisation" icon="sliders" href="/sdk/javascript/video-view-customisation">
+    Customize the main video container layout.
+  </Card>
+  <Card title="Recording" icon="circle-dot" href="/sdk/javascript/recording">
+    Record calls for playback.
+  </Card>
+  <Card title="Presenter Mode" icon="presentation-screen" href="/sdk/javascript/presenter-mode">
+    Enable screen sharing and presenter mode.
+  </Card>
+  <Card title="Custom CSS" icon="paintbrush" href="/sdk/javascript/custom-css">
+    Customize the calling UI appearance.
+  </Card>
+</CardGroup>