KQ-1767 · COBROWSE/CONSENT

Cobrowse Consent

A screen-sharing request on the customer's own page: a card names the agent, says what they will and won't see, lists the private fields and counts down to expiry, with Allow viewing and Not now. Allowing plays three beats — the card becomes a slim bar at the top through a shared layout on springs.glide, a coloured frame draws round the page edge by edge on the move ease, and a stripe sweeps across every private field in cascade order leaving its mask behind — while the agent's pointer, when the host passes one, glides on springs.drift. Stop sharing or Escape anywhere inside lifts the masks, fades the frame on the exit ease and leaves a receipt; an unanswered request expires and explains why.

KQ-1767 · COBROWSE/CONSENT

request · ines is asking · basinworks billing · esc stops sharing

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/cobrowse-consent

Props

frameColor: "cobalt" | "jade" | "amber" | "rose"; default "cobalt"; The colour of the frame, the live dot and the sweep's edge.
maskStyle: "stripes" | "frost" | "redact"; default "stripes"; How a private field is covered: a diagonal hatch, a frosted pane, or a solid redaction bar.
density: "compact" | "cozy" | "roomy"; default "cozy"; Field rows, type and gaps.
agent: { name: string; team: string; initials: string }; default { name: "Ines Varga", team: "Basinworks support", initials: "IV" }; Who is asking.
fields: CobrowseField[]; default defaultCobrowseFields; The page's fields as the customer sees them: id, label, value and wide.
maskedFields: string[]; default ["card", "bank", "tax"]; Ids of the fields hidden from the agent while sharing.
pageTitle: string; default "Billing"; The page's title.
product: string; default "Basinworks"; The product the page belongs to.
state / defaultState: "request" | "sharing" | "declined" | "expired" | "ended"; default — / "request"; Where the request stands, controlled or initial.
onStateChange: (state) => void; default —; Fires from the choice, the stop or the expiry that changed the state.
onAccept: () => void; default —; Allow viewing was pressed.
onDecline: () => void; default —; Not now was pressed.
onStop: (info: { seconds: number }) => void; default —; Sharing stopped (Stop sharing or Escape), with how long it ran.
onExpire: () => void; default —; The request lapsed without an answer.
now: number; default defaultCobrowseNow; The moment the page first renders, ms; its timers count on from it.
requestedAt: number; default now − 18 s; When the agent asked, ms.
expiresIn: number; default 120; Seconds a request stays open.
pointer: { x: number; y: number } | null; default null; Where the agent's pointer is while sharing, as 0–1 fractions of the page; null hides it.
sweep: number; default 420; How long the stripe takes to sweep one field, ms.
height: number; default 540; Height of the surface, px; the page scrolls inside its frame.
disabled: boolean; default false; The choices can't be made.
className: string; default —; Classes for the outer surface.

Prop	Type	Default	Description
frameColor	"cobalt" \| "jade" \| "amber" \| "rose"	"cobalt"	The colour of the frame, the live dot and the sweep's edge.
maskStyle	"stripes" \| "frost" \| "redact"	"stripes"	How a private field is covered: a diagonal hatch, a frosted pane, or a solid redaction bar.
density	"compact" \| "cozy" \| "roomy"	"cozy"	Field rows, type and gaps.
agent	{ name: string; team: string; initials: string }	{ name: "Ines Varga", team: "Basinworks support", initials: "IV" }	Who is asking.
fields	CobrowseField[]	defaultCobrowseFields	The page's fields as the customer sees them: id, label, value and wide.
maskedFields	string[]	["card", "bank", "tax"]	Ids of the fields hidden from the agent while sharing.
pageTitle	string	"Billing"	The page's title.
product	string	"Basinworks"	The product the page belongs to.
state / defaultState	"request" \| "sharing" \| "declined" \| "expired" \| "ended"	— / "request"	Where the request stands, controlled or initial.
onStateChange	(state) => void	—	Fires from the choice, the stop or the expiry that changed the state.
onAccept	() => void	—	Allow viewing was pressed.
onDecline	() => void	—	Not now was pressed.
onStop	(info: { seconds: number }) => void	—	Sharing stopped (Stop sharing or Escape), with how long it ran.
onExpire	() => void	—	The request lapsed without an answer.
now	number	defaultCobrowseNow	The moment the page first renders, ms; its timers count on from it.
requestedAt	number	now − 18 s	When the agent asked, ms.
expiresIn	number	120	Seconds a request stays open.
pointer	{ x: number; y: number } \| null	null	Where the agent's pointer is while sharing, as 0–1 fractions of the page; null hides it.
sweep	number	420	How long the stripe takes to sweep one field, ms.
height	number	540	Height of the surface, px; the page scrolls inside its frame.
disabled	boolean	false	The choices can't be made.
className	string	—	Classes for the outer surface.

Cobrowse Consent

Billing

Install

Props