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

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

Readonly Mode

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

Runtime toggle APICustom indicator badgeConfigurable allowCopyEvent monitoringUse case examples

Message Interceptor API

Message Interceptor Patterns

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

Custom responsesMessage enrichmentConditional routingError handling