Advanced CometChat Widget Setup for Static HTML

Quick Reference for AI Agents & Developers

What this page covers: Advanced JavaScript controls for the CometChat Widget — open specific chats, listen for events, manage users/groups, control auth sessions, and change localization.
Prerequisites: The standard widget snippet from the Integration guide must already be on your page.
Key action: Add a <script type="module"> block after the widget snippet and use the CometChatApp global helper to control the widget programmatically.

Advanced JavaScript Controls

The embed works out of the box. Use the helpers below only if you need to open a specific chat, listen for widget events, or change settings on the fly.

Before you follow advanced setup steps

Keep the standard widget snippet (from the Integration guide) on your page.
Add another <script type="module"> right after it or inside your site builder’s “custom code” area.
Wrap your code in window.addEventListener("DOMContentLoaded", () => { ... }) so it runs after the widget loads.
Replace placeholder text such as UID, GUID, and LANGUAGE_CODE with your real values.

When the widget is ready, it exposes a global helper named CometChatApp. Every example below shows a tiny recipe you can paste inside the script mentioned above.

Open a chat or start a call

Use these helpers when you want the widget to jump straight to a person/group or begin a call. Drop the snippet inside your custom script and replace UID/GUID with real IDs from your CometChat app.

// Open chat with a specific person
CometChatApp.chatWithUser("UID");

// Open chat with a specific group
CometChatApp.chatWithGroup("GUID");

// Start a call with a person or a group
CometChatApp.callUser("UID");
CometChatApp.callGroup("GUID");

// Toggle extra UI bits
CometChatApp.showGroupActionMessages(true); // Show join/leave messages
CometChatApp.showDockedUnreadCount(true);   // Show unread badge on docked bubble

Run your own code when something happens inside the widget—new message, docked bubble opened, or someone switching chats. Keep the event names as shown; just change what happens inside each arrow function.

// Fire when a new message arrives
CometChatApp.uiEvent("onMessageReceived", (message) => {
  console.log("New message:", message);
});

// Fire when the docked bubble opens or closes
CometChatApp.uiEvent("onOpenChat", () => console.log("Chat opened"));
CometChatApp.uiEvent("onCloseChat", () => console.log("Chat closed"));

// Fire when the user switches between conversations
CometChatApp.uiEvent("onActiveChatChanged", (chat) => {
  console.log("Now viewing:", chat);
});

Create/Update users on the fly

This will only work with authKey

If you collect names, avatars, or profile links on your site, you can push them straight into CometChat. Replace the placeholders and run the snippet after the widget loads.

// Create or update a user
const user = new CometChatApp.CometChat.User("UID");
user.setName("User Name");
user.setAvatar("https://example.com/avatar.png");
user.setLink("https://example.com/profile");

CometChatApp.createOrUpdateUser(user).then((result) => {
  console.log("User saved:", result);
});

Create/Update groups on the fly

If you want to create groups directly from your page, use this snippet. Replace the placeholders and run the snippet after the widget loads.

// Create or update a group
const group = new CometChatApp.CometChat.Group("GUID", "GROUP_NAME", "public");

CometChatApp.createOrUpdateGroup(group).then((result) => {
  console.log("Group saved:", result);
});

Log users in or out with code

Use an auth token if you have a backend, or fall back to a plain UID for quick tests. Run these helpers after the widget loads.

// Sign in with a secure auth token from your server
CometChatApp.login({ authToken: "USER_AUTH_TOKEN" });

// ...or sign in directly with a UID (less secure, but fast for demos)
CometChatApp.login({ uid: "UID" });

// Sign the current user out
CometChatApp.logout();

// Listen for logout so you can clean up your UI
CometChatApp.uiEvent("onLogout", () => {
  console.log("User logged out");
});

login() does nothing while someone is signed in. It returns the current user and ignores the uid you pass, because the SDK keeps its session across reloads. To change users, sign the previous one out first:

await CometChatApp.logout();
await CometChatApp.login({ uid: "another-user" });
await CometChatApp.launch({ targetElementID: "cometChatMount", isDocked: false });

Control where data is stored

Pick whether the widget should remember login info in the browser tab only (SESSION) or across visits (LOCAL). Update the placeholders, then drop this script right after the default widget embed.

const COMETCHAT_DATA = {
  appID: "<YOUR_APP_ID>",
  appRegion: "<YOUR_APP_REGION>",
  authKey: "<YOUR_AUTH_KEY>",
  storageMode: "SESSION", // or "LOCAL" (default)
};

const COMETCHAT_USER_UID = "UID"; // The person who should log in

const COMETCHAT_LAUNCH_OPTIONS = {
  targetElementID: "cometChatMount",
  isDocked: true,
  width: "700px",
  height: "500px",
};

window.addEventListener("DOMContentLoaded", () => {
  CometChatApp.init(COMETCHAT_DATA)
    .then(() => CometChatApp.login({ uid: COMETCHAT_USER_UID }))
    .then(() => CometChatApp.launch(COMETCHAT_LAUNCH_OPTIONS))
    .catch(console.error);
});

// Optional extras:
// COMETCHAT_LAUNCH_OPTIONS.variantID = "YOUR_VARIANT_ID";
// COMETCHAT_LAUNCH_OPTIONS.chatType = "user" | "group";
// COMETCHAT_LAUNCH_OPTIONS.defaultChatID = "uid_or_guid";
// COMETCHAT_LAUNCH_OPTIONS.dockedAlignment = "left" | "right";
// COMETCHAT_LAUNCH_OPTIONS.autoOpenFirstItem = false;
// COMETCHAT_LAUNCH_OPTIONS.language = "fr";
// COMETCHAT_LAUNCH_OPTIONS.localization = { fr: { chats: "Discussions" } };

init() takes appRegion; CometChatAuth.start() takes region. They are the same value under different names, and each call rejects the other’s spelling.

The widget starts in the locale you set with the language launch option, and falls back to en-US when you do not set one. You can switch locale at any time after load — run the helper and swap in the language code you need.

CometChatApp.localize("en-US"); // Example: force English (United States)

Popular codes

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 (Simplified)	`zh`
Chinese (Traditional)	`zh-TW`
Malay	`ms`
Swedish	`sv`
Lithuanian	`lt`
Hungarian	`hu`

Need another locale? Use the same pattern with its code (for example CometChatApp.localize("ko") for Korean).

Next Steps

HTML Integration

Go back to the basic integration guide to set up the widget snippet.

Legacy Widget

Using the older CometChat Widget? See the legacy integration guide.

Widget Overview

Return to the Widget Builder overview for a high-level walkthrough.

Advanced CometChat Widget Setup for Static HTML

Advanced JavaScript Controls

Before you follow advanced setup steps

Open a chat or start a call

Listen for widget events

Create/Update users on the fly

Create/Update groups on the fly

Log users in or out with code

Control where data is stored

Change the widget language

Next Steps

HTML Integration

Legacy Widget

Widget Overview

​Advanced JavaScript Controls

​Before you follow advanced setup steps

​Open a chat or start a call

​Listen for widget events

​Create/Update users on the fly

​Create/Update groups on the fly

​Log users in or out with code

​Control where data is stored

​Change the widget language

​Next Steps

HTML Integration

Legacy Widget

Widget Overview

Advanced JavaScript Controls

Before you follow advanced setup steps

Open a chat or start a call

Listen for widget events

Create/Update users on the fly

Create/Update groups on the fly

Log users in or out with code

Control where data is stored

Change the widget language

Next Steps