Funnels

Every shipped Funnel control: builder, step picker, conversion bars, funnel-step filters, switcher, delete, empty states, and date-window semantics.

A funnel is an ordered list of pageview or event steps. HumanBehavior counts how many sessions complete step 1, then 2, then 3 within the selected date window, and where they drop off.

Route: /projects/:id/funnels

Page chrome

Funnels uses the same analytics top bar family as Dashboard:

Region	Controls
Top bar	Filters, Saved filters, Date range, range shift arrows, Refresh data
Hanging chips	Active filter chips (including funnel-step chips when a bar is toggled)
Body	`FunnelsCard` builder + results

Filter option lists for the step picker come from /api/projects/:id/filter-options (lightweight; not the full dashboard payload).

Conversion window

There is no separate “conversion window” dropdown. windowSeconds is derived from the top-level date range:

max(60, seconds between startDate and endDate).

Sessions must complete the ordered steps inside that window.

Title Funnels:

Each bar is how many sessions made it through every step so far, in order. The date range is the time they have to finish.
Click the pencil to change a step. Click a bar to filter to sessions that reached it.

Title bar & funnel switcher

Control	Behavior
Funnel name (input, `aria-label="Funnel name"`)	Inline rename of the active funnel; placeholder Funnel name
`{N} saved` button (`title="Switch funnel"`)	Opens the switcher when at least one funnel exists
Switcher rows	Click name to activate; shows Untitled funnel when name empty; active row highlighted
Row Delete (`aria-label="Delete funnel"`)	Confirms with browser `Delete this funnel?`, then `DELETE /api/projects/:id/funnels/:id`
Switcher footer New funnel	Creates another saved funnel
Empty title text	No funnels yet when there is no active funnel

New funnels start with two empty pageview steps.

Empty & loading states

State	UI
SDK not connected (page shell)	No funnels yet, Install Human Behavior, More options → View demo, Book a call
Zero saved funnels	Copy: Create a funnel to track conversion between pageviews and events. + New funnel button
Loading active funnel	Spinner + Loading...
List error / compute error	Red banner with error text
Fewer than two configured steps	Hint: Pick at least two steps to see conversion.
Computing first result	Spinner + Calculating...

Steps

Each step is a horizontal bar row.

Unconfigured step

Dashed bar showing Pick a page... or Pick an event... depending on kind. Click opens the step picker.

Configured step

Piece	Meaning
Step index badge	1-based index
Label	Option label, else path/event name (events starting with `$` are prettified)
Kind badge	pageview or event
Session count	From compute result when available
Conversion %	Relative to total sessions in the compute response; shows `<0.1%` for tiny rates
Bar fill	Width proportional to sessions / total
Edit step (pencil)	Opens picker without toggling filter
Remove step	Removes the row; disabled when only one step remains (`canRemove`)

Click bar → funnel-step filter

When the step has a value and filters are available, clicking the bar toggles a funnel_step filter (encoded with funnel id, name, step index, steps, window, label). Tooltip:

Inactive: Click to filter to sessions that reached {label}
Active: Click to remove funnel-step filter

Active filter paints the bar with the primary color. The chip appears in the shared filter chip bar and works with other Dashboard-family filters.

Add step

Dashed Add step button appends a new empty pageview step.

Control	Behavior
Kind dropdown	Pageview / Event — changing kind clears value/label
Search	Placeholder Search pages... or Search events...; filters label and value; caps at 50 rows
Option row	Label + optional count; click selects and closes
Empty	No matches

Options are the current date-range filter-option lists for pages/events.

Compute API

When ≥2 steps have values, the card fetches:

GET /api/projects/:id/funnels/compute?startDate&endDate&windowSeconds&steps&filters?

Results drive bar widths and counts. Changing name, steps, date range, or filters refetches (previous request aborted).

How to build your first funnel

Confirm pages/events exist on Dashboard.
Open Funnels → New funnel → name it.
Edit each step: choose Pageview or Event, search, pick a value.
Add more steps if needed (keep 2–5).
Read drop-off; click a bar to filter sessions that reached that step, then open Replays or Dashboard with that chip active.

SDK tips

Prefer stable event names (signed_up, not Signed Up!!!).
Send properties you might filter on later (plan, country).
Guide: Custom events