Skip to content
pagepalpagepal

Quick start

  1. Install it.

    Terminal window
    npm install pagepal

  2. Create a pal once, when your app starts:

    import { createPal } from 'pagepal';
    

    const pal = createPal();

    A pal appears in the bottom-right corner. Out of the box it reacts to fast scrolling, going offline, idling, password fields, rage clicks, dead clicks and copying. It also steps aside for chat widgets.

  3. Watch your forms. Pass a selector (it also covers forms rendered later) or an element:

    const pal = createPal({ watch: 'form#signup' });

    Now it winces at validation errors and looks at the field that caused them, warms up as required fields fill in, and cheers on a successful submit.

  4. Watch your requests. fetch and XMLHttpRequest (which axios uses) are both covered:

    const pal = createPal({ watch: 'form#signup', requests: true });

    It waits while requests take longer than 150 ms and winces when one fails.

  5. Optional: record what it sees. Add the analytics plugin and point it at your own endpoint:

    import { createPal } from 'pagepal';
    import { analytics } from 'pagepal/analytics';
    

    createPal({
      watch: 'form#signup',
      requests: true,
      plugins: [analytics({ endpoint: '/api/ux' })],
    });

Try it here

Section titled “Try it here”

This page has a pal too. Submit an empty or invalid email:

Mood: neutral

Next steps

Section titled “Next steps”

The pal in the corner is pagepal itself.