Widget Branding

Branding settings let you customize the widget's visual appearance to match your brand. All branding options are configured on the main Widget page in the Essentials, Theme & Colors, and Appearance sections.

Accessing Branding Settings

Navigate to Widget in the sidebar
Expand the relevant section (Essentials, Theme & Colors, or Appearance)
Make changes and see them in the live preview
Click Save Changes

Essentials Section

Bot Name

What your AI assistant is called in the header:

"Support Bot"
"Help Assistant"
"Your Company AI"

Welcome Message

First message shown to customers when they open the widget:

"Hi! I'm here to help you with any questions about [Product]. 
What can I help you with today?"

Brand Color

The main accent color used for:

Widget button background
Header background
Send button
Links and highlights

Best practices:

Use your brand's primary color
Ensure good contrast with white text
Choose from presets or enter a custom hex value

Logo URL

Displayed in the widget header:

Recommended: Square image (64x64px)
Formats: PNG, SVG (with transparency)
Keep it simple and recognizable

Input Placeholder

Placeholder text in the message input field:

"Type your message..."
"Ask me anything..."
"How can I help?"

Theme & Colors Section

Gradient Blend

Add a secondary color for gradient effect on the header:

Toggle Gradient Blend on
Select a secondary color from presets or enter custom
The gradient blends between your primary and secondary colors

Content Element Colors

Customize colors for rich content elements in AI responses:

Element	Description	Default
Steps	Numbered step indicators	Amber
Links	Action buttons	Blue
Tips	Helpful callout boxes	Teal
Warnings	Warning callout boxes	Amber
Notes	Info callout boxes	Blue

Each color picker shows:

Quick preset colors
Custom color input
Live preview swatch

Appearance Section

Position

Where the widget button appears on the page:

Bottom Right (default, recommended)
Bottom Left

Theme

Color scheme for the widget:

Light - White background, dark text
Dark - Dark background, light text
Auto - Follows user's system preference

Button Style

How the minimized widget button looks:

Rounded - Slightly rounded corners
Square - Sharp corners
Pill - Fully rounded

Animation

How the widget opens and closes:

Slide - Slides up from button
Fade - Fades in/out
Bounce - Bouncy entrance

Font Family

Typography for the widget:

System Default - Uses visitor's system font
Inter - Modern, clean sans-serif
Poppins - Geometric sans-serif
Roboto - Google's versatile font
Open Sans - Friendly and readable
Lato - Warm, stable font
Montserrat - Urban, modern feel

Home Tab

When enabled, shows a welcome screen:

Greeting - Main welcome text
Subtitle - Secondary text below greeting
CTA Button Text - Text for the action button

Help Tab

When enabled, shows contact options:

Contact Form - Enable/disable contact form
Form Title - Title above the form
Help Links - Add custom links (label + URL)

The bottom navigation bar only appears when 2+ tabs are enabled.

Advanced Section

Custom CSS

Add custom styles to further customize appearance:

.goldilocks-widget {
  /* your styles */
}

Warning: Custom CSS may break with widget updates. Use sparingly and test after updates.

Live Preview

As you make branding changes:

Watch the preview update in real-time
Click the widget button to open it
Test the full experience
Verify readability and contrast

Best Practices

Contrast

Ensure sufficient contrast:

Text readable on all backgrounds
Button visible against your site
Accessible to all users (WCAG guidelines)

Consistency

Match your existing brand:

Use exact brand colors
Match your site's typography style
Keep consistent with other touchpoints

Testing

After configuring:

Test on your actual site (after embedding)
Check on different pages
Verify on mobile devices
Get team feedback

Common Configurations

Minimal/Clean

Primary: #2563eb (blue)
Theme: Light
Button Style: Rounded
Font: System Default

Bold/Friendly

Primary: #f97316 (orange)
Gradient: #ec4899 (pink)
Button Style: Pill
Animation: Bounce

Professional/Corporate

Primary: #1e293b (dark slate)
Theme: Light
Button Style: Square
Animation: Fade