Bug reports from your Django app

The tag, in your base template

<body>
  {% block content %}{% endblock %}

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

Who is signed in

Templates can't build a dictionary, so make it in a context processor:

def brainbox_user(request):
    user = request.user
    if not user.is_authenticated:
        return {}
    return {
        "brainbox_user": {
            "id": str(user.pk),
            "email": user.email,
            "name": user.get_full_name(),
        }
    }

Add "yourapp.context_processors.brainbox_user" to context_processors in your TEMPLATES setting. Then, after the tag, json_script writes the user as escaped JSON and a line of script passes it on:

{% if brainbox_user %}
  {{ brainbox_user|json_script:"brainbox-user" }}
  <script>
    window.Brainbox.identify(JSON.parse(document.getElementById("brainbox-user").textContent))
  </script>
{% endif %}

With Django's Content Security Policy on, give that script nonce="{{ csp_nonce }}" and allow https://app.brainbox.sh in script-src and connect-src.

htmx and hx-boost

hx-boost swaps each page's <body> content in place and runs its scripts. The widget puts itself back on the page after every swap, with anything the user had open, and a second run of the tag does nothing, so there is one widget.

Your own button

Any element marked data-brainbox opens the widget, in any template. 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.