Widget Settings 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.

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	Primary color	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	Primary color	Color for clickable links in bot responses.

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 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 below.
Sites with transform set on <html> or <body> — 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 <html> element:

/* 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);
}

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	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	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.

Setting	Type	Default	Description
Show Consent Overlay	Toggle	Off	Display a GDPR/privacy consent screen before the user can start chatting.

Customize Widget Appearance — practical customization guide
Embed the Widget — add the widget to your site
How the Widget Loads — understand the loading process