Position and Sizing Options

Where your chat widget sits on the page affects both usability and conversion. A widget that covers important content or hides behind other elements creates friction. This guide covers every positioning and sizing option available in Synaptiq.

All position and sizing settings live under Admin Dashboard > Settings > Widget > Layout.

Screen Position

Bottom-Right (Default)

The widget trigger button anchors to the bottom-right corner of the viewport. This is the industry standard position -- visitors instinctively look here for chat support. Unless you have a specific reason to move it, keep this default.

Bottom-Left

Anchors to the bottom-left corner. Use this when:

• Your site already has a floating element in the bottom-right (cookie banner dismiss button, scroll-to-top arrow, another third-party widget).
• Your layout reads right-to-left (RTL) and placing the chat on the left feels more natural.
• A/B testing suggests left placement performs better for your audience.

Set position in the dashboard dropdown or via the embed script:

<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-position="bottom-left"
></script>

Valid values are bottom-right and bottom-left.

Margin and Offset

The margin controls the gap between the trigger button and the edges of the viewport. Default is 20px from both the bottom and the side.

Dashboard Controls

• Bottom margin: Distance from the bottom of the viewport (range: 8px -- 120px).
• Side margin: Distance from the right or left edge, depending on position (range: 8px -- 120px).

Embed Attributes

<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-margin-bottom="32"
  data-margin-side="24"
></script>

When to Increase Margins

• Cookie consent banners: Many consent tools place a bar at the bottom of the page. Set the bottom margin to at least the height of the banner (often 60-80px) so the trigger button floats above it.
• Fixed navigation bars: If your site has a sticky bottom nav (common on mobile-first designs), increase the bottom margin so the widget clears it.
• Other floating elements: Scroll-to-top buttons, feedback tabs, and promotion badges all compete for corner space. Stagger margins to prevent overlap.

Widget Window Dimensions

When a visitor clicks the trigger button, the chat window opens as a panel anchored to the same corner. You can control its width and height.

Default Dimensions

| Property | Desktop | Mobile | |---|---|---| | Width | 400px | 100% of viewport | | Height | 600px | 100% of viewport | | Max height | 85vh | 100vh |

Custom Dimensions

Set custom values in Settings > Widget > Layout > Window Size:

• Width: 320px to 500px. Wider windows feel more spacious but consume more screen real estate. 400px is a good balance for most Latin-script languages; consider 440-480px for languages with longer average word lengths (German, Finnish).
• Height: 400px to 720px. Taller windows show more conversation history without scrolling. On shorter screens (laptops with 768px height), the max-height: 85vh cap ensures the window never overflows.

<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-window-width="440"
  data-window-height="650"
></script>

Mobile Responsive Behavior

Synaptiq automatically adapts to small screens. Here is what changes on viewports narrower than 480px:

1. Full-screen takeover: The chat window expands to fill the entire screen when opened, replacing the card-style floating panel. A close button appears in the top-left corner.
2. Trigger button shrinks: The icon diameter reduces by 15% to free up tap space.
3. Bottom margin adjusts: On devices with a visible home indicator bar (iPhone with Face ID, most modern Android phones), Synaptiq adds an extra 16px of bottom padding automatically using env(safe-area-inset-bottom).
4. Keyboard handling: When the visitor focuses the text input, the widget repositions to stay above the on-screen keyboard. This prevents the common bug where the input field gets hidden behind the keyboard on iOS Safari.

Disabling Full-Screen on Mobile

If you prefer the floating card style on mobile as well (for example, on a tablet-optimized layout), you can disable full-screen takeover:

<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-mobile-fullscreen="false"
></script>

When disabled, the widget uses the same card dimensions on mobile as on desktop, with width capped at calc(100vw - 24px) to prevent horizontal overflow.

Z-Index Considerations

The widget renders inside an <iframe> and a host <div> with a default z-index of 2147483000. This is intentionally very high to ensure the widget floats above most page content, modals, and fixed headers.

When You Need to Adjust

• Your site uses a modal library with z-index 2147483647: The widget trigger may slip behind the modal backdrop. Either lower your modal's z-index or raise the widget's.
• Multiple floating widgets: If you embed other third-party tools (help desk, analytics popover), their z-index values may collide. Synaptiq's z-index can be overridden.

<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-z-index="2147483600"
></script>

Alternatively, use a CSS custom property:

#synaptiq-widget-container {
  z-index: 99999 !important;
}

Stacking Context Pitfalls

If the widget appears behind an element even though its z-index is higher, the parent of that element likely creates a new stacking context (via transform, opacity, filter, or will-change). In that case, adjusting z-index alone will not help. Move the Synaptiq embed <script> tag to be a direct child of <body> to keep it in the root stacking context.

Using Data Attributes for Position Override

All positioning properties can be set at the embed level using data-* attributes. This is useful when you deploy the same workspace across multiple pages with different layouts.

<!-- Product page: bottom-right, extra bottom margin for sticky cart bar -->
<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-position="bottom-right"
  data-margin-bottom="80"
  data-margin-side="20"
></script>

<!-- Blog page: bottom-left, default margins -->
<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-position="bottom-left"
></script>

Dynamic Override with JavaScript

If you need to change the widget position after the page has loaded (for example, after a cookie banner is dismissed), use the Synaptiq JavaScript API:

// Move the widget up after the cookie banner disappears
document.addEventListener("cookie-consent-accepted", () => {
  window.Synaptiq.updateLayout({
    marginBottom: 20,
  });
});

The updateLayout method accepts any combination of position, marginBottom, marginSide, windowWidth, windowHeight, and zIndex. Changes apply instantly without reopening the widget.

Complete Embed Example

A fully configured layout with all positioning attributes:

<script
  src="https://synaptiqintel.com/widget.js"
  data-synaptiq-id="YOUR_WORKSPACE_ID"
  data-position="bottom-right"
  data-margin-bottom="24"
  data-margin-side="24"
  data-window-width="420"
  data-window-height="620"
  data-mobile-fullscreen="true"
  data-z-index="2147483000"
></script>

Next Steps

Now that your widget is positioned correctly, head to Custom CSS Overrides to learn how to fine-tune the widget's visual details beyond what the dashboard settings expose.