Layout Modes

The Nexus Chat Widget supports three layout modes that determine how the widget is positioned and displayed on the page.

Floating (Default)

The default layout mode. The widget appears as a floating button in the corner of the page. When clicked, a chat window pops up above the button.

This is the standard behavior when no layout or embedded property is set.

Key characteristics:

• Fixed-position launcher button (bottom-right or bottom-left)
• Chat window appears as a popup above the button
• Configurable window size via window.width and window.height
• Supports sizing modes for user-resizable windows

Embedded

The widget fills its parent container completely. Use this when you want to integrate the chat directly into your page layout.

Set embedded: true to enable embedded mode. The container element must have explicit height constraints (e.g., height: 500px or height: 100vh).

{
  embedded: true, // Enable embedded mode
  container: document.getElementById("chat-container"), // Container element

  // In embedded mode, these are typically different:
  window: {
    borderRadius: "0", // No rounded corners
    boxShadow: "none", // No shadow
    header: {
      showCloseButton: false, // No close button
      showSizeToggle: false, // No size toggle
    },
  },
}

Key characteristics:

• Fills 100% width and height of the parent container
• No launcher button — the chat window is always visible
• Container must have explicit height constraints
• No fixed positioning — flows with page layout

Sidenav

A right-anchored side panel that fills the full viewport height. Includes a maximize toggle in the header to switch between side panel and fullscreen modes.

Set layout: "sidenav" to enable sidenav mode.

{
  layout: "sidenav", // Right-anchored side panel

  window: {
    sideWidth: "500px", // Side panel width (default: 500px)
    fullWidth: "800px", // Max content width when maximized (default: 800px)

    // Optional: combine with backdrop blur for frosted-glass effect
    backdropBlur: "15px",
    backgroundTransparent: true,
    backgroundColor: "#1a1a2e",
  },
}

Key characteristics:

• Fixed-position panel anchored to the right edge of the viewport
• Default width of 500px (configurable via window.sideWidth)
• Full viewport height (top to bottom)
• Header includes a maximize/restore toggle button
• When maximized, fills the entire viewport and locks body scroll
• Content is constrained to window.fullWidth (default: 800px) when maximized
• Auto-maximizes on mobile viewports (below 768px)
• Smooth width transition animation (0.5s ease-in-out)

Sidenav Configuration Options

Combining Sidenav with Background Effects

The sidenav layout works great with backdrop blur and gradient effects for a frosted-glass appearance:

{
  window: {
    backgroundColor: "#0a0a1a",

    // Frosted glass effect
    backdropBlur: "15px", // CSS blur amount
    backgroundTransparent: true, // 70% opacity background

    // Gradient overlay (dark at top, solid color at bottom)
    backgroundGradient: true,
    // Optional custom gradient:
    // backgroundGradientValue: "linear-gradient(180deg, rgba(0,0,0,0.5) 0%, #0a0a1a 100%)"
  },
}

See Background Effects for more details on these options.