Install the WordPress plugin

On WordPress there is nothing to paste into a theme. The Broken Here plugin adds the widget to every page, and to nothing until you give it your key.

Install it

1. Download broken-here.zip. In WordPress, go to Plugins › Add New Plugin › Upload Plugin, choose the file, then Install Now and Activate.
2. On brokenhere.com, open your project's Settings › Setup and copy its key, which starts with wq_. Pasting the whole script tag from Setup works too: the plugin takes the key out of it.
3. In WordPress, paste it under Settings › Broken Here and save.
4. Open your site. The Report issue button is in the bottom right corner, and Setup says Live after that first page load.

If a caching plugin is active, clear its cache after saving, or visitors keep getting pages from before the button.

If you pasted the tag or the pre-hook into your theme before, take them out once the plugin is on: the widget refuses to install twice, but two pre-hooks would record every early error twice. Rather not add a plugin? The HTML tab's tag in your theme's footer.php works as on any other site.

Settings

Button chooses the corner, or no floating button at all. Either way, any link to #report-a-bug opens the report form, so a "Report a problem" item in your menu, a Buttons block or a link in your footer is enough. In a classic theme that is Appearance › Menus › Custom Links with the URL #report-a-bug; in a block theme, a link with that address in the Navigation block.

Who can report is everyone who visits, or only people logged in to the WordPress site. Logged in only is for a client reviewing a site with you before launch: they report, and visitors see no button. A #report-a-bug link does nothing for anyone the widget is not loaded for.

To change the colours, add this to Appearance › Customize › Additional CSS, or Styles › Additional CSS in the site editor, with your own:

[data-wq-root] {
  --wq-accent: #2f6b4f;
}

Customising lists every colour and font.

What it adds to your pages

Two tags, and nothing else:

• First in <head>, the pre-hook, which keeps errors thrown while the page loads until the widget arrives. It is the snippet Setup prints under Also catch errors thrown while the page loads, left readable rather than minified, with the id broken-here-early.
• Before </body>, the widget's own tag, async, as Setup prints it, with your key, the corner and the #report-a-bug trigger as its data-wq- attributes.

Nothing is loaded before a key is saved, nothing in the WordPress admin, and nothing in the Customizer's preview.

Caching and optimization plugins

Plugins that delay JavaScript until the visitor scrolls or taps delay the widget too, so the button appears at that moment. The pre-hook is marked for WP Rocket (nowprocket), LiteSpeed Cache (data-no-optimize, data-no-defer), Jetpack Boost (data-jetpack-boost="ignore") and Cloudflare's Rocket Loader (data-cfasync="false") to run straight away, so errors from the start of the page load are kept. With another plugin that delays scripts, add broken-here-early to its list of scripts not to delay.

If a security plugin sends a Content-Security-Policy, the widget needs what the install guide lists. The pre-hook is inline; plugins that add a nonce to inline scripts through WordPress's own wp_inline_script_attributes filter cover it.

For developers

broken_here_enabled decides, page by page, whether the widget is added:

add_filter( 'broken_here_enabled', function ( $on ) {
	return $on && ! is_page( 'landing' );
} );

Multisite: each site in a network is a site in Broken Here, with its own key under its own Settings › Broken Here.

If your theme or plugin code is on GitHub, the coding agent can fix bugs in it. Pages written in the WordPress editor live in your database and not in a repository, so the agent cannot change those.

Removing it

Deactivating the plugin takes the button off. Deleting it also deletes its settings. Reports stay in Broken Here either way; the plugin never stored any.