> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# WordPress / BuddyPress (Legacy)

## 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

<Frame>
  <img src="https://mintcdn.com/cometchat-013b37f0/qPj1u-01bVacwjS9/images/c18b3746-cometchat-widget-wordpress-dashboard-plugins-7be528827a974b8e233087321a4ce994.png?fit=max&auto=format&n=qPj1u-01bVacwjS9&q=85&s=6b47f030db1d4544d49cc499682e8870" width="1808" height="1208" data-path="images/c18b3746-cometchat-widget-wordpress-dashboard-plugins-7be528827a974b8e233087321a4ce994.png" />
</Frame>

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.

<Frame>
  <img src="https://mintcdn.com/cometchat-013b37f0/4Rjsfsajp8Hou6fe/images/a4236fb1-cometchat-widget-wordpress-dashboard-upload-plugin-0e76a48f40712efb4fe59b44b1041590.png?fit=max&auto=format&n=4Rjsfsajp8Hou6fe&q=85&s=7e4ecfaf91daf6b4bc89b15be63e530b" width="1808" height="1208" data-path="images/a4236fb1-cometchat-widget-wordpress-dashboard-upload-plugin-0e76a48f40712efb4fe59b44b1041590.png" />
</Frame>

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.

<Frame>
  <img src="https://mintcdn.com/cometchat-013b37f0/Msoa3RE39lFag8X2/images/23b8b8d4-cometchat-widget-wordpress-dashboard-plugin-activate-plugin-e56f4c6475294768f1d3ebdccfcb6c09.png?fit=max&auto=format&n=Msoa3RE39lFag8X2&q=85&s=1f8e83eb84b477318d4350a41721bca8" width="1808" height="1208" data-path="images/23b8b8d4-cometchat-widget-wordpress-dashboard-plugin-activate-plugin-e56f4c6475294768f1d3ebdccfcb6c09.png" />
</Frame>

## Configuration

1. You can access the **App ID, Region, REST API Key, and Auth Key** from the **CometChat Dashboard** under: **Chats → Widget**

<Frame>
  <img src="https://mintcdn.com/cometchat-013b37f0/Ljt9AcZicJcNxpPO/images/0fff2c6d-cometchat-widget-install-6d0bf8af5fdc5e2771a0e51cda2088d8.png?fit=max&auto=format&n=Ljt9AcZicJcNxpPO&q=85&s=72b39cc2525519e746a46b28e2b1dfc3" width="1520" height="880" data-path="images/0fff2c6d-cometchat-widget-install-6d0bf8af5fdc5e2771a0e51cda2088d8.png" />
</Frame>

Visit Settings on WordPress dashboard >> CometChat Pro

* Add CometChat `App ID`,
* Select CometChat `Region`
* Add CometChat `Rest API Key`
* Add CometChat `Auth Key`

<Frame>
  <img src="https://mintcdn.com/cometchat-013b37f0/7ukcXXCqdNW8D4Ro/images/1d356809-cometchat-widget-wordpress-dashboard-plugin-settings-407485c995256f92e063ea4996e2a3de.png?fit=max&auto=format&n=7ukcXXCqdNW8D4Ro&q=85&s=b51d98ae053f48348d05f304b87915e8" width="1808" height="1208" data-path="images/1d356809-cometchat-widget-wordpress-dashboard-plugin-settings-407485c995256f92e063ea4996e2a3de.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/cometchat-013b37f0/wmExTb2jx2mL9tyJ/images/ae62411b-cometchat-widget-embedded-eb1ab072b5ef5332c75498c4f89d0b4f.png?fit=max&auto=format&n=wmExTb2jx2mL9tyJ&q=85&s=5c4261ca21c74b7ac60493e8fb38f63c" width="1800" height="1199" data-path="images/ae62411b-cometchat-widget-embedded-eb1ab072b5ef5332c75498c4f89d0b4f.png" />
</Frame>

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.

<Warning>
  Replace WIDGET\_ID with your Widget ID in the below code.
</Warning>

<Tabs>
  <Tab title="WordPress">
    ```
    [cometchat-pro widget-id='WIDGET_ID' widget-height='600px' widget-width='600px' widget-version='v3']
    ```
  </Tab>
</Tabs>

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

<Frame>
  <img src="https://mintcdn.com/cometchat-013b37f0/ammVYFoPQt2bWll7/images/9cd7b785-cometchat-widget-docked-e2906f61f4478dbda64e0d6b78b0afeb.png?fit=max&auto=format&n=ammVYFoPQt2bWll7&q=85&s=f36ba0d736cb8a2bd76ea194ec686e18" width="1800" height="1200" data-path="images/9cd7b785-cometchat-widget-docked-e2906f61f4478dbda64e0d6b78b0afeb.png" />
</Frame>

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.

<Warning>
  Replace WIDGET\_ID with your Widget ID in the below code.
</Warning>

<Tabs>
  <Tab title="WordPress">
    ```
    [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']
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatWidget.openOrCloseChat(FLAG); //true or false
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatWidget.chatWithUser(UID);
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatWidget.chatWithGroup(GUID);
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatWidget.callUser(UID);
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatWidget.callGroup(GUID);
    ```
  </Tab>
</Tabs>

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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatWidget.on("onMessageReceived", (args) => {
      console.log("CometChatWidget onMessageReceived", args);
    });
    ```
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    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);
      });
    });
    ```
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    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);
      });
    });
    ```
  </Tab>
</Tabs>

### 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)

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatWidget.localize(LANGUAGE_CODE);
    ```
  </Tab>
</Tabs>

It takes the following parameters:

| Parameter      | Description                                       | Type     |
| -------------- | ------------------------------------------------- | -------- |
| LANGUAGE\_CODE | The language code the texts to be translated into | Required |