diff --git a/sdk/android/2.0/update-a-group.mdx b/sdk/android/2.0/update-a-group.mdx index 1fb87ef63..155264a7e 100644 --- a/sdk/android/2.0/update-a-group.mdx +++ b/sdk/android/2.0/update-a-group.mdx @@ -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. + +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. + + For more information on the `Group` class, please check [here](/sdk/android/2.0/create-a-group#group-class) diff --git a/sdk/android/3.0/groups-update-group.mdx b/sdk/android/3.0/groups-update-group.mdx index 4dd862573..85fd5409e 100644 --- a/sdk/android/3.0/groups-update-group.mdx +++ b/sdk/android/3.0/groups-update-group.mdx @@ -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. + +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. + + For more information on the `Group` class, please check [here](/sdk/android/3.0/groups-create-group#group-class) diff --git a/sdk/android/update-group.mdx b/sdk/android/update-group.mdx index a122d63ea..4fbbba0e3 100644 --- a/sdk/android/update-group.mdx +++ b/sdk/android/update-group.mdx @@ -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. + +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. + + For more information on the `Group` class, please check [here](/sdk/android/create-group#group-class) diff --git a/sdk/ios/2.0/update-a-group.mdx b/sdk/ios/2.0/update-a-group.mdx index 95dbaf39e..8ce76ec55 100644 --- a/sdk/ios/2.0/update-a-group.mdx +++ b/sdk/ios/2.0/update-a-group.mdx @@ -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. + + +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. + diff --git a/sdk/ios/3.0/update-a-group.mdx b/sdk/ios/3.0/update-a-group.mdx index 95dbaf39e..8ce76ec55 100644 --- a/sdk/ios/3.0/update-a-group.mdx +++ b/sdk/ios/3.0/update-a-group.mdx @@ -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. + + +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. + diff --git a/sdk/ios/update-group.mdx b/sdk/ios/update-group.mdx index dc3794612..8b69733f5 100644 --- a/sdk/ios/update-group.mdx +++ b/sdk/ios/update-group.mdx @@ -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. + + +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. + diff --git a/sdk/javascript/2.0/groups-update-group.mdx b/sdk/javascript/2.0/groups-update-group.mdx index f41c8c4a0..a81deaa66 100644 --- a/sdk/javascript/2.0/groups-update-group.mdx +++ b/sdk/javascript/2.0/groups-update-group.mdx @@ -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. + +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. + + For more information on the `Group` class, please check [here](/sdk/javascript/2.0/groups-create-group#create-a-group). diff --git a/sdk/javascript/3.0/groups-update-group.mdx b/sdk/javascript/3.0/groups-update-group.mdx index 1be2aab56..289c8598f 100644 --- a/sdk/javascript/3.0/groups-update-group.mdx +++ b/sdk/javascript/3.0/groups-update-group.mdx @@ -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. + +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. + + For more information on the `Group` class, please check [here](/sdk/javascript/3.0/groups-create-group#create-a-group). diff --git a/sdk/javascript/update-group.mdx b/sdk/javascript/update-group.mdx index c8717d61c..113b79f8b 100644 --- a/sdk/javascript/update-group.mdx +++ b/sdk/javascript/update-group.mdx @@ -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. + +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. + + For more information on the `Group` class, please check [here](/sdk/javascript/create-group#create-a-group). diff --git a/sdk/react-native/2.0/groups-update-group.mdx b/sdk/react-native/2.0/groups-update-group.mdx index 8116276c6..e817732a4 100644 --- a/sdk/react-native/2.0/groups-update-group.mdx +++ b/sdk/react-native/2.0/groups-update-group.mdx @@ -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. + +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. + + For more information on the `Group` class, please check [here](/sdk/react-native/2.0/groups-create-group#group-class) diff --git a/sdk/react-native/3.0/groups-update-group.mdx b/sdk/react-native/3.0/groups-update-group.mdx index f1782d2bb..7ae1f917d 100644 --- a/sdk/react-native/3.0/groups-update-group.mdx +++ b/sdk/react-native/3.0/groups-update-group.mdx @@ -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. + +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. + + For more information on the `Group` class, please check [here](/sdk/react-native/3.0/groups-create-group#group-class) diff --git a/widget/html/legacy.mdx b/widget/html/legacy.mdx index 8c94b70fc..1dc701089 100644 --- a/widget/html/legacy.mdx +++ b/widget/html/legacy.mdx @@ -9,6 +9,10 @@ import ChatWidgetLegacyOverview from '/snippets/widget/legacy/overview.mdx'; + +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). + + *** ## HTML / Bootstrap / JQuery diff --git a/widget/html/overview.mdx b/widget/html/overview.mdx index f965fa64e..26789dc29 100644 --- a/widget/html/overview.mdx +++ b/widget/html/overview.mdx @@ -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. + +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). + + With CometChat Widget Builder, you can: - Embed chat and calling into any HTML page diff --git a/widget/overview.mdx b/widget/overview.mdx index 19f0e3b87..99cf06a96 100644 --- a/widget/overview.mdx +++ b/widget/overview.mdx @@ -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. + +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. + + **Quick Reference for AI Agents & Developers** - **What this page covers**: End-to-end overview of setting up the CometChat Chat Widget — from account @@ -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) + + +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. + + +#### 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