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",

    language: "en-US",           // optional, defaults to "en-US"

    // 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"
    //autoOpenFirstItem: false,
  };

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

Update these values

Setting	What to enter / where to find it
`appID`, `region`, `authKey`	Copy from Dashboard
`language`	Optional locale for the widget UI. Defaults to `en-US`. Supported: `en-US`, `en-GB`, `fr`, `de`, `es`, `hi`, `ja`, `zh`, `zh-TW`, `pt`, `ru`, `it`, `nl`, `tr`, `ko`, `sv`, `ms`, `lt`, `hu`.
`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).
`autoOpenFirstItem`	When set to `false`, the widget does not automatically open the first conversation on load. Defaults to `true`.

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"

    language: "en-US",              // optional, defaults to "en-US"

    // 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"
    //autoOpenFirstItem: false,
  };

  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.
`language`	Optional locale for the widget UI. Defaults to `en-US`. Supported: `en-US`, `en-GB`, `fr`, `de`, `es`, `hi`, `ja`, `zh`, `zh-TW`, `pt`, `ru`, `it`, `nl`, `tr`, `ko`, `sv`, `ms`, `lt`, `hu`.
`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).
`autoOpenFirstItem`	When set to `false`, the widget does not automatically open the first conversation on load. Defaults to `true`.

Use this when:

People sign in through your backend, and you generate their CometChat auth token server-side.

Server-side flow (auth token login):

Authenticate the user in your app.
If it’s their first time, call Create User (https://www.cometchat.com/docs/rest-api/users/create) — you can also request an auth token in that call.
For returning users, call Create Auth Token (https://www.cometchat.com/docs/rest-api/auth-tokens/create) to issue a fresh token.
Send the token to the browser and place it in the widget config below.
The same token works for the CometChat Widget, UI Kit, or SDK.

Full walkthrough: How to properly log in and create users in CometChat.

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",

    language: "en-US",               // optional, defaults to "en-US"

    // 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"
    //autoOpenFirstItem: false,
  };

  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.
`language`	Optional locale for the widget UI. Defaults to `en-US`. Supported: `en-US`, `en-GB`, `fr`, `de`, `es`, `hi`, `ja`, `zh`, `zh-TW`, `pt`, `ru`, `it`, `nl`, `tr`, `ko`, `sv`, `ms`, `lt`, `hu`.
`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).
`autoOpenFirstItem`	When set to `false`, the widget does not automatically open the first conversation on load. Defaults to `true`.

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