@cometchat/chat-embed

CometChat Chat Builder No-Code Integration

1.0.7

alpha

latest

npm

Version published: 3 days ago

Maintainers: 13

Created: 2 months ago

Source

# 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 .

FAQs

What is @cometchat/chat-embed?

Is @cometchat/chat-embed well maintained?

Package last updated on 28 Aug 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install