diff --git a/docs.json b/docs.json index e7ad84fb..06f96992 100644 --- a/docs.json +++ b/docs.json @@ -247,13 +247,11 @@ "pages": [ "/widget/html/overview", "/widget/html/integration", - "/widget/html/advanced", + "/widget/html/advanced", { - "group": "Legacy", + "group": " ", "pages": [ - "/widget/html/legacy/overview", - "/widget/html/legacy/html-bootstrap-jquery", - "/widget/legacy/custom-build" + "/widget/html/legacy" ] } ] @@ -265,10 +263,9 @@ "/widget/wordpress/overview", "/widget/wordpress/integration", { - "group": "Legacy", + "group": " ", "pages": [ - "/widget/wordpress/legacy/overview", - "/widget/wordpress/legacy/wordpress-buddypress" + "/widget/wordpress/legacy" ] } ] @@ -5748,7 +5745,7 @@ }, { "source": "/widget/custom-build", - "destination": "/widget/legacy/custom-build" + "destination": "/widget/html/legacy" }, { "source": "/ui-kit/react/builder-integration", @@ -5800,15 +5797,35 @@ }, { "source": "/widget/legacy/overview", - "destination": "/widget/html/legacy/overview" + "destination": "/widget/html/legacy" }, { "source": "/widget/legacy/wordpress-buddypress", - "destination": "/widget/wordpress/legacy/wordpress-buddypress" + "destination": "/widget/wordpress/legacy" }, { "source": "/widget/legacy/html-bootstrap-jquery", - "destination": "/widget/html/legacy/html-bootstrap-jquery" + "destination": "/widget/html/legacy" + }, + { + "source": "/widget/legacy/custom-build", + "destination": "/widget/html/legacy" + }, + { + "source": "/widget/html/legacy/overview", + "destination": "/widget/html/legacy" + }, + { + "source": "/widget/html/legacy/html-bootstrap-jquery", + "destination": "/widget/html/legacy" + }, + { + "source": "/widget/wordpress/legacy/overview", + "destination": "/widget/wordpress/legacy" + }, + { + "source": "/widget/wordpress/legacy/wordpress-buddypress", + "destination": "/widget/wordpress/legacy" }, { "source": "/widget/ai-agents", @@ -5922,4 +5939,4 @@ "redirect": true } } -} \ No newline at end of file +} diff --git a/moderation/legacy-extensions.mdx b/moderation/legacy-extensions.mdx index 5cb2366d..258bb16a 100644 --- a/moderation/legacy-extensions.mdx +++ b/moderation/legacy-extensions.mdx @@ -1,6 +1,6 @@ --- title: "Legacy Moderation Extensions" -sidebarTitle: "Legacy Extensions" +sidebarTitle: "Moderation (Legacy)" --- diff --git a/widget/html/legacy/html-bootstrap-jquery.mdx b/widget/html/legacy.mdx similarity index 79% rename from widget/html/legacy/html-bootstrap-jquery.mdx rename to widget/html/legacy.mdx index 27d6952e..b79285cc 100644 --- a/widget/html/legacy/html-bootstrap-jquery.mdx +++ b/widget/html/legacy.mdx @@ -1,10 +1,21 @@ --- -title: "HTML / Bootstrap / JQuery" +title: "HTML Widget (Legacy)" +sidebarTitle: "HTML Widget (Legacy)" --- -## Before getting started +import ChatWidgetLegacyOverview from '/snippets/widget/legacy/overview.mdx'; -Go through the [overview](/widget/overview) to set up Chat Widget from the CometChat Dashboard. +## Overview + + + +*** + +## HTML / Bootstrap / JQuery + +### Before getting started + +Go through the [overview](#overview) to set up Chat Widget from the CometChat Dashboard. Once you’ve created a widget, as shown in the image below. @@ -17,17 +28,17 @@ You have an option of loading the Chat Widget in: 1. Embedded Layout 2. Docked Layout -## Embedded Layout +### Embedded Layout -You may simply copy-paste the code below to run the Chat Widget in Embedded Layout +You may simply copy-paste the code below to run the Chat Widget in Embedded Layout. -Replace APP\_ID, APP\_REGION, AUTH\_KEY, WIDGET\_ID with your CometChat App ID, Region, Auth Key, and Widget ID in the below code. +Replace APP_ID, APP_REGION, AUTH_KEY, WIDGET_ID with your CometChat App ID, Region, Auth Key, and Widget ID in the below code. Replace UID with id of the user you want to login with. @@ -96,17 +107,17 @@ To launch an Embedded Widget, pass a configuration object to `launch` method wit | defaultID | To show a default logged in user or group in your chat a.Use UID of a user for one-on-one conversations b.Use GUID for group conversations | | defaultType | Either `user` or `group` depending upon the defaultID | -## Docked Layout +### Docked Layout -You may simply copy-paste the code below to run the Chat Widget in Docked Layout +You may simply copy-paste the code below to run the Chat Widget in Docked Layout. -Replace APP\_ID, APP\_REGION, AUTH\_KEY, WIDGET\_ID with your CometChat App ID, Region, Auth Key, and Widget ID in the below code. +Replace APP_ID, APP_REGION, AUTH_KEY, WIDGET_ID with your CometChat App ID, Region, Auth Key, and Widget ID in the below code. Replace UID with id of the user you want to login with. @@ -190,9 +201,9 @@ Make sure you specify a different and unique `target` if you intend to launch an -## Advanced Features +### Advanced Features -### Open or close chat window +#### Open or close chat window Chat window of docked layout can be opened/closed using the below method. This method can be triggered on the click event of any element of your webpage. @@ -212,7 +223,7 @@ It takes the following parameters: | --------- | ----------------------------------------------------------------------------------------------------- | -------- | | FLAG | Value could be *true* or *false* *true* will open the chat window *false* will close the chat window. | Required | -### Chat with a particular user +#### Chat with a particular user This method will open a particular user chat window. This method can be triggered by the click event of any element of your webpage. @@ -232,7 +243,7 @@ It takes the following parameters: | --------- | ---------------------------------------- | -------- | | UID | The ID of the user you want to chat with | Required | -### Chat with a particular group +#### Chat with a particular group This method will open a particular group chat window. This method can be triggered by the click event of any element of your webpage. @@ -248,11 +259,11 @@ CometChatWidget.chatWithGroup(GUID); It takes the following parameters: -| Parameter | Description | Type | -| --------- | ----------------------------------------- | -------- | -| GUID | The ID of the group you want to chat with | Required | +| Parameter | | Description | Type | +| --------- | - | ---------------------------------------------------- | -------- | +| GUID | | The ID of the group you want to initiate a call with | Required | -### Initiate calls with a particular user +#### Initiate calls with a particular user This method will initiate a call with the user. This method can be triggered by the click event of any element of your web page. @@ -272,7 +283,7 @@ It takes the following parameters: | --------- | ---------------------------------------------------- | -------- | | UID | The ID of the user you want to initiate a call with. | Required | -### Initiate calls with a particular group +#### Initiate calls with a particular group This method will initiate a call with the group. This method can be triggered by the click event of any element of your web page. @@ -292,7 +303,7 @@ It takes the following parameters: | --------- | - | ---------------------------------------------------- | -------- | | GUID | | The ID of the group you want to initiate a call with | Required | -### Message Listener +#### Message Listener We have provided a callback that is fired every time a message is received. You can use this to show Custom Notifications on your website or perform some other custom action as per your requirement. @@ -314,7 +325,7 @@ CometChatWidget.on("onMessageReceived", (message) => { -### Chat open state listener +#### Chat open state listener We have provided a callback that is fired every time the docked layout of the chat widget is in an open state. You can use this to perform some custom action as per your requirement. @@ -336,7 +347,7 @@ CometChatWidget.on("openChat", (args) => { -### Chat closed state listener +#### Chat closed state listener We have provided a callback that is fired every time the docked layout of the chat widget is in a closed state. You can use this to perform some custom action as per your requirement. @@ -358,7 +369,7 @@ CometChatWidget.on("closeChat", (args) => { -### Click listener +#### Click listener We have provided a callback that is fired every time a user or group is clicked on the sidebar. You can use this to perform some custom action as per your requirement. @@ -380,7 +391,7 @@ CometChatWidget.on("onItemClick", (args) => { -### Localization +#### Localization With language localization, our Chat Widget adapts to the language of a specific country or region. Chat Widget allows you to detect the language of your users based on their browser settings and set the language of the widget accordingly. Currently, we support the following 12 languages for localization: @@ -412,11 +423,11 @@ It takes the following parameters: | Parameter | Description | Type | | -------------- | ------------------------------------------------- | -------- | -| LANGUAGE\_CODE | The language code the texts to be translated into | Required | +| LANGUAGE_CODE | The language code the texts to be translated into | Required | -### User/Group Management +#### User/Group Management -#### Create a user on-the-fly +##### Create a user on-the-fly This saves you the hassle of creating users beforehand from the CometChat Pro Dashboard. In order to create a user on-the-fly, you can call the `createOrUpdateUser()` method on the CometChatWidget class. @@ -466,10 +477,10 @@ It takes a configuration object with the following keys: | ------------- | ------------------------------------------- | -------- | | UID | The ID of the user to be created and log in | Required | | NAME | The username associated with the user | Required | -| AVATAR\_URL | URL to profile picture of the user | Optional | -| PROFILE\_LINK | URL to profile page | Optional | +| AVATAR_URL | URL to profile picture of the user | Optional | +| PROFILE_LINK | URL to profile page | Optional | -#### Create a group on-the-fly +##### Create a group on-the-fly This saves you the hassle of creating groups beforehand from the CometChat Pro Dashboard. In order to create a group on-the-fly, you can call the `createOrUpdateGroup()` method on the CometChatWidget class. @@ -510,12 +521,12 @@ It takes a configuration object with the following keys: | Parameter | Description | Type | | ----------- | ----------------------------------------------------------------------------------------------------- | -------- | | GUID | The group will be created with the mentioned ID | Required | -| GROUP\_NAME | The name associated with the group being created | Required | -| GROUP\_TYPE | The type of group that you want to create. Type of the group can be: 1. Public 2. Password 3. Private | Required | +| GROUP_NAME | The name associated with the group being created | Required | +| GROUP_TYPE | The type of group that you want to create. Type of the group can be: 1. Public 2. Password 3. Private | Required | | PASSWORD | The group password when groupType is set to 'Password' | Required | -| ICON\_URL | An URL to group icon | Optional | +| ICON_URL | An URL to group icon | Optional | -### User Logout +#### User Logout When your user logs out from the website, you can also log out the user from Chat Widget by calling the `logout()` method of the `CometChatWidget` class. @@ -532,7 +543,7 @@ CometChatWidget.logout().then(response => { -### Security Measures using Auth Token +#### Security Measures using Auth Token If you wish to manage the Auth Key and generate Auth Token from your server application. We recommended you follow the below steps. @@ -544,7 +555,7 @@ The below code can be copy-pasted to launch your chat widget using Auth Token -Replace APP\_ID, APP\_REGION, AUTH\_TOKEN, WIDGET\_ID with your CometChat App ID, Region, Auth Token, and Widget ID in the below code. +Replace APP_ID, APP_REGION, AUTH_TOKEN, WIDGET_ID with your CometChat App ID, Region, Auth Token, and Widget ID in the below code. Replace UID with id of the user you want to login with. @@ -656,3 +667,148 @@ To launch an embedded/docked widget, pass a configuration object to the launch m | width | Width of the widget | | defaultID | To show a default logged in user or group in your chat a.Use UID of a user for one - one conversations b.Use GUID for group conversations | | defaultType | Either user or group depending upon the defaultID | + +*** + +## Custom Build + +Deploy a custom build of the chat widget on your own server. + +### Installation steps + +1. Clone the repository + +```bash +git clone https://github.com/cometchat-pro/web-chat-widget-custom +``` + +2. Navigate to the project directory and set your CDN URL in `CONSTS.js` + +```bash +cd CometChatWorkspace +``` + +```javascript +// EG: If URL is set as https://your_domain.com/widget +// cometchatwidget.js will be available at https://your_domain.com/widget/cometchatwidget.js +module.exports = { + URL: "https://your_domain.com/widget", +} +``` + +3. Install dependencies + +```bash +npm install +``` + +4. Build the custom widget + +```bash +npm run build:custom +``` + +5. Copy the contents of the `build` directory to your website’s source. + +### Usage + +Update the widget CDN link in your installation code. It should match the URL you configured in `CONSTS.js`. + + + +```html + + + + + + + +
+ + + + +``` + + + + +```html + + + + + + + + + + + +``` + + + + diff --git a/widget/html/legacy/overview.mdx b/widget/html/legacy/overview.mdx deleted file mode 100644 index 9fc6fa2f..00000000 --- a/widget/html/legacy/overview.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: "Overview" ---- - -import ChatWidgetLegacyOverview from '/snippets/widget/legacy/overview.mdx'; - - \ No newline at end of file diff --git a/widget/legacy/custom-build.mdx b/widget/legacy/custom-build.mdx deleted file mode 100644 index 3295a941..00000000 --- a/widget/legacy/custom-build.mdx +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: "Custom Build" ---- - -Deploy a custom build of the chat widget on your deployment server. - -## Installation Steps - -1. Clone this repository - -```bash -git clone https://github.com/cometchat-pro/web-chat-widget-custom -``` - -2. Navigate to the *CometChatWorkspace* directory and replace the URL with your website URL in the CONSTS.js file - -```bash -cd CometChatWorkspace -``` - -```javascript -// EG: If URL is set as https://your_domain.com/widget -// cometchatwidget.js will be available at https://your_domain.com/widget/cometchatwidget.js -module.exports = { - URL: "https://your_domain.com/widget", -} -``` - -3. Install the dependencies - -```bash -npm install -``` - -4. Build the project using the below command - -```bash -npm run build:custom -``` - -5. Copy all the files from the build directory to your website source code - -## Usage - -Update the widget's CDN link in the installation code.It will be based on the URL mentioned in the CONSTS.js file. - - - -```html - - - - - - - -
- - - - -``` - - - - -```html - - - - - - - - - - - -``` - - - - diff --git a/widget/wordpress/legacy.mdx b/widget/wordpress/legacy.mdx new file mode 100644 index 00000000..a3667efc --- /dev/null +++ b/widget/wordpress/legacy.mdx @@ -0,0 +1,245 @@ +--- +title: "WordPress Widget (Legacy)" +sidebarTitle: "WordPress Widget (Legacy)" +--- + +import ChatWidgetLegacyOverview from '/snippets/widget/legacy/overview.mdx'; + +## Overview + + + +*** + +## WordPress / BuddyPress + +### Before getting started + +Go through the [overview](#overview) to set up Chat Widget from the CometChat Dashboard. + +### Installation + +1. [Download the CometChat Pro](https://kernl.us/api/v1/archive/688bbf1f5a0dc110ce1bfafe) plugin. +2. In WordPress Admin, go to **Plugins → Add New**. + + + + + +3. Click **Upload Plugin**, choose the zip, then click **Install Now**. + + + + + +4. After upload completes, click **Activate Plugin**. + + + + + +### Configuration + +1. Get **App ID**, **Region**, **REST API Key**, and **Auth Key** from **CometChat Dashboard → Chats → Widget**. + + + + + +2. In WordPress go to **Settings → CometChat Pro**, then set: + +* `App ID` +* `Region` +* `REST API Key` +* `Auth Key` + + + + + +3. Click **Update Settings**. The logged-in WordPress user will be registered in CometChat. +4. Choose layout: + * Embedded Layout + * Docked Layout + +### Embedded Layout + + + + + +Use the shortcode to load the Chat Widget in embedded layout. Configure keys as needed. + + + +Replace `WIDGET_ID` with your Widget ID. + + + + + +``` +[cometchat-pro widget-id='WIDGET_ID' widget-height='600px' widget-width='600px' widget-version='v3'] +``` + + + + + +Configurable keys: + +| Keys | Description | +| -------------- | ----------------------------------------------------------------- | +| widget-id | ID of the widget from the CometChat dashboard | +| widget-width | Width of the widget | +| widget-height | Height of the widget | +| widget-version | Version of the Chat Widget | + +Optional parameters: + +| Keys (optional) | Description | +| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| default-username | Default user to start a conversation with | +| default-id | UID (user) or GUID (group) to show by default | +| default-type | `user` or `group` depending on default-id | +| rounded-corners | Boolean to enable/disable rounded corners | + +### Docked Layout + + + + + +Use the shortcode to load the Chat Widget in docked layout. + + + +Replace `WIDGET_ID` with your Widget ID. + + + + + +``` +[cometchat-pro widget-id='WIDGET_ID' widget-height='600px' widget-width='600px' widget-version='v3' widget-docked='true' widget-docked-position='right' rounded-corners='true'] +``` + + + + + +Configurable keys: + +| Keys | Description | +| ---------------------- | ----------------------------------------------------------------- | +| widget-id | ID of the widget from the CometChat dashboard | +| widget-width | Width of the widget | +| widget-height | Height of the widget | +| widget-version | Version of the Chat Widget | +| widget-docked | Boolean to show/hide docked layout | +| widget-docked-position | `left` or `right` alignment | + +Optional parameters are the same as embedded layout (default-username, default-id, default-type, rounded-corners). + +### Show docked layout on all pages + +1. Go to **Settings → CometChat Pro** in WordPress. +2. Paste the docked shortcode under **Load CometChat Pro on all pages/sitewide?** to show it everywhere. + +*** + +## Advanced Features + +### Open or close chat window + +```javascript +CometChatWidget.openOrCloseChat(FLAG); // true or false +``` + +| Parameter | Description | Type | +| --------- | ------------------------------------------------------------------------------------- | -------- | +| FLAG | `true` opens the chat window, `false` closes it. | Required | + +### Chat with a particular user + +```javascript +CometChatWidget.chatWithUser(UID); +``` + +| Parameter | Description | Type | +| --------- | ---------------------------------------- | -------- | +| UID | ID of the user to chat with | Required | + +### Chat with a particular group + +```javascript +CometChatWidget.chatWithGroup(GUID); +``` + +| Parameter | Description | Type | +| --------- | ----------------------------------------- | -------- | +| GUID | ID of the group to chat with | Required | + +### Initiate calls with a particular user + +```javascript +CometChatWidget.callUser(UID); +``` + +| Parameter | Description | Type | +| --------- | ---------------------------------------------------- | -------- | +| UID | ID of the user to initiate a call with | Required | + +### Initiate calls with a particular group + +```javascript +CometChatWidget.callGroup(GUID); +``` + +| Parameter | Description | Type | +| --------- | ---------------------------------------------------- | -------- | +| GUID | ID of the group to initiate a call with | Required | + +### Message Listener + +```javascript +CometChatWidget.on("onMessageReceived", (args) => { + console.log("CometChatWidget onMessageReceived", args); +}); +``` + +### Chat open state listener + +```javascript +CometChatWidget.launch({ + // Embedded or Docked layout configuration +}).then(() => { + CometChatWidget.on("openChat", (args) => { + console.log("CometChatWidget Chat is open", args); + }); +}); +``` + +### Chat closed state listener + +```javascript +CometChatWidget.launch({ + // Embedded or Docked layout configuration +}).then(() => { + CometChatWidget.on("closeChat", (args) => { + console.log("CometChatWidget Chat is closed", args); + }); +}); +``` + +### Localization + +```javascript +CometChatWidget.localize(LANGUAGE_CODE); +``` + +Supported languages include: en, zh, es, hi, ru, ar, pt, ms, fr, de, sv, lt, hu. + +| Parameter | Description | Type | +| -------------- | ------------------------------------------------- | -------- | +| LANGUAGE_CODE | Language code to localize widget text | Required | diff --git a/widget/wordpress/legacy/overview.mdx b/widget/wordpress/legacy/overview.mdx deleted file mode 100644 index 9fc6fa2f..00000000 --- a/widget/wordpress/legacy/overview.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: "Overview" ---- - -import ChatWidgetLegacyOverview from '/snippets/widget/legacy/overview.mdx'; - - \ No newline at end of file diff --git a/widget/wordpress/legacy/wordpress-buddypress.mdx b/widget/wordpress/legacy/wordpress-buddypress.mdx deleted file mode 100644 index 1122bdcd..00000000 --- a/widget/wordpress/legacy/wordpress-buddypress.mdx +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: "WordPress / BuddyPress" ---- - -## Before getting started - -Go through the [overview](/widget/overview) to set up Chat Widget from the CometChat Dashboard - -### Installation - -1. [Download the CometChat Pro](https://kernl.us/api/v1/archive/688bbf1f5a0dc110ce1bfafe) plugin -2. Go to the WordPress Admin section and visit Plugins > Add New - - - - - -3. Click on the ‘Upload Plugin’ button, here you need to click on the ‘Choose File’ button and select the plugin zip file. After you have selected the file, you need to click on the ‘Install Now’ button. - - - - - -4. WordPress will now upload the plugin file and install it for you. -5. Once installed, you need to click on the 'Activate Plugin' link to start using the plugin. - - - - - -## Configuration - -1. You can access the **App ID, Region, REST API Key, and Auth Key** from the **CometChat Dashboard** under: **Chats → Widget** - - - - - -Visit Settings on WordPress dashboard >> CometChat Pro - -* Add CometChat `App ID`, -* Select CometChat `Region` -* Add CometChat `Rest API Key` -* Add CometChat `Auth Key` - - - - - -2. Once the `Update Settings` button is clicked, the WordPress login user will automatically be registered as a user in the CometChat dashboard -3. You have two options to load the chat widget layout of your choice - -* Embedded Layout -* Docked Layout - -### Embedded Layout - - - - - -Use the shortcode to load the Chat Widget in the embedded layout. You need to configure the keys and pass the required values to the keys in the shortcode. - - - -Replace WIDGET\_ID with your Widget ID in the below code. - - - - - -``` -[cometchat-pro widget-id='WIDGET_ID' widget-height='600px' widget-width='600px' widget-version='v3'] -``` - - - - - -The list below gives the configurable keys and their description - -| Keys | Description | -| -------------- | ----------------------------------------------------------------- | -| widget-id | The ID of the widget can be accessed from the CometChat dashboard | -| widget-width | Width of the widget | -| widget-height | Height of the widget | -| widget-version | Version of the Chat Widget | - -You may pass optional parameters in the short code - -| Keys (optional) | Description | -| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| default-username | The default user with whom the logged In user can start a conversation | -| default-id | To show a default user or group in your chat a.Use UID of a user for one-one conversationsb.Use GUID for group conversations | -| default-type | Either *user* or *group* depending upon the default ID | -| rounded-corners | Boolean value (true/false) that enables/disables rounded corners | - -### Docked Layout - - - - - -Use the short code to load the Chat Widget in the docked layout. You need to configure the keys and pass the required values to the keys in the short code. - - - -Replace WIDGET\_ID with your Widget ID in the below code. - - - - - -``` -[cometchat-pro widget-id='WIDGET_ID' widget-height='600px' widget-width='600px' widget-version='v3' widget-docked='true' widget-docked-position='right' rounded-corners='true'] -``` - - - - - -The list below gives the configurable keys and their description - -| Keys | Description | -| ---------------------- | ----------------------------------------------------------------- | -| widget-id | The ID of the widget can be accessed from the CometChat dashboard | -| widget-width | Width of the widget | -| widget-height | Height of the widget | -| widget-version | A version of the Chat Widget | -| widget-docked | Boolean value to show or hide the docked layout | -| widget-docked-position | Alignment of the Chat widget to the left or right of the screen | - -You may pass optional parameters in the short code - -| Keys (optional) | Description | -| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | -| default-username | The default user with whom the logged In user can start a conversation | -| default-id | To show a default user or group in your chat a.Use UID of a user for one-one conversations b.Use GUID for group conversations | -| default-type | Either user or group depending upon the default ID | -| rounded-corners | Boolean value (true/false) that enables/disables rounded corners | - -### Show docked layout on all pages - -1. Visit WordPress Settings and then to CometChat Pro -2. Copy the above short code and paste under **Load CometChat Pro on all pages/sitewide?** - -If the above steps are followed, you should successfully be able to launch the Chat Widget in your WordPress application - -## Advanced Features - -Open or close chat window - -Chat window of docked layout can be opened/closed using the below method. This method can be triggered on the click event of any element of your web page. - - - -```javascript -CometChatWidget.openOrCloseChat(FLAG); //true or false -``` - - - - - -It takes the following parameters: - -| Parameter | Description | Type | -| --------- | --------------------------------------------------------------------------------------------------- | -------- | -| FLAG | Value could be *true* or *false true* will open the chat window *false* will close the chat window. | Required | - -### Chat with a particular user - -This method will open a particular user chat window. This method can be triggered by the click event of any element of your web page. - - - -```javascript -CometChatWidget.chatWithUser(UID); -``` - - - - - -It takes the following parameters: - -| Parameter | Description | Type | -| --------- | ---------------------------------------- | -------- | -| UID | The ID of the user you want to chat with | Required | - -### Chat with a particular group - -This method will open a particular group chat window. This method can be triggered by the click event of any element of your web page. - - - -```javascript -CometChatWidget.chatWithGroup(GUID); -``` - - - - - -It takes the following parameters: - -| Parameter | Description | Type | -| --------- | ----------------------------------------- | -------- | -| GUID | The ID of the group you want to chat with | Required | - -### Initiate calls with a particular user - -This method will initiate a call with the user. This method can be triggered by the click event of any element of your web page. - - - -```javascript -CometChatWidget.callUser(UID); -``` - - - - - -It takes the following parameters: - -| Parameter | Description | Type | -| --------- | ---------------------------------------------------- | -------- | -| UID | The ID of the user you want to initiate a call with. | Required | - -### Initiate calls with a particular group - -This method will initiate a call with the group. This method can be triggered by the click event of any element of your web page. - - - -```javascript -CometChatWidget.callGroup(GUID); -``` - - - - - -It takes the following parameters: - -| Parameter | Description | Type | -| --------- | ---------------------------------------------------- | -------- | -| GUID | The ID of the group you want to initiate a call with | Required | - -### Message Listener - -We have provided a callback that is fired every time a message is received. You can use this to show Custom Notifications on your website or perform some other custom action as per your requirement. - - - -```javascript -CometChatWidget.on("onMessageReceived", (args) => { - console.log("CometChatWidget onMessageReceived", args); -}); -``` - - - - - -### Chat open state listener - -We have provided a callback that is fired every time the docked layout of the chat widget is in an open state. You can use this to perform some custom action as per your requirement. - - - -```javascript -CometChatWidget.launch({ - // Embedded or Docked layout configuration -}).then((response) => { - // OPTIONAL: This is called in the success callback of launch method - CometChatWidget.on("openChat", (args) => { - console.log("CometChatWidget Chat is open", args); - }); -}); -``` - - - - - -### Chat closed state listener - -We have provided a callback that is fired every time the docked layout of the chat widget is in a closed state. You can use this to perform some custom action as per your requirement. - - - -```javascript -CometChatWidget.launch({ - // Embedded or Docked layout configuration -}).then((response) => { - // OPTIONAL: This is called in the success callback of launch method - CometChatWidget.on("closeChat", (args) => { - console.log("CometChatWidget Chat is closed", args); - }); -}); -``` - - - - - -### Localization - -With language localization, our Chat Widget adapts to the language of a specific country or region. Chat Widget allows you to detect the language of your users based on their browser settings and set the language of the widget accordingly. Currently, we support the following 10 languages for localization: - -* English (en, en-US, en-GB) -* Chinese (zh, zh-TW) -* Spanish (es) -* Hindi (hi) -* Russian (ru) -* Arabic (ar) -* Portuguese (pt) -* Malay (ms) -* French (fr) -* German (de) -* Swedish (sv) -* Lithuanian (lt) -* Hungarian (hu) - - - -```javascript -CometChatWidget.localize(LANGUAGE_CODE); -``` - - - - - -It takes the following parameters: - -| Parameter | Description | Type | -| -------------- | ------------------------------------------------- | -------- | -| LANGUAGE\_CODE | The language code the texts to be translated into | Required |