--- doc_version: "1.0.0" last_updated: "2026-07-14T15:00:57.718Z" title: "Widget Settings Reference" description: "Complete reference for every ChatbotIQ widget customization option: colors, placement, header, launcher, typography, behavior, and messages." keywords: [widget settings, widget customization, colors, launcher, placement, typography, ChatbotIQ reference] --- This page documents every widget customization option available in the Widget Designer (Design tab of the Bot Playground). For a practical guide, see [Customize Widget Appearance](/how-to/customize-widget-appearance/). --- ## Colors | Setting | Type | Default | Description | |---------|------|---------|-------------| | **Primary Color** | Color | Dark slate (`#1E293B`) | Accent color for the launcher button and user message bubbles. | | **Background** | Color | Warm off-white (`#faf8f6`) | Chat window background color. | | **Text Color** | Color | Dark gray | Main text color in the chat window. | | **User Bubble** | Color | Black (`#000000`) | Background color of the user's message bubbles. | | **Bot Bubble** | Color | Warm cream (`#f0ece8`) | Background color of the bot's message bubbles. | | **User Text** | Color | White | Text color within user message bubbles. | | **Bot Text** | Color | Dark gray | Text color within bot message bubbles. | | **Link Color** | Color | Blue (`#2563eb`) | Color for clickable links in bot responses. Falls back to the primary color if left blank. | --- ## Placement & Size | Setting | Options | Default | Description | |---------|---------|---------|-------------| | **Opening Style** | Chat Widget, Centered Modal, Side Panel Right, Side Panel Left | Chat Widget | How the widget opens (`open_style`). Chat Widget is the standard popup panel; the others open as a centered modal or a docked side panel. | | **Launcher Position** | Bottom Right, Bottom Left, Center | Bottom Right | Where the launcher button sits on the page (`launcher_position`). | | **Widget Height** | Compact (400px), Standard (500px), Large (600px) | Large | Height of the chat window when open. | | **Side Panel Ratio** | 0.25-0.75 | 0.35 | Width ratio for side panel placement (fraction of viewport). Only applies to side panel styles. | | **Push page content** | Toggle | Off | Side panel only. Shifts the host page sideways instead of overlaying it, so visitors can read the page and chat side-by-side. Falls back to overlay on narrow viewports (under 900px). See [compatibility notes](#push-content-compatibility) below. | | **Modal Opacity** | 50%-100% (0.5-1.0) | 1.0 | Background overlay opacity for centered modal style. | | **Glow Effect** | Toggle | Off | Adds a subtle glow around the widget window. | ### Push content compatibility Push mode works on the majority of sites, but a few layout patterns can cause minor visual issues. **Test the toggle on a staging or unlisted page before enabling it for all visitors.** - **Fixed or sticky headers** - `position: fixed`/`sticky` elements don't shrink with the rest of the page and will extend under the panel. Fixable in a few lines of your own CSS, see [Fixed or sticky headers](#fixed-or-sticky-headers) below. - **Sites with `transform` set on `` or ``** - the widget already has a fallback for broken `position: fixed`, but push interaction may need verification. - **Full-bleed sections using `100vw`** - extend under the panel and get clipped (usually acceptable). - **Narrow viewports (under 900px)** - push is automatically disabled and the panel reverts to overlay mode. If you need to tune the transition or disable push only for some pages, you can override it in your own CSS by targeting `html.ciq-pushing`. #### Fixed or sticky headers `position: fixed`/`sticky` headers are positioned against the viewport, so they don't shrink when push mode narrows the page. Make yours respond to the push by adding this to **your own** site's CSS. The widget exposes a `--ciq-push-width` variable (the panel width, in pixels) and the `ciq-pushing` / `ciq-pushing--left` classes on the `` element: ```css /* Replace `.your-header` with your fixed/sticky header's selector */ .your-header { transition: width 0.28s ease, margin-left 0.28s ease; } html.ciq-pushing .your-header { /* side panel right */ width: calc(100% - var(--ciq-push-width, 0px)) !important; } html.ciq-pushing.ciq-pushing--left .your-header { /* side panel left */ margin-left: var(--ciq-push-width, 0px); } ``` --- ## Header | Setting | Type | Default | Description | |---------|------|---------|-------------| | **Title** | Text | "Ask AI" | Main text in the widget header. | | **Subtitle** | Text | "Instant answers from our knowledge base" | Secondary text below the title. | | **Avatar** | Image/preset | Default icon | Header avatar. Choose from presets or upload a custom image. | | **Avatar Size** | Number (px) | 24 | Size of the header avatar in pixels, set via a px slider. | | **Background Style** | Solid, Gradient, Glass | Solid | Visual style of the header area. | | **Show "Powered by"** | Toggle | On | Display the "Powered by ChatbotIQ" badge. Can be hidden with the Branding Removal add-on. | --- ## Launcher Button | Setting | Type | Default | Description | |---------|------|---------|-------------| | **Style** | Icon only, Icon + text, Text only | Icon + text | What the launcher button shows. | | **Icon** | Preset or custom URL | Sparkle | The icon displayed on the launcher. Presets: chat, message, help, headset, sparkle, bolt, robot, hand-wave. Or upload a custom icon. | | **Shape** | Circle, Rounded square, Squircle, Blob, Pill, Hexagon, Diamond | Circle | Shape of the launcher button. | | **Size** | Number | 56 | Size of the launcher button in pixels. | | **Text** | Text | "Ask AI" | Label shown on the launcher (for icon+text or text-only styles). | | **Effect** | None, Pulse, Glow, Bounce, Wiggle, Float, Shimmer, Morph, Neon, Rainbow, Orbit | Pulse | Attention-grabbing animation on the launcher. | --- ## Typography | Setting | Options | Default | Description | |---------|---------|---------|-------------| | **Font Size** | Small (13px), Medium (15px), Large (17px) | Medium | Base font size for chat text. | | **Font Family** | System, Inter, Roboto, Open Sans, Lato, Georgia, Merriweather | System | Font used in the chat widget. | --- ## Behavior | Setting | Type | Default | Description | |---------|------|---------|-------------| | **Auto-open** | Toggle + delay (seconds) | Off | Automatically open the widget after page load. Set a delay before opening. | | **Show on Mobile** | Toggle | On | Whether the widget appears on mobile devices. | | **Greeting Bubble** | Text + delay + duration | *(empty)* | A welcome message bubble that appears next to the launcher before the user opens the chat. Configure when it appears and how long it stays. | | **Floating Suggested Questions** | Toggle + count + timing | Off | Show suggested questions floating near the launcher. | | **Entrance Animation** | Toggle | Off | Animate the widget when it opens. | --- ## Messages | Setting | Type | Default | Description | |---------|------|---------|-------------| | **Welcome Message** | Text | "Hey! Ask me anything." | First message shown when a user opens an empty chat. | | **Placeholder Text** | Text | "Type your message..." | Hint text in the message input field. | --- ## Consent Overlay | Setting | Type | Default | Description | |---------|------|---------|-------------| | **Show Consent Overlay** | Toggle | Off | Display a GDPR/privacy consent screen before the user can start chatting. | --- ## Related - [Customize Widget Appearance](/how-to/customize-widget-appearance/) - practical customization guide - [Embed the Widget](/how-to/embed-the-widget/) - add the widget to your site - [How the Widget Loads](/explanation/how-the-widget-loads/) - understand the loading process ## Sitemap Full documentation index: [sitemap.md](/sitemap.md) and [llms.txt](/llms.txt).