Add guidance without maintaining tour selectors.
Hardcoded tours turn UI changes into engineering work. Adoption Layer is an embeddable widget that reads the structural DOM and maps user intent to the live interface without a tour selector map.
Selector-based tours age badly
Every new layout or component breaks a selector-based tour, and fixing it pulls you off real work. You shouldn't maintain a state machine just to show users where to click.
"The PM updates the onboarding documentation. Instead of asking engineering to update React tooltip state and selector logic, they update the docs in Adoption Layer. The widget uses those instructions with the live DOM, so the tour logic does not live in your frontend code."
A widget built for changing interfaces
AI Mapping
The widget parses the structural DOM and uses an LLM to map intent to elements. UI changes are less brittle because guidance is not tied to a fixed selector map.
PII Sandboxing
The DOM snapshot is designed around structure, not form values. Projects can also define redacted selectors for sensitive areas.
Core Performance
Built with vanilla ES6 and bundled with esbuild, the widget stays small enough to test safely before a broad rollout.
State Machine
We handle the complex state logic (`INIT` → `START_GUIDANCE` → `LOADING` → `[TOOL_STATE]` → `FINISH`) inside the widget.
Covered workflows
- Drop-in installation via `