Add CometChat Widget to Wix

Learn how to embed the CometChat UI Kit Builder widget into your Wix website using Wix’s HTML Embed element.

You can integrate the CometChat UI Kit Builder widget into your Wix site without touching theme code—just use Wix’s Embed a Widget feature.

Once installed, it will:

• Load and initialize the widget on page load
• Automatically log in a predefined user
• Display a docked chat window on your site

Quick Steps to Embed CometChat Widget

1. Register on CometChat & Gather Your Keys

   Before you begin, sign up at the CometChat Dashboard and create a new app. Copy:

   • App ID
   • Region
   • Auth Key
2. Open the Wix Editor & Add an HTML Embed

   1. In your Wix Dashboard, open the Editor.
   2. Click the Add (+) button → Embed → Embed a Widget.
   3. Drag the HTML iframe element onto your desired page location.
3. Include the Chat‑Embed Script in the HTML Embed

   1. Click Enter Code on the HTML settings panel.
   2. Switch to Code mode.
   3. Paste:
      <script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
      

   This ensures the CometChat library is loaded.

4. Embed the Widget Container & Init Script

   Within the same Enter Code box, add your container and initialization script:

   <div id="cometChatMount"></div>
   
   <script>
     const COMETCHAT_CREDENTIALS = {
       appID:     "<YOUR_APP_ID>",
       appRegion: "<YOUR_APP_REGION>",
       authKey:   "<YOUR_AUTH_KEY>",
     };
   
     const COMETCHAT_USER_UID = "UID"; // Replace with actual user UID
   
     const COMETCHAT_LAUNCH_OPTIONS = {
       targetElementID: "cometChatMount",  // Element ID to mount the widget
       isDocked:        true,              // true = floating bubble, false = embedded
       width:           "700px",           // Widget width
       height:          "500px",           // Widget height
   
       // Optional advanced settings:
       // variantID:        "YOUR_VARIANT_ID",    // Variant configuration ID
       // chatType:         "user",               // "user" or "group"
       // defaultChatID:    "uid_or_guid",        // UID or GUID to open chat by default
       // dockedAlignment:  "right",              // For docked mode: "left" or "right"
     };
   
     window.addEventListener("DOMContentLoaded", () => {
       CometChatApp.init(COMETCHAT_CREDENTIALS)
         .then(() => {
           console.log("[CometChat] Initialized successfully");
           return CometChatApp.login({ uid: COMETCHAT_USER_UID });
         })
         .then(user => {
           console.log("[CometChat] Logged in as:", user);
           return CometChatApp.launch(COMETCHAT_LAUNCH_OPTIONS);
         })
         .then(() => {
           console.log("[CometChat] Chat launched!");
         })
         .catch(error => {
           console.error("[CometChat] Error:", error);
         });
     });
   </script>
   

   Replace <YOUR_APP_ID>, <YOUR_APP_REGION>, <YOUR_AUTH_KEY>, and COMETCHAT_USER_UID with your actual credentials and user ID.

5. Adjust Layout & Sizing

   • Use the resize handles on the embed element to set your preferred width and height.
   • In Settings → Mode, ensure Code (not Website Address) is selected.
6. Troubleshooting

   • Widget not loading?
     • Verify your App ID, Region & Auth Key.
     • Check the browser console for errors.
   • Login fails?
     • Ensure COMETCHAT_USER_UID exists under Users in your CometChat Dashboard.
   • Embed blank?
     • Confirm the element is set to Code mode.

---

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);
});

User and Group Management

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

CometChatApp.createOrUpdateUser(user).then((createdUser) => {
  console.log("User created/updated", createdUser);
});

// Create or update a group on-the-fly
const group = new CometChatApp.CometChat.Group("GUID", "GROUP_NAME", "public");
CometChatApp.createOrUpdateGroup(group).then((createdGroup) => {
  console.log("Group created/updated", createdGroup);
});

Authentication Methods

// Login with authToken
CometChatApp.login({ authToken: "your-auth-token" }); // More secure

// Login with UID
CometChatApp.login({ uid: "your-uid" });  // Less secure

// User logout
CometChatApp.logout();

// Logout listener
CometChatApp.uiEvent("onLogout", (args) => {
  console.log("onLogout", args);
});

Storage Methods

const COMETCHAT_DATA = {
    appID:    "<YOUR_APP_ID>",
    appRegion: "<YOUR_APP_REGION>",
    authKey:   "<YOUR_AUTH_KEY>",
    storageMode:"SESSION" // "SESSION" || "LOCAL", defaults to "LOCAL"
};

const COMETCHAT_USER_UID = "UID"; // Replace with your actual user UID

const COMETCHAT_LAUNCH_OPTIONS = {
    targetElementID: "cometChatMount",   // Element ID to mount the widget
    isDocked:        true,               // true = floating bubble, false = embedded
    width:           "700px",            // Widget width
    height:          "500px",            // Widget height

    // Optional advanced settings:
    // variantID:        "YOUR_VARIANT_ID",    // Variant configuration ID
    // chatType:         "user",               // "user" or "group"
    // defaultChatID:    "uid_or_guid",        // UID or GUID to open chat by default
    // dockedAlignment:  "right",              // For docked mode: "left" or "right"
};

window.addEventListener("DOMContentLoaded", () => {
    CometChatApp.init(COMETCHAT_DATA)
      .then(() => {
        console.log("[CometChat] Initialized successfully");
        return CometChatApp.login({ uid: COMETCHAT_USER_UID });
      })
      .then(user => {
        console.log("[CometChat] Logged in as:", user);
        return CometChatApp.launch(COMETCHAT_LAUNCH_OPTIONS);
      })
      .then(() => {
        console.log("[CometChat] Chat launched!");
      })
      .catch(error => {
        console.error("[CometChat] Error:", error);
      });
  });

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

---

Need Help?

If you have questions or run into issues, reach out to CometChat Support.