docs(widget/wordpress): align integration & overview with the shipped plugin

widget/wordpress/integration.mdx

@@ -70,19 +70,18 @@
 </Step>
 
   <Step title="Configure Plugin Settings">
-1. In WordPress Admin, go to **CometChat UI Kit Builder** in the sidebar.  
-2. Paste your **Widget ID**, **App ID**, **Region**, and **Auth Key**.  
-3. (Optional) Set **Default User UID** to auto-login a specific user.  
-4. Choose **Display Mode**:  
-   - **Embedded** (inline on specific pages)  
-   - **Docked** (floating on every page)  
-5. Click **Save Changes**.
+1. In WordPress Admin, open the **CometChat** plugin settings (added after you activate the plugin).
+2. Paste your **Widget ID**, **App ID**, **Region**, and **Auth Key**, then click **Save Changes**.
+
+<Note>
+**How users are authenticated:** The plugin renders the chat widget on your site's frontend only for **logged-in WordPress users** — it is gated by WordPress's `is_user_logged_in()`. For each logged-in visitor, the plugin automatically maps the WordPress user to a CometChat user (UID) and signs them in with a securely generated auth token; you do **not** configure a fixed user UID in the plugin. Where the widget appears (inline vs. floating) is set per placement by the shortcode's `docked` attribute, shown below.
+</Note>
   </Step>
 
   <Step title="Embed Widget Inline (Embedded Mode)">
 1. Edit any Page/Post, add a **Shortcode** block, and insert:
    ```text
    [cometchat 
      width="600px"                      <!-- Widget width (Required) -->
      height="600px"                     <!-- Widget height (Required) -->
      docked="false"                     <!-- true = floating bubble, false = embedded (Required) -->
@@ -97,7 +96,7 @@
   <Step title="Docked Widget (Floating Mode)">
 1. Edit any Page/Post (or site-wide), add a **Shortcode** block, and insert:
    ```text
    [cometchat 
      width="400px"                      
      height="800px"                     
      docked="true"                      <!-- true = floating bubble, false = embedded (Required) -->
@@ -110,9 +109,8 @@
 2. Publish or update to see the widget docked on the chosen side.
   </Step>
 
-  <Step title="Enable Docked on All Pages">
-1. In **CometChat UI Kit Builder** settings, set **Display Mode** to **Docked**.  
-2. Save—widget will now float on every public page.
+  <Step title="Show the Docked Widget on Every Page">
+Add the docked shortcode (`docked="true"`) to a template that renders on every page — for example a site-wide footer, a **Custom HTML** block in a global widget area, or your theme's footer template. The floating bubble will then appear across your public pages (for logged-in WordPress users).
   </Step>
 
 </Steps>
@@ -123,11 +121,39 @@
 
 ---
 
+## Anonymous & guest access
+
+Because the widget is gated by WordPress login, visitors who are **not** signed in to WordPress won't see it by default.
+
+- **Member sites:** no extra setup — your existing WordPress login is the gate, and the plugin authenticates each signed-in member automatically.
+- **Guest / anonymous chat:** provide a WordPress-side guest sign-in so the visitor becomes a logged-in WordPress user (for example, sign the visitor into a shared guest account on page load). The plugin then maps that guest to a CometChat UID and authenticates them like any other user.
+
+---
+
+## Customize the widget with CSS
+
+The Widget Builder includes a **Custom Code** tab where you can add **Custom CSS** (and Custom JS) that ships with your widget. Styling uses the same `--cometchat-*` CSS variables used across CometChat's UI Kits, so you can re-theme colors, typography, and spacing without editing the plugin.
+
+Open it from the dashboard: **Chat & Messaging → Get Started / Integrate → No Code → WordPress → Widget Builder → Custom Code** tab.
+
+Example — override the primary color and font:
+
+```css
+:root {
+  --cometchat-primary-color: #6852D6;
+  --cometchat-font-family: "Inter", sans-serif;
+}
+```
+
+Save and re-publish in the Widget Builder, then re-copy the embed code if your Variant ID changed.
+
+---
+
 ## Troubleshooting
 
 - **Plugin upload fails**: Ensure the ZIP is intact and WordPress has write permissions.  
 - **Settings not saving**: Temporarily disable caching/minification plugins.  
 - **Shortcode not working**: Verify the `[cometchat]` syntax and saved settings.  
 - **JavaScript errors**: Check browser console for missing `CometChatApp` or invalid parameters.
 
 ---

widget/wordpress/overview.mdx

@@ -11,7 +11,7 @@
 - Embed chat and calling into any WordPress website
 - Customize themes, colors, and typography
 - Toggle features on and off
 - Go live with a WordPress plugin and shortcode
 
 The widget connects to CometChat's SDK and infrastructure, which manages message transport, sync, and backend scaling.
 
@@ -57,7 +57,7 @@
 
 Once configured, get the embed code snippet for your widget.
 
-1. Click on **Get Embedded Code**
+1. Click on **Get Embed Code**
 2. Note your app credentials (App ID, Auth Key, Region, Variant ID)
 3. Copy the code snippet
 
@@ -80,6 +80,12 @@
 
 ---
 
+## Customization
+
+The Widget Builder controls theme, colors, and typography with no code. For deeper control, open the Widget Builder's **Custom Code** tab and add your own **Custom CSS** (and Custom JS) using the `--cometchat-*` CSS variables — the same variables used across CometChat's UI Kits. See [Customize the widget with CSS](/widget/wordpress/integration#customize-the-widget-with-css) in the Integration guide.
+
+---
+
 ## Try Live Demo
 
 Experience the CometChat Widget Builder in action:
@@ -136,9 +142,9 @@
     Widget Builder for HTML websites
   </Card>
   <Card title="Shopify Widget" href="/widget/shopify/overview">
     Widget Builder for Shopify stores
   </Card>
   <Card title="Wix Widget" href="/widget/wix/overview">
     Widget Builder for Wix websites
   </Card>
 </CardGroup>