title: Display Modes description: Choose how the Navigic widget appears on your site — bubble, panel, or inline. order: 4

Display Modes

The widget supports three display modes. Pick the one that fits your site.

Bubble

The default mode. A floating chat button appears in the corner of the page. Click it to open the chat window.

<script
  src="https://releases.navigic.ai/embed/embed.js?v=7"
  data-api-key="pk_wk_YOUR_KEY"
  data-position="bottom-right"
  async
></script>

Behavior:

• 56px circular button, fixed to viewport corner
• Chat window is 380px wide, 520px tall
• On mobile (under 480px), expands to full screen
• Shows unread message badge when chat is closed

Best for: Marketing sites, e-commerce, landing pages — anywhere you want a non-intrusive chat option.

Panel

A full-height sidebar that slides in from the left or right edge of the page.

<script
  src="https://releases.navigic.ai/embed/embed.js?v=7"
  data-api-key="pk_wk_YOUR_KEY"
  data-display-mode="panel"
  data-panel-side="right"
  data-panel-width="400px"
  async
></script>

Behavior:

• Full viewport height, configurable width
• Slides in from the chosen side
• On mobile (under 640px), takes full width with a backdrop overlay
• Starts open by default — no bubble to click

Options:

Best for: Dashboards, admin panels, documentation sites — anywhere chat is a primary feature, not an add-on.

Inline

Renders the chat directly into a container element you provide. No floating UI, no fixed positioning.

<div id="navigic-chat" style="height: 600px; width: 100%;"></div>
 
<script
  src="https://releases.navigic.ai/embed/embed.js?v=7"
  data-api-key="pk_wk_YOUR_KEY"
  data-display-mode="inline"
  data-target-element="#navigic-chat"
  async
></script>

Behavior:

• Fills 100% of the container (you control the size via CSS)
• No bubble, no fixed positioning
• Always open — the header is visible but there's no collapse/expand
• Requires data-target-element pointing to a valid CSS selector

Best for: Custom layouts, SPAs, support pages, or anywhere you want the chat embedded directly in the page flow.

Comparison

Responsive Behavior

All modes are responsive:

• Bubble switches to full-screen on viewports under 480px wide
• Panel switches to full-width with backdrop on viewports under 640px
• Inline is fully controlled by its container's CSS — make the container responsive and the widget follows

Switching Modes

You can only set the display mode at initialization. To switch modes, call destroy() then init() with the new mode:

NavigicWidget.destroy();
NavigicWidget.init({
  workspaceId: "pk_wk_YOUR_KEY",
  displayMode: "panel",
});