From 1b04a7be50530b2c64959f3676b3d62092b40d43 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 5 Jan 2026 17:46:50 +0530 Subject: [PATCH 01/11] Update send-message.mdx --- sdk/flutter/send-message.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/sdk/flutter/send-message.mdx b/sdk/flutter/send-message.mdx index c1f6a634..24f1da14 100644 --- a/sdk/flutter/send-message.mdx +++ b/sdk/flutter/send-message.mdx @@ -114,6 +114,8 @@ When a text message is sent successfully, the response will include a `TextMessa To set a quoted message for a message, use the `setQuotedMessageId` and `setQuotedMessage` method of the TextMessage class. This method accepts the ID of the message to be quoted. + + ```dart textMessage.quotedMessageId = 0 From cde3b18d519f1a2b78cd3d5f2759860a5b7a9cf9 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 5 Jan 2026 17:47:25 +0530 Subject: [PATCH 02/11] Update integration.mdx --- widget/html/integration.mdx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/widget/html/integration.mdx b/widget/html/integration.mdx index 0f6e86dc..156c8a53 100644 --- a/widget/html/integration.mdx +++ b/widget/html/integration.mdx @@ -160,12 +160,16 @@ Add the CometChat Widget by pasting one small HTML snippet. It drops in like any **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 +- 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) — 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) 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 `` From 8966b9f481f57758282717a49d24f9032e9996a4 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Mon, 5 Jan 2026 17:53:29 +0530 Subject: [PATCH 03/11] updates steps for squarespace, webflow and wix --- widget/squarespace/integration.mdx | 319 +++++++++++++++++++--------- widget/webflow/integration.mdx | 319 +++++++++++++++++++--------- widget/wix/integration.mdx | 321 ++++++++++++++++++++--------- 3 files changed, 659 insertions(+), 300 deletions(-) diff --git a/widget/squarespace/integration.mdx b/widget/squarespace/integration.mdx index 3c641b20..d959f544 100644 --- a/widget/squarespace/integration.mdx +++ b/widget/squarespace/integration.mdx @@ -1,109 +1,230 @@ --- title: "Add CometChat Widget to Squarespace" sidebarTitle: "Integration" -description: "Learn how to embed the CometChat UI Kit Builder widget into your Squarespace website using Code Injection and Code Blocks." +description: "Drop the CometChat Widget into Squarespace using Code Injection or a Code Block, then pick the sign-in flow that matches your site." --- +import { CardGroup, Card } from "mintlify"; import AdvancedJSAPIs from "/snippets/widget/advanced-js-apis.mdx"; -You can integrate the **CometChat UI Kit Builder widget** into your Squarespace site without touching your theme files—just use Squarespace’s Code Injection and Page Code Blocks. - -Once installed, it will: -- Load and initialize the widget on page load -- Automatically log in a predefined user -- Display a docked chat window on your site - -## Quick Steps to Embed CometChat Widget - - - - -Before you begin, sign up at the [CometChat Dashboard](https://app.cometchat.com/) and create a new app. Copy: -- **App ID** -- **Region** -- **Auth Key** - - - -1. In your Squarespace Dashboard, go to **Website → Pages → Custom Code → Code Injection**. -2. In the **Header** box, paste: - - ```html - - ``` -This makes the CometChat library available site-wide. - - - -1. Still under **Website → Pages → Custom Code → Code Injection**, scroll to the **Footer** box. -2. Paste the following just before ``: - - ```html lines highlight={5-7, 10} -
- - - ``` - -> Replace ``, ``, ``, and `COMETCHAT_USER_UID` with your actual credentials and user ID. - - - -If you only want the widget on a single page, instead of site-wide: -1. In **Pages**, hover the desired page → ⚙️ **Page Settings** → **Advanced**. -2. Paste the `
` into **Page Header** or **Page Footer**. -3. Use a **Code Block** in the page editor if you want to position the widget within specific content. - - - -- **Widget not appearing?** - - Verify your App ID, Region & Auth Key. - - Check browser console for errors (CSP, ad-blockers). -- **Login fails?** - - Ensure the `COMETCHAT_USER_UID` matches an existing user in your CometChat Dashboard. -- **Styling issues?** - - Add custom CSS in **Design → Custom CSS** to override default widget styles. - - - +Add the CometChat Widget with a small snippet. It drops in like any other embed—copy the code, paste it into Squarespace, then pick how people sign in. + +**Choose the sign-in option that matches your site:** + + + + - Let anyone chat anonymously without signing up or logging in. + - Great for marketing pages, help centers, or demos. + + + - 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 log them in with a secure auth token on the frontend. + - Ideal for sites with existing login systems and backends. + + + +--- + +### Squarespace placement (applies to all login options) + +- In **Website → Pages → Custom Code → Header**, add: + +```html + +``` + +- In **Website → Pages → Custom Code → Footer** (site-wide) or a page **Code Block** (page-specific), paste the matching snippet below. Keep the mount `
` and the `script type="module"` together in the same place. + +--- + +## 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 + +### Paste this in Footer or a Code Block + +```html lines highlight={8-9, 11, 15-17, 22-24} + +
+ + +``` + +### 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.

| +| `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 + +### Paste this in Footer or a Code Block + +```html lines highlight={8-9, 11, 14, 18-20, 25-27} + +
+ + +``` + +### 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). | + +## 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) — 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) 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). + +### Paste this in Footer or a Code Block + +```html lines highlight={8-9, 13, 17-18} + +
+ + +``` + +### 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.

| +| `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). | + +--- + +### Troubleshooting + +- **Widget not appearing?** Verify App ID, Region & Auth Key (or auth token), and check browser console for CSP/ad-blocker errors. +- **Login fails?** For UID mode, ensure the `uid` exists or is created on first visit; for auth token mode, make sure the token matches the logged-in user. +- **Styling issues?** Add custom CSS in **Design → Custom CSS** to override defaults. +- **Page-specific placement?** Use a page-level Code Block instead of the global Footer if you only want it on one page. --- diff --git a/widget/webflow/integration.mdx b/widget/webflow/integration.mdx index cde0923f..6581acd6 100644 --- a/widget/webflow/integration.mdx +++ b/widget/webflow/integration.mdx @@ -1,110 +1,229 @@ --- title: "Add CometChat Widget to Webflow" sidebarTitle: "Integration" -description: "Learn how to embed the CometChat UI Kit Builder widget into your Webflow website using the Embed component." +description: "Drop the CometChat Widget into Webflow with the Embed component, then pick the sign-in flow that matches your site." --- +import { CardGroup, Card } from "mintlify"; import AdvancedJSAPIs from "/snippets/widget/advanced-js-apis.mdx"; -You can integrate the **CometChat UI Kit Builder widget** into your Webflow site by using the built-in Embed element in the Designer. - -Once installed, it will: -- Load and initialize the widget on page load -- Automatically log in a predefined user -- Display a docked chat window on your site - -## Quick Steps to Embed CometChat Widget - - - - -Before you begin, sign up at the [CometChat Dashboard](https://app.cometchat.com/) and create a new app. Copy: -- **App ID** -- **Region** -- **Auth Key** - - - -1. In your Webflow project, open the **Designer**. -2. From the **Add** panel (A), drag the **Embed** component onto your page where you want the widget to appear. - - - -1. In the Webflow Dashboard, navigate to **Project Settings → Custom Code → Head Code**. -2. Paste: - - ```html - - ``` -3. Save changes and **Publish** your site. - - - -Back in the Designer, with your Embed component selected, click **Edit Custom Code** and paste: - - ```html lines highlight={4-6,9} -
- - ``` - -> Replace ``, ``, ``, and `COMETCHAT_USER_UID` with your actual credentials and user ID. - - - -- Click **Publish** in the Designer to push your changes to the live site. -- Visit your published site to confirm the widget loads. - - - -- **Widget not loading?** - - Verify your App ID, Region & Auth Key. - - Check the browser console for errors. -- **Login fails?** - - Ensure `COMETCHAT_USER_UID` exists under **Users** in your CometChat Dashboard. -- **Embed blank?** - - Make sure you republished the site after adding custom code. - - - +Add the CometChat Widget with a small snippet. It drops in like any other embed—use Webflow’s Embed component, then pick how people sign in. + +**Choose the sign-in option that matches your site:** + + + + - Let anyone chat anonymously without signing up or logging in. + - Great for marketing pages, help centers, or demos. + + + - 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 log them in with a secure auth token on the frontend. + - Ideal for sites with existing login systems and backends. + + + +--- + +### Webflow placement (applies to all login options) + +- Add the chat-embed script once in **Project Settings → Custom Code → Head Code** (then **Publish**): + +```html + +``` + +- In the Designer, drag an **Embed** component where you want chat to appear, click **Edit Custom Code**, and paste the snippet for your chosen sign-in option below. If you prefer everything in the Embed, place the script tag above the snippet. + +--- + +## 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 + +### Paste this inside the Webflow Embed + +```html lines highlight={8-9, 11, 15-17, 22-24} + +
+ + +``` + +### 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.

| +| `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 + +### Paste this inside the Webflow Embed + +```html lines highlight={8-9, 11, 14, 18-20, 25-27} + +
+ + +``` + +### 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). | + +## 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) — 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) 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). + +### Paste this inside the Webflow Embed + +```html lines highlight={8-9, 13, 17-18} + +
+ + +``` + +### 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.

| +| `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). | + +--- + +### Troubleshooting + +- **Widget not loading?** Verify App ID, Region & Auth Key (or auth token) and publish after adding custom code. +- **Login fails?** For UID mode, ensure the `uid` exists or is created on first visit; for auth token mode, make sure the token matches the logged-in user. +- **Embed blank?** Confirm the script tag is included (Head Code or above the snippet) and that the site is republished. --- diff --git a/widget/wix/integration.mdx b/widget/wix/integration.mdx index 67d7c306..f99464a4 100644 --- a/widget/wix/integration.mdx +++ b/widget/wix/integration.mdx @@ -1,111 +1,230 @@ --- title: "Add CometChat Widget to Wix" sidebarTitle: "Integration" -description: "Learn how to embed the CometChat UI Kit Builder widget into your Wix website using Wix’s HTML Embed element." +description: "Drop the CometChat Widget into Wix with the HTML Embed element, then pick the sign-in flow that matches your site." --- +import { CardGroup, Card } from "mintlify"; import AdvancedJSAPIs from "/snippets/widget/advanced-js-apis.mdx"; -You can integrate the **CometChat UI Kit Builder widget** into your Wix site without touching theme code—just use Wix’s **Embed a Widget** feature. - -Once installed, it will: -- Load and initialize the widget on page load -- Automatically log in a predefined user -- Display a docked chat window on your site - -## Quick Steps to Embed CometChat Widget - - - - -Before you begin, sign up at the [CometChat Dashboard](https://app.cometchat.com/) and create a new app. Copy: -- **App ID** -- **Region** -- **Auth Key** - - - -1. In your Wix Dashboard, open the **Editor**. -2. Click the **Add (+)** button → **Embed** → **Embed a Widget**. -3. Drag the **HTML iframe** element onto your desired page location. - - - -1. Click **Enter Code** on the HTML settings panel. -2. Switch to **Code** mode. -3. Paste: - ```html - - ``` -This ensures the CometChat library is loaded. - - - -Within the same **Enter Code** box, add your container and initialization script: - - ```html lines highlight={5-7,10} -
- - - ``` -> Replace ``, ``, ``, and `COMETCHAT_USER_UID` with your actual credentials and user ID. - - - -- Use the resize handles on the embed element to set your preferred width and height. -- In **Settings → Mode**, ensure **Code** (not **Website Address**) is selected. - - - -- **Widget not loading?** - - Verify your App ID, Region & Auth Key. - - Check the browser console for errors. -- **Login fails?** - - Ensure `COMETCHAT_USER_UID` exists under **Users** in your CometChat Dashboard. -- **Embed blank?** - - Confirm the element is set to **Code** mode. - - - +Add the CometChat Widget with a small snippet. It drops in like any other embed—use Wix’s HTML Embed element, then pick how people sign in. + +**Choose the sign-in option that matches your site:** + + + + - Let anyone chat anonymously without signing up or logging in. + - Great for marketing pages, help centers, or demos. + + + - 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 log them in with a secure auth token on the frontend. + - Ideal for sites with existing login systems and backends. + + + +--- + +### Wix placement (applies to all login options) + +- In the Wix Editor, add **Embed → Embed a Widget** to your page and switch it to **Code** mode. +- Add the chat-embed script once in **Settings → Custom Code → Head** or place it at the top of the embed code: + +```html + +``` + +- Then, inside the same embed, paste the snippet for your chosen sign-in option below. Use the resize handles on the embed element for width/height. + +--- + +## 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 + +### Paste this inside the Wix HTML Embed + +```html lines highlight={10-11, 13, 17-19, 24-26} + +
+ + +``` + +### 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.

| +| `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 + +### Paste this inside the Wix HTML Embed + +```html lines highlight={10-11, 13, 16, 20-22, 27-29} + +
+ + +``` + +### 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). | + +## 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) — 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) 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). + +### Paste this inside the Wix HTML Embed + +```html lines highlight={10-11, 15, 19-20} + +
+ + +``` + +### 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.

| +| `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). | + +--- + +### Troubleshooting + +- **Widget not loading?** Verify App ID, Region & Auth Key (or auth token) and confirm the embed is in **Code** mode. +- **Login fails?** For UID mode, ensure the `uid` exists or is created on first visit; for auth token mode, make sure the token matches the logged-in user. +- **Embed blank?** Confirm you published/saved after adding the code and that the CDN script is included (head or top of embed). --- From eda3408a60bb911cfb243b926bdab5123b279f07 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 6 Jan 2026 12:19:08 +0530 Subject: [PATCH 04/11] Update integration.mdx --- widget/wix/integration.mdx | 113 +++++++++++++++++++++++++++++++++++-- 1 file changed, 109 insertions(+), 4 deletions(-) diff --git a/widget/wix/integration.mdx b/widget/wix/integration.mdx index f99464a4..7157d246 100644 --- a/widget/wix/integration.mdx +++ b/widget/wix/integration.mdx @@ -30,14 +30,119 @@ Add the CometChat Widget with a small snippet. It drops in like any other embed ### Wix placement (applies to all login options) -- In the Wix Editor, add **Embed → Embed a Widget** to your page and switch it to **Code** mode. -- Add the chat-embed script once in **Settings → Custom Code → Head** or place it at the top of the embed code: +- In the Wix Editor, open the page where chat should appear. +- Click **+ Add Elements → Embed Code → Embed HTML** and drag it where you want (bottom-right/docked area is typical). +- Click **Enter Code / Edit Code** on that element and paste this entire block: ```html - + + + + + + + + +
+ + + ``` -- Then, inside the same embed, paste the snippet for your chosen sign-in option below. Use the resize handles on the embed element for width/height. +- Click **Apply/Update** in the code editor. + +**Add Page Code (bridge script)** + +In the same page, open **Page Code** (bottom panel) and paste: + +```js +import wixUsers from 'wix-users'; + +$w.onReady(async function () { + const htmlComp = $w('#WixChat1'); // ID of your HTML Embed element + let lastUserId = null; + + async function sendUserToCometChat() { + const user = wixUsers.currentUser; + if (user.loggedIn) { + const userId = user.id; + const email = await user.getEmail(); + const userName = email ? email.split('@')[0] : 'WixUser'; + htmlComp.postMessage({ action: "login", uid: userId, name: userName }); + lastUserId = userId; + } else { + htmlComp.postMessage({ action: "logout" }); + lastUserId = null; + } + } + + await sendUserToCometChat(); // initial check + + wixUsers.onLogin(() => { + sendUserToCometChat(); + }); + + // Poll for logout (Wix lacks onLogout) + setInterval(async () => { + const user = wixUsers.currentUser; + const isLoggedIn = user.loggedIn; + if (!isLoggedIn && lastUserId !== null) { + htmlComp.postMessage({ action: "logout" }); + lastUserId = null; + } + }, 3000); +}); +``` + +- Update `#WixChat1` to the ID of your HTML Embed element. +- Swap `COMETCHAT_APP_ID`, `COMETCHAT_REGION`, `COMETCHAT_AUTH_KEY` with your app credentials and keep them consistent with your chosen sign-in flow below. --- From d86dc964b2dd2496af2115ed77a90e2fb41957ce Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 13 Jan 2026 14:59:52 +0530 Subject: [PATCH 05/11] Update integration.mdx --- widget/squarespace/integration.mdx | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/widget/squarespace/integration.mdx b/widget/squarespace/integration.mdx index d959f544..54864d66 100644 --- a/widget/squarespace/integration.mdx +++ b/widget/squarespace/integration.mdx @@ -28,17 +28,18 @@ Add the CometChat Widget with a small snippet. It drops in like any other embed --- -### Squarespace placement (applies to all login options) - -- In **Website → Pages → Custom Code → Header**, add: - -```html - -``` - -- In **Website → Pages → Custom Code → Footer** (site-wide) or a page **Code Block** (page-specific), paste the matching snippet below. Keep the mount `
` and the `script type="module"` together in the same place. - ---- +### Squarespace placement (Code Injection) + +**Steps to add custom code:** +1) Log in to Squarespace and open your website dashboard. +2) In the left sidebar, click **Website** (top-left) and select the site. +3) Scroll to **Marketing Tools** → **Custom Code**. +4) Click **Code Injection**. +5) You’ll see **Header** and **Footer** sections—paste the integration script below into **Footer**. +6) Click **Save**. +7) Refresh your live site and open the page where chat should load to verify. + +---- ## 1. Anonymous Chat (Guest Mode) From da1d9bd09bd98b378e38403cad399da2ca1b8885 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 13 Jan 2026 17:47:38 +0530 Subject: [PATCH 06/11] Update integration.mdx --- widget/squarespace/integration.mdx | 274 ++++++++++++++++------------- 1 file changed, 147 insertions(+), 127 deletions(-) diff --git a/widget/squarespace/integration.mdx b/widget/squarespace/integration.mdx index 54864d66..3ff35f0d 100644 --- a/widget/squarespace/integration.mdx +++ b/widget/squarespace/integration.mdx @@ -7,216 +7,236 @@ description: "Drop the CometChat Widget into Squarespace using Code Injection or import { CardGroup, Card } from "mintlify"; import AdvancedJSAPIs from "/snippets/widget/advanced-js-apis.mdx"; -Add the CometChat Widget with a small snippet. It drops in like any other embed—copy the code, paste it into Squarespace, then pick how people sign in. +Add the CometChat Widget by pasting one small code snippet. It drops in like any other embed—copy the code, paste it into your site's Code Injection, 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. - - Great for marketing pages, help centers, or demos. + - Visitors can chat without accounts. + - Fastest, friction-free setup. - - - 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. + + - Auto-create CometChat users for Squarespace members. + - Falls back to guests for non-members. - - Create your users via server and log them in with a secure auth token on the frontend. - - Ideal for sites with existing login systems and backends. + - Maximum security; no authKey in the browser. + - Use your backend to issue auth tokens. --- -### Squarespace placement (Code Injection) +### Steps to Add Custom Code in Squarespace (via Code Injection) -**Steps to add custom code:** 1) Log in to Squarespace and open your website dashboard. 2) In the left sidebar, click **Website** (top-left) and select the site. -3) Scroll to **Marketing Tools** → **Custom Code**. +3) Scroll to **Marketing Tools** and click **Custom Code**. 4) Click **Code Injection**. -5) You’ll see **Header** and **Footer** sections—paste the integration script below into **Footer**. +5) You’ll see **Header** and **Footer**. Paste your chosen integration snippet into **Footer**. 6) Click **Save**. -7) Refresh your live site and open the page where chat should load to verify. +7) Refresh your site and open a page to confirm chat loads. ----- +--- ## 1. Anonymous Chat (Guest Mode) **Use this when:** +- You want visitors to chat without creating accounts. +- You don’t have a member area or user authentication. +- You want quick, friction-free chat access. -- Anyone should be able to start chatting instantly -- You do not have (or do not want) your own login form yet - -### Paste this in Footer or a Code Block +### Paste this into Footer (Code Injection) -```html lines highlight={8-9, 11, 15-17, 22-24} - +```html
+ - ``` -### Update these values +**Update these values:** +- `appID`, `region`, `authKey`: Copy from Dashboard. +- `user.name`, `user.avatar`, `user.link`: Optional guest display info. +- `width`, `height`, `isDocked`: Widget dimensions (`isDocked = true` = floating icon; `false` = embedded). -| 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.

| -| `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 +## 2. Create + Log In User On The Fly (Squarespace Members) **Use this when:** +- You have Squarespace Member Areas enabled. +- You want members to automatically get CometChat accounts. +- You want to support both members and guest visitors. -- Every person already has an ID inside your product (email, username etc.) -- You want that ID to drive their chat identity automatically +### Paste this into Footer (Code Injection) -### Paste this in Footer or a Code Block - -```html lines highlight={8-9, 11, 14, 18-20, 25-27} - +```html
+ - ``` -### Update these values +**How it works:** +- Detects Squarespace members via the `SiteUserInfo` cookie. +- Creates CometChat users on-the-fly when members first visit; falls back to guest for others. +- Persists guest IDs in `localStorage` to keep a consistent identity. -| 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). | +--- -## 3. Backend-Created User (Auth Token Login) +## 3. Backend-Created User (Auth Token Login) — Recommended **Use this when:** +- You need maximum security (no authKey exposed in the frontend). +- You have a custom backend or serverless functions. +- You want full control over user creation and authentication. -- People sign in through your backend, and you generate their CometChat auth token server-side. +### Paste this into Footer (Code Injection) -**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) — 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) 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). - -### Paste this in Footer or a Code Block - -```html lines highlight={8-9, 13, 17-18} - +```html
+ - ``` -### 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.

| -| `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). | +**Update these values:** +- `appID`, `region`, `authKey` | Copy from **Dashboard**. +- `authToken` | Generated by your backend and passed to this page. +- `width`, `height`, `isDocked` | Adjust widget dimensions/placement. --- From 380c3e1a5a938c2fb78c81bfc3e500dbc92abd67 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 13 Jan 2026 19:24:21 +0530 Subject: [PATCH 07/11] Update integration.mdx --- widget/shopify/integration.mdx | 268 +++++++++++++++++++++------------ 1 file changed, 174 insertions(+), 94 deletions(-) diff --git a/widget/shopify/integration.mdx b/widget/shopify/integration.mdx index b4d09ef9..18441bae 100644 --- a/widget/shopify/integration.mdx +++ b/widget/shopify/integration.mdx @@ -1,108 +1,195 @@ --- -title: "Add CometChat UI Kit Builder Widget to Shopify" +title: "Add CometChat Widget to Shopify" sidebarTitle: "Integration" -description: "Learn how to embed the CometChat UI Kit Builder widget into your Shopify store using Liquid templates, theme settings, or Online Store 2.0 app blocks." +description: "Drop the CometChat Widget into your Shopify store and pick the sign-in flow: guest, Shopify customer IDs, or backend auth tokens." --- +import { CardGroup, Card } from "mintlify"; import AdvancedJSAPIs from "/snippets/widget/advanced-js-apis.mdx"; -You can integrate the **CometChat UI Kit Builder widget** directly into your Shopify store to enable real-time chat. Once installed, it will: +Add the CometChat Widget with a single snippet inside your Shopify theme. Choose the sign-in flow that matches your store: guests, auto-created users from Shopify customers, or backend-issued auth tokens. + +**Choose how shoppers sign in:** + + + + - Visitors can chat without accounts. + - Fastest, friction-free setup. + + + - Auto-create CometChat users from Shopify customers. + - Falls back to guests when no one is logged in. + + + - Use your backend to issue auth tokens. + - Keep your Auth Key off the storefront. + + -- Load the UI Kit Builder bundle on page load -- Initialize CometChat with your App ID, Region & Auth Key -- Automatically log in each visitor (using their Shopify `customer.id` or “guest”) -- Launch a docked chat UI on every page +--- + +## Where to paste the snippet in Shopify + +1) In Shopify Admin, go to **Online Store → Themes → … → Edit code**. +2) Open **layout/theme.liquid** (or a section where you want the widget). +3) Scroll near `` and paste the snippet from the option you choose. +4) Save and refresh your storefront to confirm chat loads. +5) For page-specific placement, paste the snippet into a section or template instead of the global layout. --- -## What You’ll Build +## 1. Anonymous Chat (Guest Mode) + +**Use this when:** you want anyone to chat without signing in. -A persistent, docked chat widget in your Shopify theme—fully configurable via Theme Settings or a snippet/app block. +### Paste this near `` in `layout/theme.liquid` + +```liquid +
+ + + +``` + +**Update these values:** +- `appID`, `region`, `authKey`: Copy from the CometChat Dashboard (use an **App Auth Key**, not REST API key). +- `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`: Optional widget targeting/placement controls. --- -## Quick Steps to Embed CometChat Widget +## 2. Create + Log In User On The Fly (Shopify Customers) - +**Use this when:** you have Shopify customer accounts and want logged-in shoppers to automatically become CometChat users. Falls back to a persistent guest ID for visitors. - -Before you start, sign up at the [CometChat Dashboard](https://app.cometchat.com/) and create an app. Copy: -- **App ID** -- **Region** -- **Auth Key** - +> Turn on **Shopify customer accounts** so `{{ customer.id }}` and `{{ customer.first_name }}` populate. - -1. In Shopify Admin, go to **Online Store → Themes → … → Edit code**. -2. Open **layout/theme.liquid** (or the snippet/section where you want the widget). -3. Near ``, paste the full block below. It loads the SDK, injects Shopify customer data, and initializes the widget: +### Paste this near `` in `layout/theme.liquid` ```liquid
- - - - + +``` + +**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. +- `user.name`, `user.avatar`, `user.link`: Optional profile info shown in chat. +- `width`, `height`, `isDocked`, `variantID`, `chatType`, `defaultChatID`, `dockedAlignment`: Optional UI/placement controls. + +**How it works:** +- Uses Shopify `customer.id` + `customer.first_name` when a shopper is logged in. +- Stores a stable guest ID in `localStorage` for visitors so their chat history persists across pages. +- CometChat auto-creates the UID the first time it sees it. + +--- + +## 3. Backend-Created User (Auth Token Login) + +**Use this when:** you issue CometChat auth tokens from your backend and don’t want an Auth Key in the browser. + +### Paste this near `` in `layout/theme.liquid` + +```liquid +
+ + + ``` - - -`{{ customer.id }}` and `{{ customer.first_name }}` only populate when Shopify customer accounts are enabled and the visitor is logged in. -1. In Shopify Admin, go to **Settings → Customer accounts**. -2. Choose **Classic customer accounts → Optional** (or **Required**) and save. -3. Log in as a test customer, reload your storefront, and confirm the widget now shows the real shopper name. If no one is logged in, the script safely falls back to `guest_`. - +**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). +- UI options: `width`, `height`, `isDocked`, `variantID`, `chatType`, `defaultChatID`, `dockedAlignment`. + +--- + +### Optional: Make credentials editable in Theme settings + +Add this block to `config/settings_schema.json` (just before the final `]`). Then replace hardcoded values in the snippets with `{{ settings.cometchat_app_id }}` etc. - -To let non-developers manage credentials from the Shopify Theme Editor, add this section in **config/settings_schema.json** (just before the final `]`): ```jsonc , { @@ -129,20 +216,17 @@ To let non-developers manage credentials from the Shopify Theme Editor, add this ] } ``` - - -If your theme supports Shopify 2.0 app blocks, you can make a reusable section: -1. **Online Store → Themes → Edit code** -2. Under **Sections**, click **Add a new section** → `cometchat-widget.liquid` -3. Paste the snippet from the previous step into that file. -4. Save, then add it in **Customize theme** under **App embeds** or as a section on any template: - ```liquid - {% section 'cometchat-widget' %} - ``` - +--- + +### Optional: Add as an Online Store 2.0 section/app block - +1) **Online Store → Themes → Edit code**. +2) Under **Sections**, create `cometchat-widget.liquid` and paste one of the snippets above. +3) Save, then add it in **Customize theme** under **App embeds** or as a section on any template: +```liquid +{% section 'cometchat-widget' %} +``` --- @@ -152,18 +236,14 @@ If your theme supports Shopify 2.0 app blocks, you can make a reusable section: ## Troubleshooting -- **Widget not appearing?** - - Confirm the embed script loads (check **Network** tab for `chat-embed@1.x.x`) - - Ensure the `
` exists once per page and is not hidden by theme CSS -- **Only guest IDs show up?** - - Customer accounts must be enabled, and you need to preview as a logged-in shopper—not inside the Theme Editor preview - - Inspect `window.CURRENT_USER_ID` / `window.CURRENT_USER_NAME` in the console to confirm Shopify is populating them -- **Login or user-creation errors?** - - Use an **App Auth Key** (not REST API key) so `CometChatApp.createOrUpdateUser` can run - - Check the Users tab in your CometChat Dashboard to ensure the UID being generated does not violate UID rules +- **Widget not appearing?** Confirm the embed script loads (`chat-embed@1.x.x`), the mount div exists, and no ad blockers or CSP rules are blocking it. +- **Shopify customer info not showing?** Ensure customer accounts are enabled and you’re previewing as a logged-in shopper (not just the Theme Editor). +- **Login/auth errors?** For UID mode, verify the Auth Key is an App Auth Key and UIDs are unique; for auth token mode, ensure the token matches the logged-in user. +- **Docked vs embedded view wrong?** Adjust `isDocked`, `width`, `height`, and optional alignment settings. +- **Still stuck?** Inspect `CometChatApp.CometChatAuth` calls in the browser console for errors. --- ## Need Help? -Reach out to [CometChat Support](https://www.cometchat.com/contact) or visit our [docs site](https://www.cometchat.com/docs) for more examples. +Reach out to [CometChat Support](https://www.cometchat.com/contact) or visit our [docs](https://www.cometchat.com/docs). From be79a27fafd7d67fa91ef60d52c888227a7edb9f Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Tue, 13 Jan 2026 19:30:58 +0530 Subject: [PATCH 08/11] Update integration.mdx --- widget/wix/integration.mdx | 180 ++++++++----------------------------- 1 file changed, 36 insertions(+), 144 deletions(-) diff --git a/widget/wix/integration.mdx b/widget/wix/integration.mdx index 7157d246..e2fb9b6e 100644 --- a/widget/wix/integration.mdx +++ b/widget/wix/integration.mdx @@ -1,164 +1,54 @@ --- title: "Add CometChat Widget to Wix" sidebarTitle: "Integration" -description: "Drop the CometChat Widget into Wix with the HTML Embed element, then pick the sign-in flow that matches your site." +description: "Drop the CometChat Widget into Wix using an HTML Embed block, then choose the sign-in flow that fits your site." --- import { CardGroup, Card } from "mintlify"; import AdvancedJSAPIs from "/snippets/widget/advanced-js-apis.mdx"; -Add the CometChat Widget with a small snippet. It drops in like any other embed—use Wix’s HTML Embed element, then pick how people sign in. +Add the CometChat Widget with a single snippet inside Wix’s **Embed HTML** element. Pick the sign-in flow that matches your site: guests, auto-created users by ID, or backend-issued auth tokens. -**Choose the sign-in option that matches your site:** +**Choose how visitors sign in:** - - Let anyone chat anonymously without signing up or logging in. - - Great for marketing pages, help centers, or demos. + - Visitors can chat without accounts. + - Fastest, friction-free setup. - - 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. + - Auto-create CometChat users with your existing IDs (email, user ID, etc.). + - No backend needed; CometChat creates users on first visit. - - Create your users via server and log them in with a secure auth token on the frontend. - - Ideal for sites with existing login systems and backends. + - Use your backend to issue auth tokens. + - Keep your Auth Key off the page. --- -### Wix placement (applies to all login options) - -- In the Wix Editor, open the page where chat should appear. -- Click **+ Add Elements → Embed Code → Embed HTML** and drag it where you want (bottom-right/docked area is typical). -- Click **Enter Code / Edit Code** on that element and paste this entire block: - -```html - - - - - - - - -
- - - -``` - -- Click **Apply/Update** in the code editor. - -**Add Page Code (bridge script)** - -In the same page, open **Page Code** (bottom panel) and paste: - -```js -import wixUsers from 'wix-users'; - -$w.onReady(async function () { - const htmlComp = $w('#WixChat1'); // ID of your HTML Embed element - let lastUserId = null; - - async function sendUserToCometChat() { - const user = wixUsers.currentUser; - if (user.loggedIn) { - const userId = user.id; - const email = await user.getEmail(); - const userName = email ? email.split('@')[0] : 'WixUser'; - htmlComp.postMessage({ action: "login", uid: userId, name: userName }); - lastUserId = userId; - } else { - htmlComp.postMessage({ action: "logout" }); - lastUserId = null; - } - } - - await sendUserToCometChat(); // initial check - - wixUsers.onLogin(() => { - sendUserToCometChat(); - }); - - // Poll for logout (Wix lacks onLogout) - setInterval(async () => { - const user = wixUsers.currentUser; - const isLoggedIn = user.loggedIn; - if (!isLoggedIn && lastUserId !== null) { - htmlComp.postMessage({ action: "logout" }); - lastUserId = null; - } - }, 3000); -}); -``` +## Where to place the snippet in Wix -- Update `#WixChat1` to the ID of your HTML Embed element. -- Swap `COMETCHAT_APP_ID`, `COMETCHAT_REGION`, `COMETCHAT_AUTH_KEY` with your app credentials and keep them consistent with your chosen sign-in flow below. +1) In the Wix Editor, open the page where chat should appear. +2) Click **Add → Embed Code → Embed HTML**, then drag the block to where you want the widget (bottom-right is common). +3) Click **Enter Code / Edit Code**, switch to **Code** mode, and paste the snippet from your chosen option. +4) Resize the embed container if needed; the widget will fill the element. +5) Publish/preview the site to confirm the widget loads. --- ## 1. Anonymous Chat (Guest Mode) -**Use this when:** +**Use this when:** you want visitors to chat without signing in. -- Anyone should be able to start chatting instantly -- You do not have (or do not want) your own login form yet +### Paste this into the Wix HTML Embed -### Paste this inside the Wix HTML Embed - -```html lines highlight={10-11, 13, 17-19, 24-26} +```html lines highlight={8-9, 11, 15-17, 22-24}
+ -``` - -- In the Designer, drag an **Embed** component where you want chat to appear, click **Edit Custom Code**, and paste the snippet for your chosen sign-in option below. If you prefer everything in the Embed, place the script tag above the snippet. +1) In the Webflow Designer, open the page where chat should appear. +2) Drag an **Embed** component to the page (bottom-right is common for a docked chat). +3) Click **Edit Custom Code** on the Embed, paste the snippet from your chosen option, and save. +4) Optionally add the ` @@ -101,7 +100,6 @@ Add the CometChat Widget with a single snippet in a Webflow **Embed** element. P ### Paste this into the Webflow Embed ```html lines highlight={8-9, 11, 14, 18-20, 25-27} -
@@ -171,7 +169,6 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/ ### Paste this into the Webflow Embed ```html lines highlight={8-9, 13, 17-18} -
diff --git a/widget/wix/integration.mdx b/widget/wix/integration.mdx index e2fb9b6e..87314be7 100644 --- a/widget/wix/integration.mdx +++ b/widget/wix/integration.mdx @@ -45,7 +45,6 @@ Add the CometChat Widget with a single snippet inside Wix’s **Embed HTML** ele ### Paste this into the Wix HTML Embed ```html lines highlight={8-9, 11, 15-17, 22-24} -
@@ -101,7 +100,6 @@ Add the CometChat Widget with a single snippet inside Wix’s **Embed HTML** ele ### Paste this into the Wix HTML Embed ```html lines highlight={8-9, 11, 14, 18-20, 25-27} -
@@ -171,7 +169,6 @@ Full walkthrough: [How to properly log in and create users in CometChat](https:/ ### Paste this into the Wix HTML Embed ```html lines highlight={8-9, 13, 17-18} -
From 218c439e27d29930391bb484cc2eb44fb6dea072 Mon Sep 17 00:00:00 2001 From: Swapnil Godambe Date: Wed, 14 Jan 2026 19:08:21 +0530 Subject: [PATCH 11/11] updates the code --- widget/shopify/integration.mdx | 11 +++++++++++ widget/squarespace/integration.mdx | 13 ++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/widget/shopify/integration.mdx b/widget/shopify/integration.mdx index 18441bae..2ed25d87 100644 --- a/widget/shopify/integration.mdx +++ b/widget/shopify/integration.mdx @@ -148,6 +148,17 @@ Add the CometChat Widget with a single snippet inside your Shopify theme. Choose ## 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. This keeps your Auth Key off the page. + +**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) — 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) 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). + **Use this when:** you issue CometChat auth tokens from your backend and don’t want an Auth Key in the browser. ### Paste this near `` in `layout/theme.liquid` diff --git a/widget/squarespace/integration.mdx b/widget/squarespace/integration.mdx index 3ff35f0d..325ce157 100644 --- a/widget/squarespace/integration.mdx +++ b/widget/squarespace/integration.mdx @@ -197,7 +197,18 @@ Add the CometChat Widget by pasting one small code snippet. It drops in like any --- -## 3. Backend-Created User (Auth Token Login) — Recommended +## 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. This keeps your Auth Key off the page. + +**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) — 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) 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). **Use this when:** - You need maximum security (no authKey exposed in the frontend).