Skip to Content
← Back to all demos

Custom Styled Configuration

Comprehensive styling demo showcasing advanced customization capabilities

Text-only send buttonIntegrated button layoutMessage bordersDisabled state stylingCustom padding & spacingProfessional theme

Custom Configuration Demo

This demo showcases the comprehensive styling capabilities of the Nexus Chat Widget with a professional, custom-styled configuration that demonstrates advanced design flexibility.

🎨 Custom Styling Features

  • Top Accent Bar - 4px blue bar at the top of the widget (configurable color and height)
  • Horizontal Event Layout - Session start, agent handover, and session end messages with left-aligned text and right-aligned timestamps
  • Custom Border Radius - Asymmetric rounded corners (e.g., user messages with sharp bottom-right corner)
  • Text-only Send Button - Transparent background with blue text inside the input border (integrated layout), custom font size (18px/lg) and weight (semibold)
  • Avatar Styling - Custom SVG/image avatars with configurable circular backgrounds and no hover effects
  • Consistent Bubble Widths - Global defaultMaxWidth ensures user and assistant messages align at the same right edge
  • Hover Effects - Configurable per message type (can be disabled or customized with specific hover colors)
  • Custom Padding, Fonts & Sizes - Header (16px padding, 18px font), input (8px 12px padding, 16px font), and message bubbles (10px 16px for user at 16px, 12px 20px for assistant/agent at 14px) all use custom spacing, Roboto font, and configured font sizes
  • Professional Colors - Cohesive color scheme with subtle grays and blues throughout
  • Custom Link Styling - Links in messages use brand colors (#005a9c) with darker hover state (#003d6b), semibold font weight, and 14px font size
  • Custom Scrollbar - Styled scrollbar with brand colors, rounded edges, and auto-hide behavior (8px width, brand blue thumb)
  • Welcome Message Bubble - Welcome message displays as an assistant bubble with avatar and markdown support
  • Persistent Welcome Message - Welcome message stays visible throughout the entire conversation (enabled with welcomeMessagePersistent: true)
  • Custom Input Border - hidden in the demo above but can be enabled and customized

💡 Try It Out

  • Click the floating chat button in the bottom-right corner to open the widget
  • Notice the top accent bar - a thin blue stripe above the header that respects the window's border radius
  • See the session start message with "You started a chat with Support" (bold markdown) and timestamp right-aligned on the same line
  • Observe the custom border radius - user messages have three rounded corners and one sharp corner (bottom-right)
  • Notice the assistant avatar - custom chat icon centered in a circular background with padding, no hover effect
  • Compare message widths - despite the avatar, assistant messages align with user messages at the right edge
  • Hover over message bubbles to see the hover effect (slight darkening via brightness filter)
  • Notice the text-only Send button integrated inside the input border with transparent background, larger font (18px), and semibold weight for emphasis
  • Check the agent handover message - horizontal layout with timestamp on the right
  • Notice the custom link styling - links in messages use the brand blue color, darken on hover, and have semibold font weight for emphasis
  • Scroll through messages to see the custom scrollbar - 8px wide with brand blue thumb, rounded edges, and auto-hide behavior on hover
  • Notice the persistent welcome message - displays as an assistant message bubble with avatar and markdown formatting (bold text, links). It stays visible throughout the entire conversation. Send messages to see it persist, then clear the chat to see it reappear.