Different modes of Visitor Application
During engagement, the Visitor Application shows the engagement panel. The panel can be positioned on the left or on the right side of the screen. As the reactive bubble is usually placed on the right side of the screen, it is preferred that the panel is also positioned on that side.
The engagement panel can potentially overlay on some elements on the web page. To overcome this, Glia has developed several modes to choose from when including the Visitor Application code on the website.
An iframe creates a sandbox for the client application which prohibits elements from appearing outside of the iFrame. This is why iFramed engagements usually do not have any issues with engagement panel covering page elements. Iframing the Visitor Application on a web page is not encouraged as it makes the application reload when the engagement is established.
With iframeless mode, a padding is added to the web page which is there to tell the page content that it needs to fit itself to a smaller area. This means that the engagement panel still takes up the needed space on the screen, but lies outside of the content of the page and does not cover up its elements.
The web page has elements with fixed width AND the engagement panel is on the right
Browsers start calculating element size from the top left corner. This means that adding a padding to the right side only takes effect when the element does not have fixed width. Adding a padding to the left side, on the other hand, shifts these elements to the right while keeping their width.
Usually header or footer but sometimes the entire body has a property like `width: 1200px`. In cases like that, the Visitor Application is unable to shift the elements to the right.
There are three possible fixes to this issue:
- We could shift the elements from left to right with padding. To utilise that, the engagement panel can be positioned on the left side.
- Use the iFramed mode.
- A Widget mode can be used. This is not generally encouraged, as it covers up everything below the engagement panel. Please consult with your CSM before considering this mode.
The web page has elements with fixed width AND engagement panel is on the left
The previous section describes browser limitations. When engagement panel is on the left, then having elements with fixed width does not come without a cost. When the page becomes narrow enough that it does not fit "engagement panel + the fixed width element" then the page will show a horizontal scrollbar.
The web page has elements with fixed positioning
Fixed positioning is a unique type of positioning that takes the element out form document's box model. This means that the element will not follow positioning restrictions enforced from parent elements - element does not care if engagement panel pushes the page to left/right and can effectively show up behind the Engagement panel.
To fix this we can:
- Use iframed mode - iframing is the only way to contain fixed positioning.
- Use the Widget mode.
- Moving the fixed elements - usually works for minor elements.