Skip to main content
No Result Found

Install the Bug Capture Web SDK

Simple steps to install the Bug Capture Web SDK

Use the Web SDK widget to embed the Bug Capture recorder in your webpage with a single line of code. This allows all the visitors to your webpage to report bugs with Bug Capture.

Follow these steps to embed the Bug Capture Web SDK on your website:

Generate a Public App ID in workspace’s settings. Whitelist domains on which you want to integrate the SDK. See here if you have questions how to configure domains.

Copy-paste the snippet below into your page’s <body>:

HTML Snippet
Copy icon Copy

Non-minified version of the HTML snippet

<script type="text/javascript">
; (function() {
	// Create a queue, but don't obliterate an existing one!
	const birdeatsbug = (window.birdeatsbug = window.birdeatsbug || [])
	// If the real SDK is already on the page, return.
	if (birdeatsbug.initialize) return
	// If the snippet was invoked already, show an error.
	if (birdeatsbug.invoked) {
		if (window.console && console.error) {
			console.error('birdeatsbug snippet included twice.')
		}
		return
	}
	// Invoked flag, to make sure the snippet is never invoked twice.
	birdeatsbug.invoked = true
	// A list of the methods in the SDK to stub.
	birdeatsbug.methods = [
		'setOptions',
		'trigger',
		'resumeSession',
		'takeScreenshot',
		'startRecording',
		'stopRecording',
		'stopSession',
		'uploadSession',
		'deleteSession',
	]
	// Define a factory to create stubs. These are placeholders
	// for methods in the SDK so that you never have to wait
	// for it to load to record method calls. The `method` is
	// stored as the first argument, so we can replay the data.
	birdeatsbug.factory = function(method) {
		return function() {
			const args = Array.prototype.slice.call(arguments)
			args.unshift(method)
			birdeatsbug.push(args)
			return birdeatsbug
		}
	}
	// For each of our methods, generate a queueing stub.
	for (let i = 0; i < birdeatsbug.methods.length; i++) {
		const key = birdeatsbug.methods[i]
		birdeatsbug[key] = birdeatsbug.factory(key)
	}
	// Define a method to load the SDK
	// and that will be sure to only ever load it once.
	birdeatsbug.load = function() {
		// Create an async script element.
		const script = document.createElement('script')
		script.type = 'module'
		script.async = true
		script.src = 'https://sdk.birdeatsbug.com/v3/core.js'
		// Insert the script next to the first script element.
		const mountJsBefore = document.getElementsByTagName('script')[0] || document.body.firstChild
		mountJsBefore.parentNode.insertBefore(script, mountJsBefore)

		// Create a style element
		const style = document.createElement('link')
		style.rel = 'stylesheet'
		style.type = 'text/css'
		style.href = 'https://sdk.birdeatsbug.com/v3/style.css'
		// Insert the styles before the 1st style
		const mountCssBefore = document.querySelector('link[rel="stylesheet"]') || mountJsBefore
		mountCssBefore.parentNode.insertBefore(style, mountCssBefore)
	}
	// Load SDK
	birdeatsbug.load()
	// Pass options
	window.birdeatsbug.setOptions({ publicAppId: 'yourPublicAppId' })
})()
</script>

Replace yourPublicAppId with the one generated in the workspace settings.

Done - now all visitors to the page can report bugs like a pro!

Note: The Web SDK is available only on Team plans & above.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle