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

# Add CometChat Widget to WordPress via Plugin

> Comprehensive guide to install, configure, and extend the new CometChat WordPress plugin.

## Before getting started

Go through the [Overview](https://app.cometchat.com/) to generate your Widget from the CometChat Dashboard.\
Ensure you have:

* A WordPress site (5.0+)
* PHP 7.2 or higher
* Your **App ID**, **Region**, and **Auth Key**

## Quick Steps to Embed CometChat Widget

<Steps>
  <Step title="Download the Plugin ZIP">
    1. Download the CometChat plugin from [here](https://kernl.us/api/v1/archive/688bbf1f5a0dc110ce1bfafe).
    2. Save the `cometchat-pro.zip` file to your computer.
  </Step>

  <Step title="Install & Activate the Plugin">
    1. In WordPress Admin, navigate to **Plugins → Add Plugin**.

    <img src="https://mintcdn.com/cometchat-013b37f0/GfwLNlD2G1QS5oge/images/chat-widget-wordpress-1.png?fit=max&auto=format&n=GfwLNlD2G1QS5oge&q=85&s=ae7f0ba944a9152555cc5adec6bd75db" alt="Main dashboard interface" height="300" className="rounded-lg" data-path="images/chat-widget-wordpress-1.png" />

    2. Click **Upload Plugin**, choose `cometchat-pro.zip`, and click **Install Now**.

    <img src="https://mintcdn.com/cometchat-013b37f0/GfwLNlD2G1QS5oge/images/chat-widget-wordpress-2.png?fit=max&auto=format&n=GfwLNlD2G1QS5oge&q=85&s=0af5dfc1762c7b83a10c7dee43a422f2" alt="Main dashboard interface" height="300" className="rounded-lg" data-path="images/chat-widget-wordpress-2.png" />

    3. Once installed, click **Activate Plugin**.

    <img src="https://mintcdn.com/cometchat-013b37f0/GfwLNlD2G1QS5oge/images/chat-widget-wordpress-3.png?fit=max&auto=format&n=GfwLNlD2G1QS5oge&q=85&s=f7eb2a17bf344973ebbb9e7dd7dccb89" alt="Main dashboard interface" height="300" className="rounded-lg" data-path="images/chat-widget-wordpress-3.png" />
  </Step>

  <Step title="CometChat Credentials">
    To use **CometChat UI Kit**, you first need to register on the **CometChat Dashboard**.

    After registering, create a **new app** and retrieve your **authentication details**:

    1. Navigate to **Application**, then select the **Credentials** section.

    2. Note down the following keys:

       * **App ID**
       * **Auth Key**
       * **Region**
  </Step>

  <Step title="Configure Plugin Settings">
    1. In WordPress Admin, go to **CometChat Chat Builder** in the sidebar.
    2. Paste your **Widget ID**, **App ID**, **Region**, and **Auth Key**.
    3. (Optional) Set **Default User UID** to auto-login a specific user.
    4. Choose **Display Mode**:
       * **Embedded** (inline on specific pages)
       * **Docked** (floating on every page)
    5. Click **Save Changes**.
  </Step>

  <Step title="Embed Widget Inline (Embedded Mode)">
    1. Edit any Page/Post, add a **Shortcode** block, and insert:
       ```text theme={null}
       [cometchat 
         width="600px"                      <!-- Widget width (Required) -->
         height="600px"                     <!-- Widget height (Required) -->
         docked="false"                     <!-- true = floating bubble, false = embedded (Required) -->
         variant-id="default-variant"       <!-- Optional | Variant ID -->
         chat-type="user"                   <!-- Optional | user / group -->
         default-chat-id="uid_or_guid"      <!-- Optional | UID or GUID to open by default -->
       ]
       ```
    2. Publish or update the Page/Post.
  </Step>

  <Step title="Docked Widget (Floating Mode)">
    1. Edit any Page/Post (or site-wide), add a **Shortcode** block, and insert:
       ```text theme={null}
       [cometchat 
         width="400px"                      
         height="800px"                     
         docked="true"                      <!-- true = floating bubble, false = embedded (Required) -->
         variant-id="default-variant"       <!-- Optional | Variant ID -->
         docked-alignment="right"           <!-- Optional | left / right (only applies if docked=true) -->
         chat-type="user"                   <!-- Optional | user / group -->
         default-chat-id="uid_or_guid"      <!-- Optional | UID or GUID to open by default -->
       ]
       ```
    2. Publish or update to see the widget docked on the chosen side.
  </Step>

  <Step title="Enable Docked on All Pages">
    1. In **CometChat Chat Builder** settings, set **Display Mode** to **Docked**.
    2. Save—widget will now float on every public page.
  </Step>
</Steps>

***

## Advanced JavaScript APIs

Once the widget is loaded, interact with it via the global `CometChatApp` object:

### Chat and Call Methods

```js theme={null}
// Chat with a particular user
CometChatApp.chatWithUser("UID");

// Chat with a particular group
CometChatApp.chatWithGroup("GUID");

// Initiate calls with a particular user
CometChatApp.callUser("UID");

// Initiate calls with a particular group
CometChatApp.callGroup("GUID");
```

### UI Event Listeners

```js theme={null}
// Message received listener
CometChatApp.uiEvent("onMessageReceived", (msg) => {
  console.log("New message received:", msg);
});

// Chat opened listener (for docked mode)
CometChatApp.uiEvent("onOpenChat", (args) => {
  console.log("Chat opened", args);
});

// Chat closed listener (for docked mode)
CometChatApp.uiEvent("onCloseChat", (args) => {
  console.log("Chat closed", args);
});

// Active chat change listener
CometChatApp.uiEvent("onActiveChatChanged", (args) => {
  console.log("onActiveChatChanged", 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.

You can also set the language manually using the `CometChatApp.localize` method.
The CometChat App supports localization for multiple languages, allowing you to provide a tailored experience for users across different regions.

You can find the list of supported languages and their corresponding language codes below:

| Language                 | Code    |
| ------------------------ | ------- |
| English (United States)  | `en-US` |
| English (United Kingdom) | `en-GB` |
| Dutch                    | `nl`    |
| French                   | `fr`    |
| German                   | `de`    |
| Hindi                    | `hi`    |
| Italian                  | `it`    |
| Japanese                 | `ja`    |
| Korean                   | `ko`    |
| Portuguese               | `pt`    |
| Russian                  | `ru`    |
| Spanish                  | `es`    |
| Turkish                  | `tr`    |
| Chinese                  | `zh`    |
| Chinese (Traditional)    | `zh-TW` |
| Malay                    | `ms`    |
| Swedish                  | `sv`    |
| Lithuanian               | `lt`    |
| Hungarian                | `hu`    |

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

    Eg. CometChatApp.localize('en-US');
    ```
  </Tab>
</Tabs>

It takes the following parameters:

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

***

## Troubleshooting

* **Plugin upload fails**: Ensure the ZIP is intact and WordPress has write permissions.
* **Settings not saving**: Temporarily disable caching/minification plugins.
* **Shortcode not working**: Verify the `[cometchat]` syntax and saved settings.
* **JavaScript errors**: Check browser console for missing `CometChatApp` or invalid parameters.

***

## Need Help?

Questions or issues? Contact [CometChat Support](https://www.cometchat.com/contact).