Sidenav Layout & Launcher Effects - Interactive Demo

What's Included in This Demo

A side-panel layout with enhanced launcher button effects. Click the glowing chat button in the bottom-right corner to open the sidenav panel, then try the maximize button in the header.

Sidenav Layout

Side panel - Opens as a right-anchored panel that fills the viewport height
Maximize / Restore - Expand to full width or restore to side panel via the header button
Responsive - Automatically goes full-width on mobile viewports
Smooth transitions - Animated width changes between states

Config: layout: "sidenav" with window.sideWidth and window.fullWidth to control panel dimensions.

Launcher Button Effects

Glow effect - Pulsing glow around the launcher button to draw user attention
Custom glow color - Match the glow to your brand color or use any CSS color value
Callout bubble - Tooltip message that appears above the button after a configurable delay
Dismissible - Users can close the callout with a click on the × button

Config: button.glowEffect: true and button.callout with text, delay, and colors.

Configuration

Sidenav Layout

NexusChatWidget.init({
  layout: "sidenav",
  window: {
    sideWidth: "450px",   // Panel width (default: 500px)
    fullWidth: "800px",   // Max content width when maximized
    zIndex: 999999        // Z-index control
  }
});

Glow Effect & Callout Bubble

NexusChatWidget.init({
  button: {
    glowEffect: true,
    glowColor: "rgba(79, 70, 229, 0.6)",
    callout: {
      text: "Need help? Chat with us!",
      delay: 1500,           // Show after 1.5 seconds
      dismissible: true,
      backgroundColor: "#4f46e5",
      textColor: "#ffffff"
    }
  }
});

Configuration Reference

Property	Type	Description
layout	"floating" \| "sidenav"	Widget layout mode. Default `"floating"`.
window.sideWidth	string	Panel width in sidenav mode. Default `"500px"`.
window.fullWidth	string	Max content width when maximized. Default `"800px"`.
window.zIndex	number	Z-index for the widget container. Default `999999`.
button.glowEffect	boolean	Enable pulsing glow around the launcher button.
button.glowColor	string	Custom glow color. Defaults to button backgroundColor.
button.callout	object	Tooltip bubble config: `text`, `delay` (ms), `dismissible`, `backgroundColor`, `textColor`.