Limitations of Embedded Co-browsing
Below is an overview of limitations and gotchas when using embedded co-browsing in your website. To get more details about a certain topic click the link in the overview (if available).
Note that the list is not necessarily complete. It reflects the limitations known at the time of writing. The list is extended whenever future issues are reported or examined with our own tests.
| TECHNOLOGY / DESIGN PATTERNS | WORKS WITH EMBEDDED CO-BROWSING | ||
|---|---|---|---|
| Scalable Vector Graphics (SVG) | OK | (with some limitations) | |
| svg animation | Warning | (animations on visitor and agent side are not in sync) | |
| HTML 5 | OK | (with some limitations - see below) | |
<input> new types (date, color, range, number) |
Warning | (input fields are rendered by the browser. Thus, look and feel may differ when visitor and agent use different browsers) | |
<canvas> |
OK | (see limits about html-tainted-canvas-limitation; canvas can be disabled for security reasons) | |
<video>, <audio> |
Not supported | (does not display on the agent side) | |
| HTML Framesets | Not supported | (iframes are supported - for cross origin iframes: see below) | |
| CSS | OK | (with some limitations - see below) | |
| css selectors level 1 | OK | ||
| css selectors level 2 | OK | ||
| css selectors level 3 | Warning | css-selectors-level-3-limitations | |
| css selectors level 4 | Not supported | (current status with W3C is working draft - not an official specification yet) | |
| css pseudo classes | Warning | (elements shown when hovering on visitor side are not displayed on agent side) | |
| browser specific properties (-moz-gradient etc) | Warning | (not supported in on premises setups with Resource History turned on) | |
| Internet Explorer "filters" | Warning | css-microsoft-internet-explorer-filter-attribute-limitations | |
| css function style property values | Warning | supported are: font functions defined in https://www.w3.org/tr/css-fonts-3/ stylistic(), styleset(), character-variant(), swash(), ornaments,annotation() general functions as defined in https://www.w3.org/tr/css3-images/ linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient() css shapes according to https://www.w3.org/tr/css-shapes-1/ inset(), circle(), ellipse(), polygon() 2d transform functions as defined in https://www.w3.org/tr/css-transforms-1/#two-d-transform-functions matrix(), translate(), translatex(), translatey(), scale(), scalex(), scaley(), rotate(), skew(), skewx(), skewy() 3d transform functions as defined in https://www.w3.org/tr/css-transforms-1/#three-d-transform-functions matrix3d(), translate3d(), translatez(), scale3d(), scalez(), rotate3d(), rotatex(), rotatey(), rotatez(), perspective() filter functions as defined in https://www.w3.org/tr/filter-effects/#typedef-filter-function-list blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() general / basic (long standing) functions in css: attr(), counter(), counters(), rect(), rgb(), rgba(), url() currently not supported are: calc() https://drafts.csswg.org/css-values-3/#calc-notation (only editors draft available) filter() https://www.w3.org/tr/filter-effects/#filtercssimagevalue hsl(), hsla() |
|
| css3 animations | Warning | (not in sync between visitor and agent) | |
| Cross Origin (x-origin) | OK | (see details below) | |
| x-origin iframes | OK | (snippet must be contained in all iframe pages) | |
| CROSS ORIGIN RESOURCE SHARING (CORS) | OK | ||
| Changing protocol, origin or port in a running co-Browsing Session | Warning | (works with limitations when only subdomains are changed) | |
| Javascript Navigation | Warning | (page elements shown on "mouseover" cannot be triggered on agent side) | |
| Javascript alert, confirm, prompt | Not supported | (all operations that stop javascript entirely lead to problems with unblu) | |
| Single Page Application (SPA) | OK | ||
| Internet Explorer Conditional Comments | Not supported | ||
| Continuous Scrolling (Infinite Scroll) | Warning | (not working on agent side; use "load more" instead) | |
| Carousel | Warning | (agent cannot interact with carousel) | |
| Captcha | Warning | (depending on captcha technology, agent may see another captcha than visitor) | |
| Adobe Flash | Not supported | (banner or videos may work but visitor and agent are out of sync) | |
| Microsoft Silverlight | Not supported | (banner or videos may work but visitor and agent are out of sync) | |
| Java Applets | Not supported | (content will not be transmitted) | |
| Active X Objects | Not supported | (disabled for security reasons) |
Limitations of Virtualized Environments
Virtualized environments, such as Citrix, can have latency problems with Rich Internet Applications. If you are using a virtualized environment and are having problems with "double-hop latency" you can install a browser locally. See the Citrix Local App Access page for details.
Agent Side Limitations
Embedded co-browsing should only be used in View & Point mode. While it is possible to extend this functionality, the effort required can be significant as 'unknown' features of the site (such as JavaScript(s) and forms) can cause difficulties. Using embedded co-browsing the agent can observe the actions of the visitor and they can move their pointer but they cannot interact with the page; only the visitor can trigger actions. (Essentially, the page is 'visually' recreated.) The permitted agent actions are listed in the table below but we only recommend implementing the first two entries (eventsupport.back & eventsupport.change) which allow the agent to move forward and back in the browser and to enter text (although entering text into forms can be problematic if the forms have any associated dynamic behavior).
The embedded co-browsing use case is when your agents will not be expected or required to perform any actions on the page. The visitor remains in control at all times. The agent can watch and they can use their mouse to point: that is all. If you need your agents to do more than viewing and pointing then you should first review whether using 'embedded co-browsing' is the correct strategy. For example, it may be more appropriate to use Universal co-browsing rather than attempting to 'squeeze' extra features out of an embedded implementation. See below for more specific information regarding the limitations imposed by sites that contain forms and JavaScript.
The Agent Cannot Trigger onChange() Form Actions
Some forms use dynamic actions that modify parts of the form when the visitor makes specific inputs. For example, the form may change the address fields depending on the country the customer selects. From unblu's perspective, the problem is that the actions are triggered only when the user makes a manual input, and not when unblu fills the customer's form with input from the agent.
Therefore, when an agent changes a form field, such as the customer's home country, the form will not update other fields, such as the street address.
This behavior can, in principle, be changed with additional JavaScript programming on the page but it would mean, for example, writing a script that checks the content of the respective form fields once or twice per second, instead of relying on the JavaScript onChange() event.
Note: To test this behavior on your site simply attempt to fill-in a form and check if any of the form content changes.
The Agent Does not Trigger JavaScript Events
Most interactions between a page and the user happen via built-in browser behaviors, such as clicking a link or a button. However, it is also possible that the page uses JavaScript to track what the user does, and then react accordingly. However, this will only track the customer's mouse pointer, and not the agent's. Consequently, the agent cannot trigger some actions on the page.
The customer can operate the website as usual. The Agent may find it impossible to trigger some actions on the website (such as navigating a dynamic image gallery).
Note: To detect this behavior on a site, switch off JavaScript and see if you can operate the website. Any behavior that stops working is due to the page using JavaScript. For applications that use JavaScript to run at all, such as a dynamic image gallery, it is difficult to see whether Agents can operate it.
Note: You can find these 'Agent side actions' under the 'event support' section in the advanced configuration mode of the server (4.2 server required). The settings are marked 'Internal'.
| Agent side actions | Works with embedded co-browsing | |
|---|---|---|
| eventsupport.back | Navigate to the previous page in the navigation history (history.back()) | |
| eventsupport.change | Warning | Change the text value of <input type="text"> elements or <textarea> elements.No keyboard events will be transmitted, only the text value of the inputs. |
| eventsupport.click | Warning | Click an element Only the click will be transmitted, no mouse events such as down, up or move. |
| eventsupport.forward | Navigate to the next page in the navigation history (history.forward()) | |
| eventsupport.mark | Trigger marker (also active in view and point mode) | |
| eventsupport.move | Warning | Experimental support for mouse move events. Not fully tested, no support where not functioning. |
| eventsupport.navigateTo | Navigate to a url (enter url in navigation bar on agent side and hit enter). | |
| eventsupport.scroll | Change scroll position | |
| eventsupport.selection | Change selected options in select elements, checkboxes and radio buttons |
Related Topics
Universal and Document Co-browsing (Optional)
- deploycloud
- deployonprem