Add CometChat Widget to a Static HTML Website

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/chat-embed@1.x.x/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

Setting	What to enter / where to find it
`appID`, `region`, `authKey`	Copy from Dashboard
`user.name`, `user.avatar`, `user.link`	Optional 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.
`variantID`	Specifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
`chatType`	Determines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
`defaultChatID`	The specific chat with user (`uid`) or group (`guid`) that should automatically open when the widget loads.
`dockedAlignment`	Controls 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/chat-embed@1.x.x/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

Setting	What to enter / where to find it
`appID`, `region`, `authKey`	Copy from Dashboard
`uid`	Pass 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.link`	Optional profile info you already store for that person.
`mode`	Keep 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.
`variantID`	Specifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
`chatType`	Determines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
`defaultChatID`	The specific chat with user (`uid`) or group (`guid`) that should automatically open when the widget loads.
`dockedAlignment`	Controls the position of the docked widget interface on the page (left side or right side).

Use this when:

People sign in to your product through your own backend
You can create a CometChat auth token on the server after they sign in
Here is how you can create users:
- API: https://www.cometchat.com/docs/rest-api/users/create
Here is how can create auth tokens:
- API: https://www.cometchat.com/docs/rest-api/auth-tokens/create

Copy this into `<head>`

<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/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

Setting	What to enter / where to find it
`appID`, `region`	Copy from Dashboard
`mode`	Keep as `"authToken"` so the widget expects a server-issued token.
`authToken`	Generate 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.
`variantID`	Specifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used.
`chatType`	Determines the type of conversation the widget initiates by default (one-on-one user chat or a group chat).
`defaultChatID`	The specific chat with user (`uid`) or group (`guid`) that should automatically open when the widget loads.
`dockedAlignment`	Controls the position of the docked widget interface on the page (left side or right side).

Anonymous Chat (Guest Mode)

Create + Log In User On The Fly

Backend-Created User (Auth Token Login)

​1. Anonymous Chat (Guest Mode)

​Copy this into <head>

​Copy this into <body>

​Update these values

​2. Create + Log In User On The Fly

​Copy this into <head>

​Copy this into <body>

​Update these values

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

​Copy this into <head>

​Copy this into <body>

​Update these values

1. Anonymous Chat (Guest Mode)

Copy this into `<head>`

Copy this into `<body>`

Update these values

2. Create + Log In User On The Fly

Copy this into `<head>`

Copy this into `<body>`

Update these values

3. Backend-Created User (Auth Token Login)

Copy this into `<head>`

Copy this into `<body>`

Update these values