> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Add CometChat Widget to a Static HTML Website

> Learn how to embed the CometChat UI Kit Builder widget into a basic HTML website using script and DOM integration.

You can integrate the **CometChat UI Kit Builder widget** into any static HTML website by embedding a few lines of code directly into your HTML files.

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 website

## Quick Steps to Embed CometChat Widget

<Steps>
  <Step title="Register on CometChat & Gather Your Keys">
    Before you begin, sign up at the [CometChat Dashboard](https://app.cometchat.com/) and create a new app. Copy:

    * **App ID**
    * **Region**
    * **Auth Key**
  </Step>

  <Step title="Include the Chat-Embed Script in `<head>`">
    Add this inside the `<head>` section of your HTML file to load the CometChat bundle:

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

  <Step title="Embed & Initialize the Widget in `<body>`">
    Paste the following just before the closing `</body>` tag:

    ```html lines highlight={5-7, 10} theme={null}
    <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 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_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.
  </Step>

  <Step title="Troubleshooting">
    * **Widget not loading?** Check the browser console for errors and verify your App ID, Region & Auth Key.
    * **User login fails?** Ensure the `COMETCHAT_USER_UID` exists under **Users** in your CometChat Dashboard.
    * **Script blocked?** Confirm you’re using the correct `<script>` URL and that no CSP or ad-blockers are preventing it.
  </Step>
</Steps>

***

## Advanced JavaScript APIs

Once the widget is loaded, interact with it via the global `CometChatApp` object:

### Chat and Call Methods

```js theme={null}
// 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

```js theme={null}
// 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

```js theme={null}
// 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

```js theme={null}
// 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`    |

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChatApp.localize(LANGUAGE_CODE);

    Eg. CometChatApp.localize('en-US');
    ```
  </Tab>
</Tabs>

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](https://www.cometchat.com/contact).
