# Customizing the Look and Feel

Published @ 01/07/2026 •
NovaSupport Team Product Team

A well-designed widget builds trust and encourages engagement. Here's how to make NovaSupport look like a natural part of your website.

## Color Customization

### Primary Color

The main color used for:

- Toggle button background
- Header background
- Send button
- Links and highlights

### Secondary Color

Used for:

- Agent message bubbles
- Accent elements

### Text Colors

Customize:

- Header text
- Message text
- User input text

## Typography

Choose fonts that match your brand:

- System fonts: Fast loading, native feel.
- Google Fonts: Wide selection, easy integration.
- Custom fonts: Upload your brand font.

## Widget Dimensions

Adjust the widget size:

- Width: 350px - 500px
- Height: 500px - 700px
- Border radius: Sharp to fully rounded

## Advanced Customization

For complete control, use custom CSS:

1. Go to Widget → Advanced → Custom CSS.
2. Add your CSS rules.
3. Preview changes in real-time.
4. Publish when satisfied.