Widget Customization

Make the Engage Plus widget match your brand with powerful styling options. Customize colors, sizing, borders, shadows, and more.

Quick Start

Add custom styles to your widget initialization

Default Widget

EngagePlus.init({
  clientId: 'your-client-id',
  redirectUri: window.location.origin + '/callback',
  issuer: 'https://yourdomain.com'
});

With Custom Styles

EngagePlus.init({
  clientId: 'your-client-id',
  redirectUri: window.location.origin + '/callback',
  issuer: 'https://yourdomain.com',
  
  styles: {
    width: '400px',
    backgroundColor: '#ffffff',
    borderRadius: '12px',
    borderColor: '#e5e7eb',
    borderWidth: '2px',
    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
    primaryColor: '#4f46e5',
    buttonBorderRadius: '6px',
    buttonHoverColor: '#f9fafb',
    textColor: '#111827',
    secondaryTextColor: '#6b7280',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
  }
});

Style Options Reference

All available style properties and their default values

📐 Layout & Sizing

widthstring

Width of the widget container

Default: '400px'

maxWidthstring

Maximum width (useful for responsive layouts)

Default: '100%'

paddingstring

Inner padding of the widget

Default: '24px'

🎨 Colors

backgroundColorcolor

Background color of the widget

Default: '#ffffff'

primaryColorcolor

Primary brand color (links, hover effects)

Default: '#4f46e5' (Indigo)

textColorcolor

Main text color

Default: '#111827'

secondaryTextColorcolor

Secondary/muted text color

Default: '#6b7280'

buttonHoverColorcolor

Background color when hovering over buttons

Default: '#f9fafb'

⬜ Borders & Shadows

borderRadiusstring

Corner rounding of the widget container

Default: '8px'

borderColorcolor

Color of the widget border

Default: '#e5e7eb'

borderWidthstring

Thickness of the border

Default: '2px'

boxShadowstring

Drop shadow effect

Default: '0 10px 15px -3px rgba(0, 0, 0, 0.1)...'

buttonBorderRadiusstring

Corner rounding of provider buttons

Default: '6px'

🔤 Typography

fontFamilystring

Font family for all widget text

Default: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto...'

Example Themes

Copy and paste these ready-to-use themes

EngagePlus.init({
  clientId: 'your-client-id',
  redirectUri: window.location.origin + '/callback',
  issuer: 'https://yourdomain.com',
  
  styles: {
    backgroundColor: '#1f2937',      // Dark gray background
    borderColor: '#374151',          // Darker border
    textColor: '#f9fafb',           // Light text
    secondaryTextColor: '#9ca3af',  // Muted light text
    buttonHoverColor: '#374151',    // Darker hover
    primaryColor: '#818cf8',        // Lighter indigo for dark mode
    borderRadius: '16px',           // More rounded
    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5)'  // Stronger shadow
  }
});

Perfect for applications with dark themes. Uses light text on dark backgrounds with adjusted shadows.

Tips & Best Practices

✓Contrast: Ensure sufficient contrast between text and background colors for accessibility.
✓Responsive: Use relative units (%, em, rem) or max-width for better mobile experience.
✓Brand Consistency: Match primaryColor to your brand's main color for a cohesive look.
✓Testing: Test your styled widget in different browsers and screen sizes.
!Performance: Avoid extremely large shadows or borders that may affect rendering performance.

Ready to customize your widget?

Get your client ID and start integrating Engage Plus today.