@cometchat/chat-embed

# CometChat Chat Builder Widget Integration Guide

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. Include the Chat-Embed Script in `<head>`

Add this inside the

section of your HTML file to load the CometChat bundle:

<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@latest/dist/main.js"></script>

3. Embed & Initialize the Widget in `<body>`

Paste the following just before the closing tag:

<div id="cometChatMount"></div>

<script>
  const COMETCHAT_CREDENTIALS = {
    appID:     "<YOUR_APP_ID>",
    appRegion: "<YOUR_APP_REGION>",
    authKey:   "<YOUR_AUTH_KEY>",
  };

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

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

  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.

4. Documentation & Advanced Configuration

For detailed information on configuration options, advanced features, and troubleshooting, refer to CometChat Widget Builder Guide .