My Site

> ## Documentation Index > Fetch the complete documentation index at: https://help.clientx.in/llms.txt > Use this file to discover all available pages before exploring further. # Embed the ClientX Widget on Any Website > Add the ClientX AI chat widget to any website, Webflow site, or Framer project with a single script tag. Covers all installation methods and embed attributes. The ClientX widget is a self-contained IIFE bundle — a single JavaScript file that you load with a ` ``` Replace `your-workspace-slug` with your workspace slug or UUID from the dashboard. Everything else can stay as-is. ## Script attributes The embed script reads its configuration from two `data-*` attributes on the script tag itself: Your workspace slug or UUID. The widget uses this value to fetch your agent's configuration (name, colors, knowledge base, CTAs) from the server and to route all chat messages to the correct workspace. You can find your workspace ID in the dashboard under **Settings → General**. The base URL of the ClientX server. Defaults to `https://clientxserver-production.up.railway.app` when omitted. You only need to set this attribute if you are running a self-hosted ClientX instance or are developing locally (for example, `http://localhost:3001`). ## Platform-specific installation Paste the embed snippet directly before the closing `` tag of your HTML file: ```html theme={null} My Site ``` The `defer` attribute ensures the script loads after the rest of your page content without blocking rendering. 1. Open your Webflow project and go to **Site Settings**. 2. Click the **Custom Code** tab. 3. Scroll to the **Footer Code** section. 4. Paste the embed snippet into the footer code box: ```html theme={null} ``` 5. Click **Save Changes**, then publish your site. A native ClientX app for Webflow Designer is also available from the **Integrations** page in your dashboard. It injects the widget with a one-click install and keeps your workspace ID in sync automatically. 1. Open your Framer project and go to **Site Settings**. 2. Click the **General** tab. 3. Scroll to **Custom Code** and find the **End of ``** field. 4. Paste the embed snippet: ```html theme={null} ``` 5. Click **Save** and publish your site. A native ClientX plugin for Framer is also available from the **Integrations** page in your dashboard. It injects the widget code automatically without requiring manual copy-paste. The easiest way to add custom scripts to WordPress is with the **Insert Headers and Footers** plugin (or any equivalent code-injection plugin): 1. Install and activate [Insert Headers and Footers](https://wordpress.org/plugins/insert-headers-and-footers/) from the WordPress plugin directory. 2. Go to **Settings → Insert Headers and Footers** in your WordPress admin. 3. Paste the embed snippet into the **Scripts in Footer** box: ```html theme={null} ``` 4. Click **Save**. The widget will now appear on every page of your WordPress site. If you only want it on specific pages, use a plugin that supports conditional loading rules. ## Verify installation After publishing your changes, open your website in a browser. Within a few seconds you should see the **ClientX launcher bar** — a floating white pill at the bottom-center of the page with your primary color accent and a ✦ spark icon. Click the launcher to open the chat panel and send a test message. If the agent responds with information from your knowledge base, your installation is working correctly. Use the **Widget Preview** panel in your dashboard (**Settings → Widget → Preview**) to test changes to your agent's name, colors, welcome message, and CTAs before publishing them live. The preview lets you chat with your agent in a sandboxed environment that mirrors exactly what visitors will see. If the launcher bar does not appear, check your browser console for errors. The most common causes are a missing or misspelled `data-workspace-id`, a Content Security Policy (CSP) header on your site that blocks external scripts, or an ad blocker preventing the script from loading.