Introduction
pagepal is a small mascot that sits in a corner of your page and reacts to what is actually happening on it. It winces at a form error and looks at the field that caused it. It waits while requests are in flight, covers its eyes while someone types a password, and looks confused when a button does nothing.
Most mascots are decoration. pagepal gives users feedback, and gives you data: the signals that move the mascot also power first-party UX analytics, such as rage clicks, dead clicks, form errors and abandonment, and failing endpoints, sent only where you choose.
The pal in the corner of this page is pagepal. Currently: neutral
How it works
Section titled “How it works”pagepal is built from three small ideas:
- Watchers notice things on the page: a form’s
invalidevent, afetchin flight, the browser going offline, a click that changes nothing. - Each watcher raises a signal, a mood with a priority and sometimes a duration. When several signals are active at once, the highest priority wins, and the pal falls back when it ends.
- The pal also emits events (
formError,request,frustration, …) that you can listen to, or hand to the analytics plugin.
Everything renders in a Shadow DOM, so your CSS can’t break it and its CSS can’t leak into your page. It has no dependencies.
Where to go next
Section titled “Where to go next”The pal in the corner is pagepal itself.