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"
		},
	}
}