Skip to content

docs: add language localization option to widget integration guides #382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
swapnil-cometchat merged 2 commits into from
Jun 2, 2026
Merged

docs: add language localization option to widget integration guides #382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd9f5ce
docs: add language localization option to widget integration guides
birendraprasad-gupta Jun 1, 2026
c11c3f7
docs(chat-widget): remove language localization details from configur…
birendraprasad-gupta Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions ai-agents/chat-widget.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Choose the auth flow that matches your site:
- Let anyone chat anonymously without signing up or logging in.
- Perfect for marketing pages, help centers, or demo sites.

```html lines highlight={7-8, 10, 14-16, 21-22, 25-26}
```html lines highlight={7-8, 10, 12, 16-18, 23-24, 27-28}
<div id="cometChatMount"></div>

<script type="module">
Expand All @@ -59,6 +59,8 @@ Choose the auth flow that matches your site:
mode: "guest",
authKey: "YOUR_AUTH_KEY",

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

// Optional: how the guest appears in chat
user: {
name: "Guest User",
Expand Down Expand Up @@ -99,7 +101,7 @@ Choose the auth flow that matches your site:
- 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.

```html lines highlight={7-8, 10, 13, 17-19, 24-25, 28-29}
```html lines highlight={7-8, 10, 13, 15, 19-21, 26-27, 30-31}
<div id="cometChatMount"></div>

<script type="module">
Expand All @@ -114,6 +116,8 @@ Choose the auth flow that matches your site:
// 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",
Expand Down Expand Up @@ -154,7 +158,7 @@ Choose the auth flow that matches your site:
- Create your users via server and login them using secure auth token on frontend.
- Ideal for sites with existing login systems and backends.

```html lines highlight={7-8, 12, 16-17, 20-21}
```html lines highlight={7-8, 12, 14, 18-19, 22-23}
<div id="cometChatMount"></div>

<script type="module">
Expand All @@ -168,6 +172,8 @@ Choose the auth flow that matches your site:
// 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: "700px",
Expand Down
15 changes: 12 additions & 3 deletions widget/html/integration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any

### Copy this into `<body>`

```html lines highlight={8-9, 11, 15-17, 22-24}
```html lines highlight={8-9, 11, 13, 17-19, 24-26}
<!-- Where the chat widget should appear -->
<div id="cometChatMount"></div>

Expand All @@ -54,6 +54,8 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any
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",
Expand Down Expand Up @@ -82,6 +84,7 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any
| Setting | What to enter / where to find it |
| --- | --- |
| `appID`, `region`, `authKey` | Copy from **[Dashboard](https://app.cometchat.com)** |
| `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` | <p>Adjust the widget width & height.</p><p>**isDocked = true** - appears as icon on page and expands when clicked.</p> <p>**isDocked = false** - appears embedded on the page.</p> |
| `variantID` | Specifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used. |
Expand All @@ -105,7 +108,7 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any

### Copy this into `<body>`

```html lines highlight={8-9, 11, 14, 18-20, 25-27}
```html lines highlight={8-9, 11, 14, 16, 20-22, 27-29}
<!-- Where the chat widget should appear -->
<div id="cometChatMount"></div>

Expand All @@ -121,6 +124,8 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any
// 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"
Expand Down Expand Up @@ -150,6 +155,7 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any
| --- | --- |
| `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. |
| `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` | <p>Adjust the widget width & height.</p><p>**isDocked = true** - appears as icon on page and expands when clicked.</p> <p>**isDocked = false** - appears embedded on the page.</p> |
Expand Down Expand Up @@ -182,7 +188,7 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/

### Copy this into `<body>`

```html lines highlight={8-9, 13, 17-18}
```html lines highlight={8-9, 11, 13, 15, 19-20}
<!-- Where the chat widget should appear -->
<div id="cometChatMount"></div>

Expand All @@ -197,6 +203,8 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/
// 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",
Expand All @@ -220,6 +228,7 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/
| `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. |
| `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` | <p>Adjust the widget width & height.</p><p>**isDocked = true** - appears as icon on page and expands when clicked.</p> <p>**isDocked = false** - appears embedded on the page.</p> |
| `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). |
Expand Down
9 changes: 9 additions & 0 deletions widget/shopify/integration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ Add the CometChat Widget with a single snippet inside your Shopify theme. Choose
mode: "guest",
authKey: "YOUR_AUTH_KEY",

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

user: {
name: "Guest User",
avatar: "",
Expand All @@ -77,6 +79,7 @@ Add the CometChat Widget with a single snippet inside your Shopify theme. Choose

**Update these values:**
- `appID`, `region`, `authKey`: Copy from the CometChat Dashboard (use an **App Auth Key**, not REST API key).
- `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.
- `width`, `height`, `isDocked`: Size/placement (`isDocked = true` shows a docked bubble).
- `variantID`, `chatType`, `defaultChatID`, `dockedAlignment`, `autoOpenFirstItem`: Optional widget targeting/placement controls. Set `autoOpenFirstItem: false` to prevent the widget from automatically opening the first conversation on load.
Expand Down Expand Up @@ -112,6 +115,8 @@ Add the CometChat Widget with a single snippet inside your Shopify theme. Choose
mode: "uid",
authKey: "YOUR_AUTH_KEY",

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

uid,
user: {
name,
Expand All @@ -136,6 +141,7 @@ Add the CometChat Widget with a single snippet inside your Shopify theme. Choose
**Update these values:**
- `appID`, `region`, `authKey`: Copy from Dashboard (App Auth Key).
- `uid`: Leave as-is; it pulls Shopify customer ID or a stored guest 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 shown in chat.
- `width`, `height`, `isDocked`, `variantID`, `chatType`, `defaultChatID`, `dockedAlignment`: Optional UI/placement controls.

Expand Down Expand Up @@ -176,6 +182,8 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/
// Inject the token your backend generated for the logged-in customer
authToken: "USER_AUTH_TOKEN",

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

mount: "#cometChatMount",
width: "450px",
height: "80vh",
Expand All @@ -193,6 +201,7 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/
**Update these values:**
- `appID`, `region`: Copy from Dashboard.
- `authToken`: Generate server-side after the user logs in (using CometChat Auth Token API) and output it into this snippet (e.g., from a Shopify app proxy or metafield).
- `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`.
- UI options: `width`, `height`, `isDocked`, `variantID`, `chatType`, `defaultChatID`, `dockedAlignment`.

---
Expand Down
6 changes: 6 additions & 0 deletions widget/squarespace/integration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ Add the CometChat Widget by pasting one small code snippet. It drops in like any
mode: "guest",
authKey: "YOUR_AUTH_KEY",

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

user: {
name: "Guest User",
avatar: "",
Expand All @@ -84,6 +86,7 @@ Add the CometChat Widget by pasting one small code snippet. It drops in like any

**Update these values:**
- `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.
- `width`, `height`, `isDocked`: Widget dimensions (`isDocked = true` = floating icon; `false` = embedded).

Expand Down Expand Up @@ -230,6 +233,8 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/
mode: "authToken",
authToken: "USER_AUTH_TOKEN",

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

mount: "#cometChatMount",
width: "400px",
height: "80vh",
Expand All @@ -250,6 +255,7 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/
**Update these values:**
- `appID`, `region`, `authKey` | Copy from **Dashboard**.
- `authToken` | Generated by your backend and passed to this page.
- `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 widget dimensions/placement.

---
Expand Down
11 changes: 11 additions & 0 deletions widget/webflow/integration.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ Click **Save**, publish the site, then **Visit Website** to confirm the widget a
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",
Expand Down Expand Up @@ -102,6 +104,7 @@ Click **Save**, publish the site, then **Visit Website** to confirm the widget a
| Setting | What to enter / where to find it |
| --- | --- |
| `appID`, `region`, `authKey` | Copy from **[Dashboard](https://app.cometchat.com)** |
| `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` | <p>Adjust the widget width & height.</p><p>**isDocked = true** - appears as icon on page and expands when clicked.</p> <p>**isDocked = false** - appears embedded on the page.</p> |
| `variantID` | Specifies a particular version or snapshot of your widget configuration. If omitted, the first available variant is used. |
Expand Down Expand Up @@ -138,6 +141,8 @@ Click **Save**, publish the site, then **Visit Website** to confirm the widget a
// 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"
Expand Down Expand Up @@ -173,6 +178,7 @@ Click **Save**, publish the site, then **Visit Website** to confirm the widget a
| --- | --- |
| `appID`, `region`, `authKey` | Copy from **[Dashboard](https://app.cometchat.com)** |
| `uid` | Pass the unique ID from your page (for example `member.id`, email, or a UUID). 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` | <p>Adjust the widget width & height.</p><p>**isDocked = true** - appears as icon on page and expands when clicked.</p> <p>**isDocked = false** - appears embedded on the page.</p> |
Expand Down Expand Up @@ -210,6 +216,7 @@ Use this when your Webflow site uses Memberstack and you want the widget to log
authKey: "YOUR_AUTH_KEY",
mount: "#cometChatMount",
mode: "uid",
language: "en-US", // optional, defaults to "en-US"
width: "700px",
height: "500px",
isDocked: true,
Expand Down Expand Up @@ -288,6 +295,7 @@ Use this when your Webflow site uses Memberstack and you want the widget to log
authKey: "YOUR_AUTH_KEY",
mount: "#cometChatMount",
mode: "uid",
language: "en-US", // optional, defaults to "en-US"
width: "700px",
height: "500px",
isDocked: true,
Expand Down Expand Up @@ -397,6 +405,8 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/
// 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",
Expand Down Expand Up @@ -426,6 +436,7 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/
| `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. |
| `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` | <p>Adjust the widget width & height.</p><p>**isDocked = true** - appears as icon on page and expands when clicked.</p> <p>**isDocked = false** - appears embedded on the page.</p> |
| `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). |
Expand Down
Loading
Loading