What's Included in This Demo
The simplest implementation of the Nexus Chat Widget. A floating chat button appears in the bottom-right corner of the page. Click it to open the chat window.
Key Features
- Floating chat button in bottom-right corner
- Custom light theme with Acme Inc. branding
- Comprehensive styling customization (borders, padding, colors)
- Standard window sizing (384x600px) with resize option
- Welcome message and initial conversation
- Message borders and custom spacing
- Feedback system with thumbs up/down
- Disclaimer with collapsible content
- Agent handover simulation
Styling Customization
This demo showcases advanced styling options:
- Message Borders - User messages have a blue border, agent messages have a green border
- Input Padding - Custom padding for textarea and send button
- Header Padding - Custom padding in the header area
- Border Widths - Configurable border thickness for input and messages
- Spacing - Custom gap between input field and buttons
Tip: All of these styling options can be customized to match your brand guidelines. See the configuration code in the demo source for examples.
Configuration Options
This demo showcases many of the widget's customization capabilities:
- experienceId - Unique identifier for your AI experience
- apiUrl - Your Nexus API endpoint URL
- window.header - Custom colors, branding, and padding
- window.sizing - Multiple size modes
- bubbles - Custom message styling with borders
- input - Custom padding, borders, and spacing
- features.feedback - Enable user feedback
- advanced.initialEvents - Pre-populate conversation
Note: This demo includes initial conversation history to demonstrate the chat interface. In production, you would typically start with an empty conversation or load from a session store.