How to Customize Widget Appearance
All widget customization happens in the Design tab of the Bot Playground. Every change appears instantly in the live preview.
- Go to Bots → click “Design & Deploy” on your bot.
- The left side shows a live preview; the right side is the Widget Designer panel.
- 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
Section titled “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.
Related
Section titled “Related”- Widget Settings Reference - every widget option with defaults
- Embed the Widget - add the widget to your website
- Match Your Widget to Your Brand - step-by-step branding tutorial