cometchat · swapnil-cometchat · Jan 5, 2026 · Jan 5, 2026 · Jan 5, 2026 · Jan 6, 2026
@@ -115,6 +115,7 @@ 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.
 
 <Tabs>
+
 <Tab title="Dart">
 ```dart
 textMessage.quotedMessageId = 0

diff --git 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 `<head>`
 

diff --git a/widget/shopify/integration.mdx b/widget/shopify/integration.mdx
@@ -1,108 +1,206 @@
 ---
-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.
 
-- 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  
+**Choose how shoppers sign in:**
+
+<CardGroup rows={3} className="mt-6">
+  <Card title="Anonymous Chat (Guest Mode)" href="#1-anonymous-chat-guest-mode">
+    - Visitors can chat without accounts.
+    - Fastest, friction-free setup.
+  </Card>
+  <Card title="Create + Log In User On The Fly (Shopify Customers)" href="#2-create-+-log-in-user-on-the-fly-shopify-customers">
+    - Auto-create CometChat users from Shopify customers.
+    - Falls back to guests when no one is logged in.
+  </Card>
+  <Card title="Backend-Created User (Auth Token Login)" href="#3-backend-created-user-auth-token-login">
+    - Use your backend to issue auth tokens.
+    - Keep your Auth Key off the storefront.
+  </Card>
+</CardGroup>
 
 ---
 
-## What You’ll Build
+## Where to paste the snippet in Shopify
 
-A persistent, docked chat widget in your Shopify theme—fully configurable via Theme Settings or a snippet/app block.
+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 `</body>` 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.
 
 ---
 
-## Quick Steps to Embed CometChat Widget
-
-<Steps>
+## 1. Anonymous Chat (Guest Mode)
 
-  <Step title="Register on CometChat & Gather Your Keys">
-Before you start, sign up at the [CometChat Dashboard](https://app.cometchat.com/) and create an app. Copy:
-- **App ID**  
-- **Region**  
-- **Auth Key**
-</Step>
+**Use this when:** you want anyone to chat without signing in.
 
-  <Step title="Paste the CometChat Embed Block">
-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 `</body>`, paste the full block below. It loads the SDK, injects Shopify customer data, and initializes the widget:
+### Paste this near `</body>` in `layout/theme.liquid`
 
 ```liquid
 <div id="cometChatMount"></div>
-
-<!-- Load CometChat Embed SDK -->
 <script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
 
-<!-- Shopify Customer Info (auto-filled when accounts are enabled) -->
-<script>
-  window.CURRENT_USER_ID = {{ customer.id | default: '' | json }};
-  window.CURRENT_USER_NAME = {{ customer.first_name | default: '' | json }};
+<script type="module">
+  const COMETCHAT_WIDGET_CONFIG = {
+    appID: "YOUR_APP_ID",
+    region: "YOUR_APP_REGION",
+    mode: "guest",
+    authKey: "YOUR_AUTH_KEY",
+
+    user: {
+      name: "Guest User",
+      avatar: "",
+      link: ""
+    },
+
+    mount: "#cometChatMount",
+    width: "450px",
+    height: "80vh",
+    isDocked: true,
+    //variantID: "YOUR_VARIANT_ID",
+    //chatType: "user" | "group",
+    //defaultChatID: "uid_or_guid",
+    //dockedAlignment: "left" | "right"
+  };
+
+  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
 </script>
+```
+
+**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.
+
+---
+
+## 2. Create + Log In User On The Fly (Shopify Customers)
 
-<!-- CometChat Initialization -->
-<script>
-  const COMETCHAT_CREDENTIALS = {
+**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.
+
+> Turn on **Shopify customer accounts** so `{{ customer.id }}` and `{{ customer.first_name }}` populate.
+
+### Paste this near `</body>` in `layout/theme.liquid`
+
+```liquid
+<div id="cometChatMount"></div>
+<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
+
+<script type="module">
+  const SHOPIFY_CUSTOMER_ID = {{ customer.id | json }};
+  const SHOPIFY_CUSTOMER_NAME = {{ customer.first_name | json }};
+
+  const uidFromShopify = SHOPIFY_CUSTOMER_ID ? String(SHOPIFY_CUSTOMER_ID) : null;
+  const savedGuestId = localStorage.getItem("cometchat_guest_uid") || `guest_${Date.now()}`;
+  localStorage.setItem("cometchat_guest_uid", savedGuestId);
+
+  const uid = uidFromShopify || savedGuestId;
+  const name = SHOPIFY_CUSTOMER_NAME || "Guest User";
+
+  const COMETCHAT_WIDGET_CONFIG = {
     appID: "YOUR_APP_ID",
-    appRegion: "YOUR_APP_REGION",
-    authKey: "YOUR_APP_AUTH_KEY", // Must be App Auth Key
+    region: "YOUR_APP_REGION",
+    mode: "uid",
+    authKey: "YOUR_AUTH_KEY",
+
+    uid,
+    user: {
+      name,
+      avatar: "",
+      link: ""
+    },
+
+    mount: "#cometChatMount",
+    width: "450px",
+    height: "80vh",
+    isDocked: true,
+    //variantID: "YOUR_VARIANT_ID",
+    //chatType: "user" | "group",
+    //defaultChatID: "uid_or_guid",
+    //dockedAlignment: "left" | "right"
   };
 
-  // Detect or fallback to guest user
-  const currentUserId =
-    window.CURRENT_USER_ID !== null && window.CURRENT_USER_ID !== undefined
-      ? window.CURRENT_USER_ID.toString().trim()
-      : "";
-  const currentUserName =
-    window.CURRENT_USER_NAME !== null && window.CURRENT_USER_NAME !== undefined
-      ? window.CURRENT_USER_NAME.toString().trim()
-      : "";
-
-  const uid = currentUserId.length
-    ? currentUserId.replace(/\W+/g, "-")
-    : "guest_" + Date.now();
-  const name = currentUserName.length ? currentUserName : "Guest User";
-
-  const COMETCHAT_LAUNCH_OPTIONS = {
-    targetElementID: "cometChatMount",
+  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
+</script>
+```
+
+**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:** 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 `</body>` in `layout/theme.liquid`
+
+```liquid
+<div id="cometChatMount"></div>
+<script defer src="https://cdn.jsdelivr.net/npm/@cometchat/chat-embed@1.x.x/dist/main.js"></script>
+
+<script type="module">
+  const COMETCHAT_WIDGET_CONFIG = {
+    appID: "YOUR_APP_ID",
+    region: "YOUR_APP_REGION",
+    mode: "authToken",
+
+    // Inject the token your backend generated for the logged-in customer
+    authToken: "USER_AUTH_TOKEN",
+
+    mount: "#cometChatMount",
+    width: "450px",
+    height: "80vh",
     isDocked: true,
-    width: "700px",
-    height: "500px",
+    //variantID: "YOUR_VARIANT_ID",
+    //chatType: "user" | "group",
+    //defaultChatID: "uid_or_guid",
+    //dockedAlignment: "left" | "right"
   };
 
-  window.addEventListener("DOMContentLoaded", () => {
-    CometChatApp.init(COMETCHAT_CREDENTIALS)
-      .then(() => {
-        const user = new CometChatApp.CometChat.User(uid);
-        user.setName(name);
-        return CometChatApp.createOrUpdateUser(user);
-      })
-      .then(() => CometChatApp.login({ uid }))
-      .then(() => CometChatApp.launch(COMETCHAT_LAUNCH_OPTIONS))
-      .catch(() => {});
-  });
+  CometChatApp.CometChatAuth.start(COMETCHAT_WIDGET_CONFIG);
 </script>
 ```
-  </Step>
 
-  <Step title="Turn on Customer Accounts (recommended)">
-`{{ 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_<timestamp>`.  
-  </Step>
+**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.
 
-  <Step title="(Optional) Expose Credentials in Theme Settings">
-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 +227,17 @@ To let non-developers manage credentials from the Shopify Theme Editor, add this
   ]
 }
 ```
-  </Step>
 
-  <Step title="(Advanced) Use an Online Store 2.0 App Block">
-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' %}
-   ```
-  </Step>
+---
 
-</Steps>
+### 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 +247,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 `<div id="cometChatMount"></div>` 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).
-Original file line number
+Diff line change
@@ Expand Up @@
     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.
     <Tabs>
     <Tab title="Dart">
     ```dart
     textMessage.quotedMessageId = 0
@@ Expand Down @@