Installation

Follow these steps (demo video) to integrate a bug report widget like below into your site:

Generate a Public App ID in workspace's settings. Whitelist domains on which the SDK will be integrated. See here if you have questions how to configure domains.
Copy-paste the snippet below into your page's <body>:

html

<script type="text/javascript">
;(function(){const birdeatsbug=(window.birdeatsbug=window.birdeatsbug||[]);if(birdeatsbug.initialize)return;if(birdeatsbug.invoked){if(window.console&&console.error){console.error('birdeatsbug snippet included twice.')}return}birdeatsbug.invoked=true;birdeatsbug.methods=['setOptions','trigger','resumeSession','takeScreenshot','startRecording','stopRecording','stopSession','uploadSession','deleteSession'];birdeatsbug.factory=function(method){return function(){const args=Array.prototype.slice.call(arguments);args.unshift(method);birdeatsbug.push(args);return birdeatsbug}};for(let i=0;i<birdeatsbug.methods.length;i++){const key=birdeatsbug.methods[i];birdeatsbug[key]=birdeatsbug.factory(key)}birdeatsbug.load=function(){const script=document.createElement('script');script.type='module';script.async=true;script.src='https://sdk.birdeatsbug.com/v3/core.js';const mountJsBefore=document.getElementsByTagName('script')[0]||document.body.firstChild;mountJsBefore.parentNode.insertBefore(script,mountJsBefore);const style=document.createElement('link');style.rel='stylesheet';style.type='text/css';style.href='https://sdk.birdeatsbug.com/v3/style.css';const mountCssBefore=document.querySelector('link[rel="stylesheet"]')||mountJsBefore;mountCssBefore.parentNode.insertBefore(style,mountCssBefore)};birdeatsbug.load();window.birdeatsbug.setOptions({publicAppId:'yourPublicAppId'})})();
</script>

Non-minified

html

<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 users of the page can report bugs like a pro! 🚀

Installation ​

Installation