Bug reports from your WordPress site

A must-use plugin

Create this file. wp_footer prints the tag before </body>, and for a logged-in user a line after it says who they are. wp_json_encode with JSON_HEX_TAG keeps a display name from breaking out of the script.

<?php
/**
 * Plugin Name: Brainbox
 */

add_action( 'wp_footer', function () {
	?>
	<script src="https://app.brainbox.sh/widget.js" data-project="pk_your_project_key" data-endpoint="https://app.brainbox.sh/ingest"></script>
	<?php
	if ( is_user_logged_in() ) {
		$user = wp_get_current_user();
		$identity = array(
			'id'    => (string) $user->ID,
			'email' => $user->user_email,
			'name'  => $user->display_name,
		);
		echo '<script>window.Brainbox.identify(' . wp_json_encode( $identity, JSON_HEX_TAG | JSON_HEX_AMP ) . ');</script>';
	}
} );

Page caching

A page cache that served one logged-in user's page to another would hand over the identify line too. Most caching plugins skip logged-in users by default; check yours does before you add the identify part.

Without code

A header-and-footer code plugin works too: paste the tag into its footer box. You lose the identify line, so reports arrive without a name unless the user types one.

<script src="https://app.brainbox.sh/widget.js" data-project="pk_your_project_key" data-endpoint="https://app.brainbox.sh/ingest"></script>

Your own button

Any element marked data-brainbox opens the widget, in any post, page or block. screenshot goes straight to marking up the page, record to a recording of the page and feature to a feature request; an empty value opens the chooser. Clicks are delegated, so elements rendered later work too.

<button data-brainbox="screenshot">Report a bug</button>
<button data-brainbox="feature">Request a feature</button>

From code, window.Brainbox.open() shows the chooser and window.Brainbox.start("feature") goes straight to one flow. To hide our floating button and keep only yours, add data-mode="mount" to the tag.

Passwords and personal data

Typed values are always masked in recordings, so passwords, emails and card numbers never leave the browser as plain text. Add the rr-block or rr-mask class to anything else you want kept out.