Interactive Widget Demos

Explore interactive examples showcasing different configurations and features of the Nexus chat widget.

Getting Started

Basic Floating Widget

Simple floating widget with comprehensive configuration

Floating buttonCustom stylingFeedback systemAgent handover

Display Modes

Interactive demo showcasing widget display modes with code examples and smooth animations

Display modesAnimationCode examples

Customization

Custom Styled Configuration

Comprehensive styling demo showcasing advanced customization capabilities

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

Welcome Message Display

Display welcome messages as assistant bubbles with optional avatars and markdown support

Bubble vs static displayOptional avatarMarkdown supportPersistence controlSession integration

Avatar Styling

Customize avatar appearance with sizes, shapes, borders, and spacing across message bubbles and events

Size presets & custom valuesBorder radius optionsBorder stylingCustom marginsGlobal defaultsRole-specific overrides

Autofocus Control

Configure when the input field receives automatic focus to prevent focus conflicts on pages with multiple widgets

Autofocus on loadAutofocus after responsesManual focus onlyRead-only mode integrationTTS integrationMulti-widget demos

CSS Unit Comparison

Compare px, rem, and em units side-by-side to understand sizing differences and choose the right unit for your needs

px units (recommended)rem units (accessibility)em units (advanced)Visual comparisonInteractive testing guideBest practices

Header Border Configuration

Customize the header bottom border with color, width, and style options, or remove it entirely

Remove border entirelyCustom border colorCustom border widthFull border shorthandTheme compatibility

Background Effects

Customize the chat window with transparent backgrounds, backdrop blur, and gradient overlays for a frosted-glass aesthetic

Transparent backgroundBackdrop blurGradient overlayFrosted glassCustom gradients

Feedback & Interaction

Feedback Styles

Compare thumbs, stars, and emoji feedback styles with customizable colors, labels, and behavior options

Thumbs up/down5-star ratingEmoji reactionsCustom stylingAnalytics eventsSide-by-side comparison

Advanced Features

Action Buttons

Dynamic action buttons that provide context-aware interactions with each response

Context-aware actionsSmart disablingTime-sensitive actions

Events System

Comprehensive event system for tracking widget lifecycle and interactions

Many event typesReal-time monitoringAnalytics integrationCustom handlers

Action Links

Embedded action links in AI responses for live agent escalation, WalkMe flows, and custom client-side actions

Custom protocol handlersLive agent escalationWalkMe integrationParameter parsinglinkClick events

Action Button Confirmations

Action buttons that disappear after click and display styled confirmation messages with interactive patterns

Post-click confirmationsRemove on clickMarkdown/HTML supportCustom icons & alignmentSmooth animations

Session Management

Control chat sessions programmatically with startNewSession() and track session lifecycle events

Initialize with sessionIdGenerate UUIDsstartNewSession() APISession eventsEvent monitoringProgrammatic control

Storage Management

Manage localStorage events with clearStoredEvents(), including date-based filtering and count limits

clearStoredEvents() APIKeep last N eventsClear before dateCombined filtersDate/ISO/timestamp inputClear all storage

Disclaimer Configuration

Configure disclaimers in modal, footer, or event mode with customizable styling and acceptance requirements

Modal (blocking gate)Footer (collapsible)Event (inline)Per-experience persistenceCustom stylingAnalytics events

Shadow DOM CSS Isolation

Enable Shadow DOM encapsulation for complete CSS isolation from host page styles

Complete CSS isolationHostile CSS protectionInherited style resetsSide-by-side comparisonBrowser compatibility

Session Expired Customization

Customize the session expired button with text, styling, action overrides, or hide it for event-only handling

Custom button textButton stylingAction overrideHidden button modeEvent handlingstartNewConversation()

Link Click stopPropagation

Prevent link click events from bubbling to host page global listeners like analytics trackers

Side-by-side comparisonLive event logGlobal click listenerLink-specific isolation

Readonly Mode

Toggle readonly mode at runtime with customizable indicator badges and configurable interaction controls

Runtime toggle APICustom indicator badgeConfigurable allowCopyEvent monitoringUse case examples

Sidenav Layout & Launcher Effects

Side-panel layout mode with maximize/restore, glowing launcher button, and callout tooltip bubbles

Sidenav layoutMaximize / restoreButton glow effectCallout bubbleZ-index control

Message Interceptor API

Message Interceptor Patterns

Intercept, modify, or handle messages before they reach the backend

Custom responsesMessage enrichmentConditional routingError handling