---
doc_version: "1.0.0"
last_updated: "2026-07-14T15:00:57.718Z"
title: "How to Customize Widget Appearance"
description: "Change your ChatbotIQ widget's colors, fonts, position, launcher style, header, and behavior to match your brand."
keywords: [widget customization, widget design, colors, branding, launcher, ChatbotIQ widget]
---

All widget customization happens in the **Design** tab of the Bot Playground. Every change appears instantly in the live preview.

1. Go to **Bots** → click **"Design & Deploy"** on your bot.
2. The left side shows a live preview; the right side is the **Widget Designer** panel.
3. Toggle between **desktop** and **mobile** preview to check different screen sizes.

> Click **Reset to Defaults** at the top of the designer to restore all settings.

---

## What you can customize

The Widget Designer is organized into sections:

- **Colors** - primary color, background, text, link, and bubble colors for user and bot messages.
- **Placement** - launcher position, opening style (chat widget, modal, side panel, center launcher) and widget size.
- **Header** - title, avatar, welcome message, and "Powered by" badge.
- **Launcher** - style (icon/text/both), icon, shape, and attention effect.
- **Behavior** - auto-open with delay, mobile visibility, greeting bubble, suggested questions.
- **Typography** - font size and font family.
- **Consent** - optional cookie/consent notice shown before the chat starts.

For the full list of every option with defaults, see [Widget Settings Reference](/reference/widget-settings/).

---

## Related

- [Widget Settings Reference](/reference/widget-settings/) - every widget option with defaults
- [Embed the Widget](/how-to/embed-the-widget/) - add the widget to your website
- [Match Your Widget to Your Brand](/tutorials/customize-your-widget/) - step-by-step branding tutorial

## Sitemap

Full documentation index: [sitemap.md](/sitemap.md) and [llms.txt](/llms.txt).