Widget Positioning

Control where the widget appears on your website.

Launcher Position

Basic Position

Set the corner where the launcher appears:

Position	Value
Bottom Right	bottom-right (default)
Bottom Left	bottom-left

Configure in Settings → Widget → Appearance → Launcher Position.

Offset Values

Fine-tune the launcher position with pixel offsets:

Bottom offset: 20px (distance from bottom of viewport)
Side offset: 20px (distance from right/left edge)

These values ensure the launcher doesn't overlap with other fixed elements like cookie banners or floating buttons.

Widget Window Position

Desktop Alignment

The chat window opens relative to the launcher:

Launcher Position	Window Opens
Bottom Right	Above and to the left
Bottom Left	Above and to the right

Mobile Behavior

On mobile devices:

• Widget opens full-screen by default
• Launcher position still affects where the icon appears
• Transition animations respect the position

Z-Index Management

Default Z-Index

The widget uses a high z-index to stay above most page content:

/* Launcher */
z-index: 999999;

/* Widget window */
z-index: 1000000;

/* Overlay (mobile full-screen) */
z-index: 1000001;

Adjusting Z-Index

If the widget appears behind other elements, adjust via dashboard:

1. Go to Settings → Widget → Advanced
2. Set custom z-index values
3. Save changes

Common Conflicts

Element	Typical Z-Index	Solution
Cookie banners	9999-99999	Widget is higher by default
Modal dialogs	1000-10000	Widget is higher by default
Navigation	100-1000	No conflict
Custom overlays	Varies	May need adjustment

Responsive Behavior

Breakpoints

The widget automatically adjusts at different screen widths:

Breakpoint	Behavior
Desktop (> 768px)	Fixed position launcher, floating window
Tablet (481-768px)	Same as desktop, adjusted sizing
Mobile (≤ 480px)	Full-screen window, launcher in corner

Mobile Full-Screen

When the widget opens on mobile:

Width: 100vw
Height: 100vh (or 100dvh for dynamic viewport)
Position: fixed, top: 0, left: 0

The launcher button is hidden when the widget is open on mobile.

Avoiding Element Overlap

Fixed Elements on Your Site

If you have fixed elements that overlap with the widget:

1. Adjust launcher offset - Move the widget away from conflicting elements
2. CSS adjustments - Ensure your elements have lower z-index
3. Hide on certain pages - Use JavaScript API to hide widget on specific pages

Example: Cookie Banner Conflict

If your cookie banner at the bottom conflicts with the widget:

// Hide launcher when cookie banner is visible
const cookieBanner = document.getElementById('cookie-banner');
if (cookieBanner && cookieBanner.style.display !== 'none') {
  Fyncall.hideLauncher();
}

// Show launcher when banner is dismissed
document.getElementById('accept-cookies').addEventListener('click', () => {
  Fyncall.showLauncher();
});

Page-Specific Positioning

Different Positions Per Page

You can override positioning on specific pages:

<!-- On checkout page - hide widget -->
<script>
  window.fyncallConfig = {
    hideLauncher: true
  };
</script>

Conditional Display

Use JavaScript to control visibility:

// Hide on specific paths
if (window.location.pathname.startsWith('/checkout')) {
  Fyncall.hideLauncher();
}

// Show only on product pages
if (window.location.pathname.includes('/products/')) {
  Fyncall.showLauncher();
} else {
  Fyncall.hideLauncher();
}

Animation Settings

Launcher Animation

The launcher can have entrance animations:

Animation	Description
None	Appears immediately
Fade In	Subtle fade in
Slide In	Slides from edge
Bounce	Bounces into view

Widget Animation

When the chat window opens:

Animation	Description
None	Appears immediately
Fade	Fades in
Slide Up	Slides up from launcher
Scale	Scales up from launcher

Configure animations in Settings → Widget → Appearance → Animations.