​
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

​
Quick Steps to Embed CometChat Widget

1

Download the Plugin ZIP

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

Install & Activate the Plugin

  1. In WordPress Admin, navigate to Plugins → Add Plugin.
Main dashboard interface
  1. Click Upload Plugin, choose cometchat-pro.zip, and click Install Now.
Main dashboard interface
  1. Once installed, click Activate Plugin.
Main dashboard interface
3

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
4

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

Embed Widget Inline (Embedded Mode)

  1. 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 -->
]
  2. Publish or update the Page/Post.
6

Docked Widget (Floating Mode)

  1. 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 -->
]
  2. Publish or update to see the widget docked on the chosen side.
7

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.

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

​
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:
LanguageCode
English (United States)en-US
English (United Kingdom)en-GB
Dutchnl
Frenchfr
Germande
Hindihi
Italianit
Japaneseja
Koreanko
Portuguesept
Russianru
Spanishes
Turkishtr
Chinesezh
Chinese (Traditional)zh-TW
Malayms
Swedishsv
Lithuanianlt
Hungarianhu
CometChatApp.localize(LANGUAGE_CODE);

Eg. CometChatApp.localize('en-US');
It takes the following parameters:
ParameterDescriptionType
LANGUAGE_CODEThe language code the texts to be translated intoRequired

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