Display Modes

The SDK supports three display modes that determine how the chat panel appears on the page. Set the mode via the displayMode configuration option.

Popup (Default)

The chat panel floats above the page content as an overlay, anchored to the launcher bubble. This is the most common mode for customer-facing websites.

window.lovinaSettings = {
  displayMode: 'popup',
  position: 'right', // or 'left'
};

Dimensions:

• Width: 400px (desktop), 100% (mobile)
• Height: min 350px, max 640px
• Position: bottom-right or bottom-left, 20px from edge
• Border radius: 16px

Behavior:

• Clicking the launcher bubble toggles the panel open/closed.
• The panel slides up with a smooth animation.
• Page content is not affected -- the panel floats above it.

Sidebar

The chat panel docks to the side of the page as a persistent panel. Ideal for CRM dashboards, admin panels, and internal tools where chat is a primary workflow.

window.lovinaSettings = {
  displayMode: 'sidebar',
  sidebarWidth: 400,       // Width in pixels (320-480)
  sidebarOverlay: false,    // Push page content aside
};

Dimensions:

• Width: 380px default, configurable 320-480px
• Height: 100vh (full viewport height)
• Position: docked to right (or left) edge

Behavior:

• When sidebarOverlay: false, page content is pushed aside to make room for the sidebar.
• When sidebarOverlay: true, the sidebar floats over the page content.
• The sidebar slides in from the edge with a smooth animation.
• Includes a conversation list strip for navigating between conversations.

note

Enable enable_sidebar_mode in feature flags if the sidebar option does not appear:

window.lovinaSettings = {
  displayMode: 'sidebar',
  features: {
    enable_sidebar_mode: true,
  },
};

Fullscreen

The chat panel takes over the entire viewport. This mode is automatically activated on mobile devices (viewports under 768px), and can also be set explicitly for desktop.

window.lovinaSettings = {
  displayMode: 'fullscreen',
};

Dimensions:

• Width: 100vw
• Height: 100vh (respects safe areas on iOS/Android)
• Position: fixed, covering the entire screen

Behavior:

• The panel covers the entire viewport.
• No launcher bubble is visible while the panel is open.
• On mobile, the widget handles keyboard appearance and safe area insets automatically.

Mobile Behavior

On mobile devices (viewport < 768px), the SDK automatically adapts regardless of the configured displayMode:

• Fullscreen activation -- The chat panel opens in fullscreen mode.
• Keyboard handling -- The widget adjusts layout when the virtual keyboard appears, keeping the input field visible.
• Safe areas -- Respects iOS and Android safe area insets (notch, home indicator, status bar).
• Slide-up animation -- The chat panel slides up from the bottom with a smooth animation.

Comparison

Feature	Popup	Sidebar	Fullscreen
Best for	Customer websites	CRM / admin dashboards	Mobile / dedicated chat
Page impact	None (floats above)	Pushes or overlays content	Covers entire viewport
Launcher bubble	Visible	Hidden when open	Hidden when open
Width	Fixed 400px	Configurable 320-480px	100vw
Auto on mobile	Switches to fullscreen	Switches to fullscreen	Native behavior