Skip to main content
Add the CometChat Widget by pasting one small HTML snippet. It drops in like any other embed—copy the code, paste it into your page, then tell the widget how people should sign in. Choose the sign-in option that matches your site:

Anonymous Chat (Guest Mode)

  • Let anyone chat anonymously without signing up or logging in.
  • Perfect for marketing pages, help centers, or demo sites.

Create + Log In User On The Fly

  • Use your existing user IDs (email, username etc.) to create and log in users automatically.
  • No backend needed—CometChat creates users the first time they visit.

Backend-Created User (Auth Token Login)

  • Create your users via server and login them using secure auth token on frontend.
  • Ideal for sites with existing login systems and backends.

​
1. Anonymous Chat (Guest Mode)

Use this when:
  • Anyone should be able to start chatting instantly
  • You do not have (or do not want) your own login form yet

​
Copy this into <head>

<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/[email protected]/dist/main.js"></script>

​
Copy this into <body>

<!-- Where the chat widget should appear -->
<div id="cometChatMount"></div>

<script type="module">

  //  EDIT ONLY THE TEXT INSIDE QUOTES
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",   // e.g. "us", "eu", "in"
    mode: "guest",               // keep this as "guest"
    authKey: "YOUR_AUTH_KEY",

    // Optional: how the guest appears in chat
    user: {
      name: "Guest User",
      avatar: "",                // e.g. "https://example.com/guest.png"
      link: ""                   // e.g. "https://example.com/profile"
    },

    // Widget placement + size
    mount: "#cometChatMount",
    width: "450px",
    height: "80vh",
    isDocked: true,               // true = docked widget (recommended)
    //variantID: "YOUR_VARIANT_ID",
    //chatType: "user" | "group",
    //defaultChatID: "uid_or_guid",
    //dockedAlignment: "left" | "right"
  };

  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
</script>

​
Update these values

SettingWhat to enter / where to find it
appID, region, authKeyCopy from Dashboard
user.name, user.avatar, user.linkOptional guest display info—leave blank if you don’t need it.
width, height, isDocked

Adjust the widget width & height.

isDocked = true - appears as icon on page and expands when clicked.

isDocked = false - appears embedded on the page.

variantIDSpecifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
chatTypeDetermines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
defaultChatIDThe specific chat with user (uid) or group (guid) that should automatically open when the widget loads.
dockedAlignmentControls the position of the docked widget interface on the page (left side or right side).

​
2. Create + Log In User On The Fly

Use this when:
  • Every person already has an ID inside your product (email, username etc.)
  • You want that ID to drive their chat identity automatically

​
Copy this into <head>

<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/[email protected]/dist/main.js"></script>

​
Copy this into <body>

<!-- Where the chat widget should appear -->
<div id="cometChatMount"></div>

<script type="module">

  //  EDIT ONLY THE TEXT INSIDE QUOTES
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",      // e.g. "us", "eu", "in"
    mode: "uid",                    // keep this as "uid"
    authKey: "YOUR_AUTH_KEY",

    // IMPORTANT: this must be unique per user
    uid: "UNIQUE_USER_ID",          // e.g. "user_123", "customer_42"

    // Optional: user profile shown in chat
    user: {
      name: "User Name",            // e.g. "Alex Johnson"
      avatar: "https://example.com/uid.png",
      link: "https://example.com/profile/uid"
    },

    // Widget placement + size
    mount: "#cometChatMount",
    width: "450px",
    height: "80vh",
    isDocked: true,
    //variantID: "YOUR_VARIANT_ID",
    //chatType: "user" | "group",
    //defaultChatID: "uid_or_guid",
    //dockedAlignment: "left" | "right"
  };

  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
</script>

​
Update these values

SettingWhat to enter / where to find it
appID, region, authKeyCopy from Dashboard
uidPass the unique ID from your page (for example customer.id). CometChat creates the user the first time it sees that ID.
user.name, user.avatar, user.linkOptional profile info you already store for that person.
modeKeep this as "uid" so the widget knows you’re logging in with IDs.
width, height, isDocked

Adjust the widget width & height.

isDocked = true - appears as icon on page and expands when clicked.

isDocked = false - appears embedded on the page.

variantIDSpecifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
chatTypeDetermines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
defaultChatIDThe specific chat with user (uid) or group (guid) that should automatically open when the widget loads.
dockedAlignmentControls the position of the docked widget interface on the page (left side or right side).

​
3. Backend-Created User (Auth Token Login)

Use this when:

​
Copy this into <head>

<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/[email protected]/dist/main.js"></script>

​
Copy this into <body>

<!-- Where the chat widget should appear -->
<div id="cometChatMount"></div>

<script type="module">

  //  EDIT ONLY THE TEXT INSIDE QUOTES
  const COMETCHAT_WIDGET_CONFIG = {
    appID: "YOUR_APP_ID",
    region: "YOUR_APP_REGION",       // e.g. "us", "eu", "in"
    mode: "authToken",               // keep this as "authToken"

    // Generated BY YOUR BACKEND after user login
    authToken: "USER_AUTH_TOKEN",

    // Widget placement + size
    mount: "#cometChatMount",
    width: "450px",
    height: "80vh",
    isDocked: true,
    //variantID: "YOUR_VARIANT_ID",
    //chatType: "user" | "group",
    //defaultChatID: "uid_or_guid",
    //dockedAlignment: "left" | "right"
  };

  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
</script>

​
Update these values

SettingWhat to enter / where to find it
appID, regionCopy from Dashboard
modeKeep as "authToken" so the widget expects a server-issued token.
authTokenGenerate on your server: (1) call the CometChat Auth Token API with your API key, (2) get the token for that user, (3) send it to the page and place it here.
width, height, isDocked

Adjust the widget width & height.

isDocked = true - appears as icon on page and expands when clicked.

isDocked = false - appears embedded on the page.

variantIDSpecifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
chatTypeDetermines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
defaultChatIDThe specific chat with user (uid) or group (guid) that should automatically open when the widget loads.
dockedAlignmentControls the position of the docked widget interface on the page (left side or right side).