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.