Look & Feel Customization

Last updated: November 29, 2025

Look & Feel Customization

The Look & Feel section lets you customize every visual aspect of your chat widget. Match your brand perfectly with these settings.

Accessing Look & Feel
  1. Open Bot Studio
  2. Click the Look & Feel section to expand it
Widget TitleTitle (Open State)

The title shown when the chat window is open:

  • Default: "💬 Customer Support"
  • Include emojis for personality
  • Keep it short (under 25 characters)
Title (Closed State)

The title shown when chat is minimized:

  • Default: "Chat with us"
  • Call-to-action works well
  • Examples: "Need help?", "Talk to us"
Skin Selection

Choose a visual theme for your widget:

Default Skin
  • Clean, modern design
  • Rounded corners
  • Standard chat bubble layout
  • Works with any brand color
Layout 1 (Premium)
  • Dark header theme
  • Professional appearance
  • Subtle gradients
  • Great for tech companies

Each skin has its own default color, but you can customize it.

Primary Color

Set your brand's main color:

  1. Click the color picker
  2. Choose a color or enter hex code
  3. Preview updates instantly

Color Tips:

  • Use your brand's primary color
  • Ensure good contrast with white text
  • Avoid colors that are too light
  • Test on both light and dark backgrounds

Each skin saves its own color - switching skins won't lose your color customization.

Widget DimensionsDesktop Width
  • Range: 300-500 pixels
  • Default: 380px
  • Wider = more content visible
  • Narrower = less intrusive
Desktop Height
  • Range: 400-700 pixels
  • Default: 600px
  • Taller = more conversation visible
  • Shorter = less screen real estate

Note: On mobile devices, the widget automatically adjusts to full-screen.

Bot Emoji

The emoji shown in the chat bubble button:

  • Default: 🤖
  • Click to change
  • Popular options: 💬, 🙋, 👋, 💡, 🎯
Live Preview

As you make changes:

  1. See updates instantly in the right panel
  2. Preview shows the actual widget appearance
  3. Click the widget button to see open/closed states
  4. Test different color combinations
Resetting to Defaults

To reset Look & Feel settings:

  1. Click Reset in the top bar
  2. Confirm the action
  3. All settings return to defaults

Warning: Reset affects all Bot Studio settings, not just Look & Feel.

Best PracticesColor Selection
  • ✅ Use your brand's primary color
  • ✅ Ensure readability (contrast)
  • ✅ Consider accessibility
  • ❌ Don't use very light colors
  • ❌ Don't use colors similar to your background
Widget Size
  • ✅ Test on different screen sizes
  • ✅ Consider your content length
  • ✅ Balance visibility vs. intrusion
  • ❌ Don't make it too small to read
  • ❌ Don't make it cover too much content
Emojis
  • ✅ Use emojis that match your brand tone
  • ✅ Keep them professional
  • ❌ Don't overuse emojis
  • ❌ Avoid controversial emojis
Saving Changes

Remember to click Go Live to publish your changes!

The orange dot on the button indicates unsaved changes.

Next Steps

After customizing the look, continue with: