<p align="center">
  <img alt="CometChat" src="https://assets.cometchat.io/website/images/logos/banner.png">
</p>
<p>
  <img alt="version" src="https://img.shields.io/badge/version-v1.0.16-blue" />
  <img alt="status" src="https://img.shields.io/badge/status-stable-brightgreen" />
</p>
# CometChat Widget Builder 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 <head> section of your HTML file to load the CometChat bundle:

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

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

Paste the following just before the closing </body> tag:

```html
<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](https://www.cometchat.com/docs/widget/builder-guide-html) .
