Excluding elements from co-browsing
When an agent is co-browsing a form, you may not want the agent to see every element on the form. Some may be irrelevant, and some may contain private information. You can exclude certain elements by adding the CSS class assist-no-show to HTML elements. Live Assist SDK masks those areas.
For example:
<div id="sensitive-details" class="assist-no-show">content</div>
By default, elements with assist-no-show render as black boxes in the agent view in the same space on the page as the original element. You can change the color of the box the agent sees by defining the assist-no-show-agent-console CSS class in your visitor's stylesheet, with the color-attribute. This attribute does not affect the display of the elements on the visitor’s page.
For example:
.assist-no-show-agent-console { color: orange;}
You can also set them to transparent:
.assist-no-show-agent-console { color: transparent;}
Excluding agent interactions
You may have elements on your visitor's page that you want your agents to see, but not interact with. Add the HTML element attribute data-assist-permission to change the permission level for an agent. Set the level of interaction for an agent in the following ways:
- To explicitly allow an agent to see and interact with an element:
data-assist-permission="default"
- To let an agent see an element, but not click or interact with it:
data-assist-permission="viewonly"
- To mask an element preventing and agent from seeing or interacting with it:
data-assist-permission="mask"
For example:
- To disable agent interactions on a div-element:
<div attribute data-assist-permission="viewonly"> ...</div>Or, - To disable agent interaction with the whole page body:
<body data-assist-permission="viewonly"> ... </body>
Updates to the DOM during a co-browse are possible. To mask or prevent agent interactions during a co-browse by applying these attributes.
Important: Child elements inherit this attribute, so applying it to a top level element will stop agents interacting with all child elements; however you can override the inheritance by specifying a new attribute.