Skip to content

Docs/user ticket feedback #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
swapnil-cometchat wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Docs/user ticket feedback #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7114d5c
for this ticket documentation needed to say if someone updates the gr…
swapnil-cometchat Mar 10, 2026
32fd848
for both legacy widget and new widget there is no documentation sayin…
swapnil-cometchat Mar 10, 2026
0198640
what the widget does and does not allow
swapnil-cometchat Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions sdk/android/2.0/update-a-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After the successful update of the group, you will receive an instance of `Group` class containing updated information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/android/2.0/create-a-group#group-class)
4 changes: 4 additions & 0 deletions sdk/android/3.0/groups-update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,4 +66,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After the successful update of the group, you will receive an instance of `Group` class containing updated information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/android/3.0/groups-create-group#group-class)
4 changes: 4 additions & 0 deletions sdk/android/update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After the successful update of the group, you will receive an instance of `Group` class containing updated information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/android/create-group#group-class)
4 changes: 4 additions & 0 deletions sdk/ios/2.0/update-a-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,7 @@ This method takes an instance of the `Group` class as a parameter that should co
| group | an instance of class `Group` |

After a successful update of the group, you will receive an instance of the `Group` class containing update information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>
4 changes: 4 additions & 0 deletions sdk/ios/3.0/update-a-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,7 @@ This method takes an instance of the `Group` class as a parameter that should co
| group | an instance of class `Group` |

After a successful update of the group, you will receive an instance of the `Group` class containing update information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>
4 changes: 4 additions & 0 deletions sdk/ios/update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,7 @@ This method takes an instance of the `Group` class as a parameter that should co
| group | an instance of class `Group` |
After a successful update of the group, you will receive an instance of the `Group` class containing update information of the group.
<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>
4 changes: 4 additions & 0 deletions sdk/javascript/2.0/groups-update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After a successful update of the group, you will receive an instance of `Group` class containing update information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/javascript/2.0/groups-create-group#create-a-group).
4 changes: 4 additions & 0 deletions sdk/javascript/3.0/groups-update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After a successful update of the group, you will receive an instance of `Group` class containing update information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/javascript/3.0/groups-create-group#create-a-group).
4 changes: 4 additions & 0 deletions sdk/javascript/update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After a successful update of the group, you will receive an instance of `Group` class containing update information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/javascript/create-group#create-a-group).
4 changes: 4 additions & 0 deletions sdk/react-native/2.0/groups-update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,4 +39,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After a successful update of the group, you will receive an instance of `Group` class containing update information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/react-native/2.0/groups-create-group#group-class)
4 changes: 4 additions & 0 deletions sdk/react-native/3.0/groups-update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After a successful update of the group, you will receive an instance of `Group` class containing update information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/react-native/3.0/groups-create-group#group-class)
4 changes: 4 additions & 0 deletions sdk/react-native/update-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,8 @@ This method takes an instance of the `Group` class as a parameter which should c

After a successful update of the group, you will receive an instance of `Group` class containing update information of the group.

<Note>
There is no real-time event listener available to receive updated group details when the `updateGroup()` method is called. To get the latest group information, you need to fetch the group details again using the appropriate method.
</Note>

For more information on the `Group` class, please check [here](/sdk/react-native/create-group#group-class)
4 changes: 4 additions & 0 deletions widget/html/legacy.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import ChatWidgetLegacyOverview from '/snippets/widget/legacy/overview.mdx';

<ChatWidgetLegacyOverview />

<Warning>
The Legacy Chat Widget is not customizable beyond the configuration options documented below. If you require deeper customization, consider using our [UI Kits](/ui-kit/react/overview) instead. See the [complete capabilities and limitations list](/widget/overview#widget-capabilities--limitations).
</Warning>

***

## HTML / Bootstrap / JQuery
Expand Down
4 changes: 4 additions & 0 deletions widget/html/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ description: "CometChat Widget Builder for HTML is a no-code solution that lets

It provides a ready-to-use chat widget backed by CometChat's real-time infrastructure — no frontend framework required.

<Warning>
The Chat Widget is not customizable beyond the configuration options available in the Widget Builder dashboard. If you require deeper customization, consider using our [UI Kits](/ui-kit/react/overview) instead. See the [complete capabilities and limitations list](/widget/overview#widget-capabilities--limitations).
</Warning>

With CometChat Widget Builder, you can:

- Embed chat and calling into any HTML page
Expand Down
128 changes: 128 additions & 0 deletions widget/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ description: "Learn how to integrate and customize the CometChat Chat Widget wit

The Chat Widget enables you to embed a fully functional chat interface into your application with minimal setup. By following this guide, you will have a customized chat experience ready for your users in six simple steps.

<Warning>
The Chat Widget is not customizable beyond the configuration options available in the Widget Builder dashboard. If you require deeper customization, consider using our [UI Kits](/ui-kit/react/overview) instead. See the [complete capabilities and limitations list](#widget-capabilities--limitations) below.
</Warning>

<Info>
**Quick Reference for AI Agents & Developers** - **What this page covers**:
End-to-end overview of setting up the CometChat Chat Widget — from account
Expand Down Expand Up @@ -60,6 +64,130 @@ The Chat Widget enables you to embed a fully functional chat interface into your
- **VariantID**
3. Follow the documentation to implement the code snippet.

## Widget Capabilities & Limitations

The Chat Widget is designed for quick integration with minimal code. Below is a complete breakdown of what the widget supports and what requires UI Kits or SDKs.

### What the Widget CAN Do

#### Dashboard Configuration (No Code)
| Feature | Description |
| ------- | ----------- |
| Theme Selection | Choose between system, light, and dark themes |
| Color Customization | Adjust primary colors to match your brand |
| Typography Settings | Configure font styles through the dashboard |
| Feature Toggles | Enable/disable features like Block Users, Threaded Messages, Read Receipts |
| Live Preview | Preview changes before publishing |

#### Layout Options
| Feature | Description |
| ------- | ----------- |
| Embedded Layout | Widget appears inline within a target div element |
| Docked Layout | Floating chat bubble that expands on click |
| Width & Height | Configurable dimensions (e.g., `450px`, `80vh`) |
| Docked Alignment | Position docked widget on left or right side |
| Rounded Corners | Enable/disable rounded corners on the widget |

#### Authentication Methods
| Feature | Description |
| ------- | ----------- |
| Guest Mode | Anonymous chat without user accounts |
| UID Login | Create and log in users on-the-fly using unique IDs |
| Auth Token Login | Secure server-side authentication |
| User Profile | Set name, avatar, and profile link for users |

#### JavaScript API Controls
| Feature | Description |
| ------- | ----------- |
| Open Specific Chat | `chatWithUser(UID)` / `chatWithGroup(GUID)` |
| Initiate Calls | `callUser(UID)` / `callGroup(GUID)` |
| Toggle Docked Widget | `openOrCloseChat(true/false)` |
| Event Listeners | Listen for `onMessageReceived`, `onOpenChat`, `onCloseChat`, `onActiveChatChanged`, `onLogout` |
| Create/Update Users | Create users on-the-fly with `createOrUpdateUser()` |
| Create/Update Groups | Create groups on-the-fly with `createOrUpdateGroup()` |
| Localization | Change widget language with `localize(LANGUAGE_CODE)` |
| Storage Mode | Choose between session storage and local storage |
| Show/Hide UI Elements | Toggle group action messages, unread count badge |

#### Supported Languages
English, Chinese, Spanish, Hindi, Russian, Arabic, Portuguese, Malay, French, German, Swedish, Lithuanian, Hungarian, Dutch, Italian, Japanese, Korean, Turkish

#### Messaging Features (via Dashboard Toggles)
- One-on-one messaging
- Group messaging
- Read receipts
- Typing indicators
- Threaded messages
- Message reactions
- File sharing
- Voice & video calling

---

### What the Widget CANNOT Do (Requires UI Kit or SDK)

<Warning>
The following customizations are NOT possible with the Chat Widget. You must use [UI Kits](/ui-kit/react/overview) or [SDKs](/sdk/javascript/overview) instead.
</Warning>

#### UI/UX Customization
| Limitation | Alternative |
| ---------- | ----------- |
| Custom component layouts | Use UI Kit with custom components |
| Custom message bubbles | Use UI Kit's message template system |
| Custom chat headers | Use UI Kit's header customization |
| Custom input composers | Use UI Kit's composer customization |
| Custom navigation/tabs | Use UI Kit's navigation components |
| Custom animations | Use UI Kit with CSS/animation libraries |
| Custom fonts (beyond dashboard options) | Use UI Kit with custom CSS |
| Pixel-perfect design matching | Use UI Kit for full control |

#### Advanced Features
| Limitation | Alternative |
| ---------- | ----------- |
| Custom message types | Use SDK to create custom message categories |
| Custom metadata handling | Use SDK's metadata APIs |
| Custom real-time listeners | Use SDK's listener system |
| Offline message queue customization | Use SDK's offline handling |
| Custom encryption | Use SDK with your encryption layer |
| Custom push notification handling | Use SDK with push notification setup |
| Webhooks integration | Use SDK with server-side webhooks |

#### Business Logic
| Limitation | Alternative |
| ---------- | ----------- |
| Custom user authentication flows | Use SDK's authentication APIs |
| Custom group membership rules | Use SDK's group management APIs |
| Custom moderation workflows | Use SDK with moderation extensions |
| Custom message filtering | Use SDK's message filtering APIs |
| Custom presence logic | Use SDK's presence APIs |
| Integration with external systems | Use SDK with your backend |

#### Platform-Specific
| Limitation | Alternative |
| ---------- | ----------- |
| Native mobile apps (iOS/Android) | Use Mobile UI Kits or SDKs |
| React Native apps | Use React Native UI Kit |
| Flutter apps | Use Flutter UI Kit |
| Desktop applications | Use SDKs with Electron or similar |

---

### When to Use Widget vs UI Kit vs SDK

| Use Case | Recommended Solution |
| -------- | -------------------- |
| Quick prototype or MVP | **Widget** |
| Marketing/landing pages with chat | **Widget** |
| Simple customer support chat | **Widget** |
| Branded chat matching your design system | **UI Kit** |
| Custom chat features or workflows | **UI Kit** |
| Full control over every UI element | **UI Kit** |
| Building chat into existing app architecture | **SDK** |
| Custom real-time features beyond chat | **SDK** |
| Server-side integrations and webhooks | **SDK** |
| Native mobile applications | **Mobile UI Kit or SDK** |

## Next Steps

<CardGroup cols={2}>
Expand Down