Add CometChat Widget to WordPress via Plugin

Before getting started

Go through the Overview 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

Download the Plugin ZIP

Download the CometChat plugin from here.
Save the cometchat-pro.zip file to your computer.

Install & Activate the Plugin

In WordPress Admin, navigate to Plugins → Add Plugin.

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

Once installed, click Activate Plugin.

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:

Navigate to Application, then select the Credentials section.
Note down the following keys:
- App ID
- Auth Key
- Region

Configure Plugin Settings

In WordPress Admin, go to CometChat UI Kit Builder in the sidebar.
Paste your Widget ID, App ID, Region, and Auth Key.
(Optional) Set Default User UID to auto-login a specific user.
Choose Display Mode:
- Embedded (inline on specific pages)
- Docked (floating on every page)
Click Save Changes.

Embed Widget Inline (Embedded Mode)

Edit any Page/Post, add a Shortcode block, and insert:

[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 -->
]

Publish or update the Page/Post.

Docked Widget (Floating Mode)

Edit any Page/Post (or site-wide), add a Shortcode block, and insert:

[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 -->
]

Publish or update to see the widget docked on the chosen side.

Enable Docked on All Pages

In CometChat UI Kit Builder settings, set Display Mode to Docked.
Save—widget will now float on every public page.

Advanced JavaScript APIs

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

Chat and Call Methods

// 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");

// Show or hide action messages in group chats
CometChatApp.showGroupActionMessages(true);

// Show or hide unread message count bubble on docked layout
CometChatApp.showDockedUnreadCount(true);

UI Event Listeners

// 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`

JavaScript

CometChatApp.localize(LANGUAGE_CODE);

Eg. CometChatApp.localize('en-US');

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.

Legacy

Add CometChat Widget to WordPress via Plugin

Before getting started

Quick Steps to Embed CometChat Widget

Advanced JavaScript APIs

Chat and Call Methods

UI Event Listeners

Localization

Troubleshooting

Need Help?

​Before getting started

​Quick Steps to Embed CometChat Widget

​Advanced JavaScript APIs

​Chat and Call Methods

​UI Event Listeners

​Localization

​Troubleshooting

​Need Help?

Before getting started

Quick Steps to Embed CometChat Widget

Advanced JavaScript APIs

Chat and Call Methods

UI Event Listeners

Localization

Troubleshooting

Need Help?