Skip to main content

Minimized Call Widget

Description​

For better browsing experience on different devices the customer can further minimize The Call Widget while waiting in queue. The positioning of the Minimized Call Widget can be changed dynamically.

Positioning​

If static values for Minimized Call Widget positioning are not optimal due to layout differences between mobile and desktop or if your website have other elements on the bottom of the viewport, you can override those using dynamic positioning.

To set a dynamic placement, you should add your function to the option getMinimizedWidgetStyle.

Example code:

/*
 * Possible values for position:
 * - bottom-left
 * - bottom-right
 */

// calculateWidgetPosition is a function you define un your end
function calculateWidgetPosition() {
  const isMobile = document.body.classList.contains('mobile');
  // Avoid overlap with the sticky footer
  const verticalMargin = isMobile ? '64px' : '16px';

  return { 
    position: 'bottom-right', 
    verticalMargin, 
    horizontalMargin: '16px', 
    zIndex: 1000 
  };
}

// pass your function to getMinimizedWidgetStyle option 
let oneToOneEmbed = new BambuserOneToOneEmbed({
  getMinimizedWidgetStyle: calculateWidgetPosition,
});

Position​

The position field is for you to set a starting reference position which the margin fields will be relative to.

  position: 'bottom-left|bottom-right',

Margins​

You can set the margins between the surf while in queue box and the edges of page. We have two variables for it: vertical and horizontal margin. These variables both have a default value of 15 px. verticalMargin will be space on bottom of the box. Depending on chosen position, horizontalMargin will be space on left or right of the box.

  verticalMargin: '20px',
  horizontalMargin: '20px',

Z-index​

If the queue component collides with elements on you site then you can change the stacking order with zIndex. An element with greater stack order is always in front of an element with a lower stack order. You can specify what you wish to use as zIndex for surfing while in queue.

  zIndex: 1000,