> ## Documentation Index > Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Add CometChat Widget to a Static HTML Website > Learn how to integrate the CometChat Widget into a static HTML website with step-by-step instructions. 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:** * Let anyone chat anonymously without signing up or logging in. * Perfect for marketing pages, help centers, or demo sites. * 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. * 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 `` ```html theme={null} ``` ### Copy this into `` ```html lines highlight={8-9, 11, 15-17, 22-24} theme={null}

``` ### Update these values | Setting | What to enter / where to find it | | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `appID`, `region`, `authKey` | Copy from **[Dashboard](https://app.cometchat.com)** | | `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.

``` ### Update these values | Setting | What to enter / where to find it | | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `appID`, `region`, `authKey` | Copy from **[Dashboard](https://app.cometchat.com)** | | `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). | | `autoOpenFirstItem` | When set to `false`, the widget does not automatically open the first conversation on load. Defaults to `true`. | ## 3. Backend-Created User (Auth Token Login) **Use this when:** * People sign in through your backend, and you generate their CometChat auth token server-side. **Server-side flow (auth token login):** 1. Authenticate the user in your app. 2. If it’s their first time, call **Create User** ([https://www.cometchat.com/docs/rest-api/users/create](https://www.cometchat.com/docs/rest-api/users/create)) — you can also request an auth token in that call. 3. For returning users, call **Create Auth Token** ([https://www.cometchat.com/docs/rest-api/auth-tokens/create](https://www.cometchat.com/docs/rest-api/auth-tokens/create)) to issue a fresh token. 4. Send the token to the browser and place it in the widget config below. 5. The same token works for the CometChat Widget, UI Kit, or SDK. Full walkthrough: [How to properly log in and create users in CometChat](https://community.cometchat.com/t/how-to-properly-log-in-and-create-users-in-cometchat/31). ### Copy this into `` ```html theme={null} ``` ### Copy this into `` ```html lines highlight={8-9, 13, 17-18} theme={null}

``` ### Update these values | Setting | What to enter / where to find it | | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `appID`, `region` | Copy from **[Dashboard](https://app.cometchat.com)** | | `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.