# 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", buttons: { shareButton:{color:"#fff", backgroundColor: "#36d576"}, cancelButton:{color:"#fff", backgroundColor:"#24183f" }}},
	copy: "link",
	eventName: "my-custom-events"
  });
</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.x.x.x.js"
        integrity="sha384-xxxx"
        crossorigin="anonymous"></script>

Please always use the latest stable version,

# 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
copy** Switches between what is copied or removes the copy button. link, id, none link
eventName** This event will be sent to the window for you to capture string Events printed to console

** 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.

Property Description Default
color Text color. #24183f
fontFamily Font family of the modal. Arial, sans-serif
idLabel.fontSize Font size of header text. 20px
idLabel.label Text of header. Your temporary ID
buttons.fontSize Font size for buttons. 12pt
buttons.borderRadius Border radius for buttons. 50px
buttons.shareButton.color Text color of the share button. #fff
buttons.shareButton.backgroundColor Background color of the share button. #36d576
buttons.shareButton.label Text label of the share button. Share screen
buttons.cancelButton.color Text color of the cancel button. #fff
buttons.cancelButton.backgroundColor Background color of the cancel button. #24183F
buttons.cancelButton.label Text label of the cancel button. Cancel

# Complete theme object

{
	fontFamily: "Arial, sans-serif",
	color: "#24183F",
	idLabel: {
		fontSize: "14pt",
		label: "Your temporary ID"
	},
	buttons: {
		fontSize: "12pt",
		borderRadius: "50px",
		shareButton: {
			color: "#fff",
			backgroundColor: "#36d576",
			label: "Share screen"
		},
		cancelButton: {
			color: "#fff",
			backgroundColor: "#24183F",
			label: "Cancel"
		},
	}
}