From fd9f5ce02c30b350914d8a5838b3ea0955efa851 Mon Sep 17 00:00:00 2001 From: "birendra.gupta" Date: Mon, 1 Jun 2026 17:21:59 +0530 Subject: [PATCH 1/2] docs: add language localization option to widget integration guides - Add optional `language` field to all widget auth flow examples (guest, uid, authToken modes) - Update code highlights to reflect new language parameter placement in configurations - Document supported language locales: en-US, en-GB, fr, de, es, hi, ja, zh, zh-TW, pt, ru, it, nl, tr, ko, sv, ms, lt, hu - Add language parameter to configuration tables across all integration guides (HTML, Shopify, Squarespace, Webflow, Wix) - Update chat-widget.mdx note to explain language field controls widget UI locale with defaults and supported values - Ensures consistent localization documentation across all platform-specific integration guides --- ai-agents/chat-widget.mdx | 14 ++++++++++---- widget/html/integration.mdx | 15 ++++++++++++--- widget/shopify/integration.mdx | 9 +++++++++ widget/squarespace/integration.mdx | 6 ++++++ widget/webflow/integration.mdx | 11 +++++++++++ widget/wix/integration.mdx | 9 +++++++++ 6 files changed, 57 insertions(+), 7 deletions(-) diff --git a/ai-agents/chat-widget.mdx b/ai-agents/chat-widget.mdx index 59d388cf6..b02bfe766 100644 --- a/ai-agents/chat-widget.mdx +++ b/ai-agents/chat-widget.mdx @@ -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}
``` -> Replace the placeholder values (app ID, region, auth key or auth token, UID, agent ID, and variant ID) with values from your deployment. Keep `chatType: "user"` and set `defaultChatID` to your agent for an AI-first experience. +> Replace the placeholder values (app ID, region, auth key or auth token, UID, agent ID, and variant ID) with values from your deployment. Keep `chatType: "user"` and set `defaultChatID` to your agent for an AI-first experience. The optional `language` field controls the widget UI locale (defaults to `en-US`); supported values: `en-US`, `en-GB`, `fr`, `de`, `es`, `hi`, `ja`, `zh`, `zh-TW`, `pt`, `ru`, `it`, `nl`, `tr`, `ko`, `sv`, `ms`, `lt`, `hu`. --- diff --git a/widget/html/integration.mdx b/widget/html/integration.mdx index f0c662e5b..d57d7cd09 100644 --- a/widget/html/integration.mdx +++ b/widget/html/integration.mdx @@ -41,7 +41,7 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any ### Copy this into `` -```html lines highlight={8-9, 11, 15-17, 22-24} +```html lines highlight={8-9, 11, 13, 17-19, 24-26}
@@ -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", @@ -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` |

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. | @@ -105,7 +108,7 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any ### Copy this into `` -```html lines highlight={8-9, 11, 14, 18-20, 25-27} +```html lines highlight={8-9, 11, 14, 16, 20-22, 27-29}
@@ -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" @@ -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` |

Adjust the widget width & height.

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

**isDocked = false** - appears embedded on the page.

| @@ -182,7 +188,7 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/ ### Copy this into `` -```html lines highlight={8-9, 13, 17-18} +```html lines highlight={8-9, 11, 13, 15, 19-20}
@@ -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", @@ -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` |

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). | diff --git a/widget/shopify/integration.mdx b/widget/shopify/integration.mdx index d650b2507..705d3c378 100644 --- a/widget/shopify/integration.mdx +++ b/widget/shopify/integration.mdx @@ -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: "", @@ -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. @@ -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, @@ -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. @@ -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", @@ -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`. --- diff --git a/widget/squarespace/integration.mdx b/widget/squarespace/integration.mdx index 4786e2bf1..a1513f24e 100644 --- a/widget/squarespace/integration.mdx +++ b/widget/squarespace/integration.mdx @@ -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: "", @@ -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). @@ -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", @@ -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. --- diff --git a/widget/webflow/integration.mdx b/widget/webflow/integration.mdx index b6a137cea..8d9e2c7c0 100644 --- a/widget/webflow/integration.mdx +++ b/widget/webflow/integration.mdx @@ -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", @@ -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` |

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. | @@ -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" @@ -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` |

Adjust the widget width & height.

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

**isDocked = false** - appears embedded on the page.

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

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). | diff --git a/widget/wix/integration.mdx b/widget/wix/integration.mdx index 1a02c9210..a2d22ab56 100644 --- a/widget/wix/integration.mdx +++ b/widget/wix/integration.mdx @@ -54,6 +54,8 @@ Add the CometChat Widget with a single snippet inside Wix’s **Embed HTML** ele 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", @@ -88,6 +90,7 @@ Add the CometChat Widget with a single snippet inside Wix’s **Embed HTML** ele | 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` |

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. | @@ -118,6 +121,8 @@ Add the CometChat Widget with a single snippet inside Wix’s **Embed HTML** ele // 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" @@ -153,6 +158,7 @@ Add the CometChat Widget with a single snippet inside Wix’s **Embed HTML** ele | --- | --- | | `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` |

Adjust the widget width & height.

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

**isDocked = false** - appears embedded on the page.

| @@ -192,6 +198,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", @@ -221,6 +229,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` |

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). | From c11c3f7ea3669f65c623c3b717e169877b56d72e Mon Sep 17 00:00:00 2001 From: "birendra.gupta" Date: Mon, 1 Jun 2026 18:39:27 +0530 Subject: [PATCH 2/2] docs(chat-widget): remove language localization details from configuration note - Remove redundant language field documentation from chat widget setup instructions - Simplify configuration note to focus on essential parameters - Language localization details are covered in separate integration guides --- ai-agents/chat-widget.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ai-agents/chat-widget.mdx b/ai-agents/chat-widget.mdx index b02bfe766..bb7a0e499 100644 --- a/ai-agents/chat-widget.mdx +++ b/ai-agents/chat-widget.mdx @@ -201,7 +201,7 @@ Choose the auth flow that matches your site: ``` -> Replace the placeholder values (app ID, region, auth key or auth token, UID, agent ID, and variant ID) with values from your deployment. Keep `chatType: "user"` and set `defaultChatID` to your agent for an AI-first experience. The optional `language` field controls the widget UI locale (defaults to `en-US`); supported values: `en-US`, `en-GB`, `fr`, `de`, `es`, `hi`, `ja`, `zh`, `zh-TW`, `pt`, `ru`, `it`, `nl`, `tr`, `ko`, `sv`, `ms`, `lt`, `hu`. +> Replace the placeholder values (app ID, region, auth key or auth token, UID, agent ID, and variant ID) with values from your deployment. Keep `chatType: "user"` and set `defaultChatID` to your agent for an AI-first experience. ---