> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# WordPress Widget (Legacy)

## Overview

The Widget simplifies the process of integrating a chat functionality on your website. As a developer, you only need to toggle the widget's settings from our Dashboard and customize it to fit your needs. Within a few minutes, you can get started with our widget.

The Chat Widget is available for the following platforms:

1. HTML / Bootstrap / jQuery
2. WordPress

## Prerequisite

1. [Login](https://app.cometchat.com/login) to CometChat Dashboard and select your app.
2. Click on the **Chats tab**, then select **Widgets** from the left navigation pane.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/cometchat-22654f5b/images/22087faf-cometchat-dashboard-widget-landing-page-d80347fbe5aaaf9e51f67caace0e114c.png" />
</Frame>

3. You can create new widgets as well as see a list of existing ones here.

## Features of Widget

| Features  | Description                                                                                     |
| --------- | ----------------------------------------------------------------------------------------------- |
| Install   | This provides the required details about a widget so that it can be integrated in your website. |
| Customize | Change the widget's name, docked layout icons and colors, custom JS and CSS.                    |
| Settings  | Configure what shows up in the sidebar as well as in the chat component.                        |

***

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/sXlOkom3A4PRkute/images/c18b3746-cometchat-widget-wordpress-dashboard-plugins-7be528827a974b8e233087321a4ce994.png?fit=max&auto=format&n=sXlOkom3A4PRkute&q=85&s=be44f25c171b9abc699f128d212dee80" width="1808" height="1208" data-path="images/c18b3746-cometchat-widget-wordpress-dashboard-plugins-7be528827a974b8e233087321a4ce994.png" />
</Frame>

3. Click **Upload Plugin**, choose the zip, then click **Install Now**.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/EWHpqoCiqaugl3OV/images/a4236fb1-cometchat-widget-wordpress-dashboard-upload-plugin-0e76a48f40712efb4fe59b44b1041590.png?fit=max&auto=format&n=EWHpqoCiqaugl3OV&q=85&s=a90d58edf30e915b8c987aeb02c9c57a" width="1808" height="1208" data-path="images/a4236fb1-cometchat-widget-wordpress-dashboard-upload-plugin-0e76a48f40712efb4fe59b44b1041590.png" />
</Frame>

4. After upload completes, click **Activate Plugin**.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/DAnFVf11tHuQNAiR/images/23b8b8d4-cometchat-widget-wordpress-dashboard-plugin-activate-plugin-e56f4c6475294768f1d3ebdccfcb6c09.png?fit=max&auto=format&n=DAnFVf11tHuQNAiR&q=85&s=4630e22456dc6e5cad0f7d1082e385c1" width="1808" height="1208" data-path="images/23b8b8d4-cometchat-widget-wordpress-dashboard-plugin-activate-plugin-e56f4c6475294768f1d3ebdccfcb6c09.png" />
</Frame>

### Configuration

1. Get **App ID**, **Region**, **REST API Key**, and **Auth Key** from **CometChat Dashboard → Chats → Widget**.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/Ur5VUmw7QzwdTuYq/images/0fff2c6d-cometchat-widget-install-6d0bf8af5fdc5e2771a0e51cda2088d8.png?fit=max&auto=format&n=Ur5VUmw7QzwdTuYq&q=85&s=3c67c6263dc10d62ee5dc65e686a2676" width="1520" height="880" data-path="images/0fff2c6d-cometchat-widget-install-6d0bf8af5fdc5e2771a0e51cda2088d8.png" />
</Frame>

2. In WordPress go to **Settings → CometChat Pro**, then set:

* `App ID`
* `Region`
* `REST API Key`
* `Auth Key`

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/F_ewmwfwQyqC5FWQ/images/1d356809-cometchat-widget-wordpress-dashboard-plugin-settings-407485c995256f92e063ea4996e2a3de.png?fit=max&auto=format&n=F_ewmwfwQyqC5FWQ&q=85&s=0ca3438097626daaa82721da09d9a103" width="1808" height="1208" data-path="images/1d356809-cometchat-widget-wordpress-dashboard-plugin-settings-407485c995256f92e063ea4996e2a3de.png" />
</Frame>

3. Click **Update Settings**. The logged-in WordPress user will be registered in CometChat.
4. Choose layout:
   * Embedded Layout
   * Docked Layout

### Embedded Layout

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/1gjHdq6FrESoHqiS/images/ae62411b-cometchat-widget-embedded-eb1ab072b5ef5332c75498c4f89d0b4f.png?fit=max&auto=format&n=1gjHdq6FrESoHqiS&q=85&s=9d6d8b7ccd6ef7f2c82be1b52d28c139" width="1800" height="1199" data-path="images/ae62411b-cometchat-widget-embedded-eb1ab072b5ef5332c75498c4f89d0b4f.png" />
</Frame>

Use the shortcode to load the Chat Widget in embedded layout. Configure keys as needed.

<Warning>
  Replace `WIDGET_ID` with your Widget ID.
</Warning>

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

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/sh267CJkfrm3WTlF/images/9cd7b785-cometchat-widget-docked-e2906f61f4478dbda64e0d6b78b0afeb.png?fit=max&auto=format&n=sh267CJkfrm3WTlF&q=85&s=3bd626396c3c1f92852e6eae4dedf0e8" width="1800" height="1200" data-path="images/9cd7b785-cometchat-widget-docked-e2906f61f4478dbda64e0d6b78b0afeb.png" />
</Frame>

Use the shortcode to load the Chat Widget in docked layout.

<Warning>
  Replace `WIDGET_ID` with your Widget ID.
</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>

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 theme={null}
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 theme={null}
CometChatWidget.chatWithUser(UID);
```

| Parameter | Description                 | Type     |
| --------- | --------------------------- | -------- |
| UID       | ID of the user to chat with | Required |

### Chat with a particular group

```javascript theme={null}
CometChatWidget.chatWithGroup(GUID);
```

| Parameter | Description                  | Type     |
| --------- | ---------------------------- | -------- |
| GUID      | ID of the group to chat with | Required |

### Initiate calls with a particular user

```javascript theme={null}
CometChatWidget.callUser(UID);
```

| Parameter | Description                            | Type     |
| --------- | -------------------------------------- | -------- |
| UID       | ID of the user to initiate a call with | Required |

### Initiate calls with a particular group

```javascript theme={null}
CometChatWidget.callGroup(GUID);
```

| Parameter | Description                             | Type     |
| --------- | --------------------------------------- | -------- |
| GUID      | ID of the group to initiate a call with | Required |

### Message Listener

```javascript theme={null}
CometChatWidget.on("onMessageReceived", (args) => {
  console.log("CometChatWidget onMessageReceived", args);
});
```

### Chat open state listener

```javascript theme={null}
CometChatWidget.launch({
  // Embedded or Docked layout configuration
}).then(() => {
  CometChatWidget.on("openChat", (args) => {
    console.log("CometChatWidget Chat is open", args);
  });
});
```

### Chat closed state listener

```javascript theme={null}
CometChatWidget.launch({
  // Embedded or Docked layout configuration
}).then(() => {
  CometChatWidget.on("closeChat", (args) => {
    console.log("CometChatWidget Chat is closed", args);
  });
});
```

### Localization

```javascript theme={null}
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 |