diff --git a/sdk/flutter/send-message.mdx b/sdk/flutter/send-message.mdx index 961f90b6..fc2b812b 100644 --- a/sdk/flutter/send-message.mdx +++ b/sdk/flutter/send-message.mdx @@ -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. + ```dart textMessage.quotedMessageId = 0 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 `` diff --git a/widget/shopify/integration.mdx b/widget/shopify/integration.mdx index b4d09ef9..2ed25d87 100644 --- 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:** + + + + - 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. + + --- -## 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 `` 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 - - +## 1. Anonymous Chat (Guest Mode) - -Before you start, sign up at the [CometChat Dashboard](https://app.cometchat.com/) and create an app. Copy: -- **App ID** -- **Region** -- **Auth Key** - +**Use this when:** you want anyone to chat without signing in. - -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 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) - - + + +``` + +**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 `` 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 +227,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 +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 `
` 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). diff --git a/widget/squarespace/integration.mdx b/widget/squarespace/integration.mdx index 3c641b20..325ce157 100644 --- a/widget/squarespace/integration.mdx +++ b/widget/squarespace/integration.mdx @@ -1,109 +1,262 @@ --- 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 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:** + + + + - Visitors can chat without accounts. + - Fastest, friction-free setup. + + + - Auto-create CometChat users for Squarespace members. + - Falls back to guests for non-members. + + + - Maximum security; no authKey in the browser. + - Use your backend to issue auth tokens. + + + +--- + +### Steps to Add Custom Code in Squarespace (via Code Injection) + +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** and click **Custom Code**. +4) Click **Code Injection**. +5) You’ll see **Header** and **Footer**. Paste your chosen integration snippet into **Footer**. +6) Click **Save**. +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. + +### Paste this into Footer (Code Injection) + +```html +
+ + + +``` + +**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). + +--- + +## 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. + +### Paste this into Footer (Code Injection) + +```html +
+ + + +``` + +**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. + +--- + +## 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). +- You have a custom backend or serverless functions. +- You want full control over user creation and authentication. + +### Paste this into Footer (Code Injection) + +```html +
+ + + +``` + +**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. + +--- + +### 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..c3fc814f 100644 --- a/widget/webflow/integration.mdx +++ b/widget/webflow/integration.mdx @@ -1,110 +1,224 @@ --- 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 an Embed component, then choose the sign-in flow: guest, logged-in 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** 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 single snippet in a Webflow **Embed** element. Pick the sign-in flow that matches your site: guests, auto-created users from your IDs, or backend-issued auth tokens. + +**Choose how visitors sign in:** + + + + - Visitors can chat without accounts. + - Fastest, friction-free setup. + + + - Auto-create CometChat users with your existing IDs (email, user ID, etc.). + - No backend needed; CometChat creates users on first visit. + + + - Use your backend to issue auth tokens. + - Keep your Auth Key off the page. + + + +--- + +## Where to place the snippet in Webflow + +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 ` + +``` + +### 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:** you already have user IDs (email, username, member ID) and want to log people in with that ID automatically. CometChat creates the user the first time it sees the ID. + +### Paste this into 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 `member.id`, email, or a UUID). 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. 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). + +### Paste this into 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 appearing?** Ensure the Embed is set to **Code** and the script loads (`chat-embed@1.x.x`). Publish the site after adding the snippet. +- **Login/auth errors?** For UID mode, ensure the `uid` is unique and you’re using an **App Auth Key** (not REST API key). For auth token mode, make sure the token matches the logged-in user. +- **Only guests showing?** Confirm you’re providing `uid` or `authToken` in the snippet and that your page logic passes the right IDs. +- **Embed clipped?** Resize the Embed element to give the widget enough space (`width`/`height` also configurable in the config). --- diff --git a/widget/wix/integration.mdx b/widget/wix/integration.mdx index 67d7c306..87314be7 100644 --- a/widget/wix/integration.mdx +++ b/widget/wix/integration.mdx @@ -1,111 +1,224 @@ --- 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 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"; -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 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 how visitors sign in:** + + + + - Visitors can chat without accounts. + - Fastest, friction-free setup. + + + - Auto-create CometChat users with your existing IDs (email, user ID, etc.). + - No backend needed; CometChat creates users on first visit. + + + - Use your backend to issue auth tokens. + - Keep your Auth Key off the page. + + + +--- + +## Where to place the snippet in Wix + +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:** you want visitors to chat without signing in. + +### Paste this into the Wix HTML 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:** you already have user IDs (email, username, member ID) and want to log people in with that ID automatically. CometChat creates the user the first time it sees the ID. + +### Paste this into the Wix HTML 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 `member.id`, email, or a UUID). 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. 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). + +### Paste this into the Wix HTML 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 appearing?** Confirm the HTML Embed is set to **Code** and the script loads (`chat-embed@1.x.x`). Resize the embed box if it’s too small. +- **Login/auth errors?** For UID mode, ensure the `uid` is unique and you’re using an **App Auth Key** (not REST API key). For auth token mode, make sure the token matches the logged-in user. +- **Still showing guests only?** Make sure you’re actually providing `uid` or `authToken` in the snippet (and that your page logic passes the right IDs). +- **Page preview vs published:** Test on a published page if preview blocks scripts. ---