# Co-Browsing

You can easily integrate our Co-Browsing Client to enable screen sharing and remote control on your website. The easiest way to get up and running is to add following script to your website.

# JavaScript

To use the latest version, add following script to the bottom of the body.

<script src="https://cdn.webdotsupport.com/dist/websupport-qc-min.js"></script>    
<script>   
  webdotsupport("config",{    
    apiKey:"00000000-0000-0000-0000-000000000000",    
    buttonId:"supportButton",    
    pointer: "move",    
    spa: false,   
    theme: { color: "#24183f", primary:{color:"#fff", backgroundColor: "#36d576"}, secondary:{color:"#fff", backgroundColor:"#24183f" }}  
  });
</script>   

TIP

For production environments, we recommend using a specific version and set Subresource Integrity (opens new window)

E.g.

<script src="https://cdn.webdotsupport.com/dist/websupport-qc-min.1.0.4.js"
        integrity="sha384-kM11jq0n0HW5wgn7woA4q2TO1tMI0b6pq2gNk6reUUMNvdm1VI17LMtbH6mXPBeh"
        crossorigin="anonymous"></script>

# HTML

Add a link or button to your html with the buttonId from the step above.

<a href="javascript:void(0)" id="supportButton">Share Screen</a>

# Available options

Any of these options can be passed into the config object.

Property Description Options Default
apiKey web.support api token for your domain.
buttonId Id of the DOM element that should trigger the web.support popup.
pointer** Enables / disables pointer events. none, move, moveclick move
spa** True for single page applications, false for normal websites. boolean false
theme** Theme object (See Theme) object default theme

** Optional

TIP

For non SPA aplications you must to set X-Frame-Options to "sameorigin"
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

# Theme

The theme object can be used to customize the appearance.



{ color: "#24183f", primary:{color:"#fff", backgroundColor: "#8ecf760"}, secondary:{color:"#fff", backgroundColor:"#24183f" }} 
Property Description Default
color Text color. #24183f
primary.color Primary button text color. #fff
primary.backgroundColor Primary button background color. #8ecf760
secondary.color Secondary button text color. #fff
secondary.backgroundColor Secondary button background color. #24183f