01
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.
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.
A recurring team moment
"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
02
PII Sandboxing
The DOM snapshot is designed around structure, not form values. Projects can also define redacted selectors for sensitive areas.
03
Core Performance
Built with vanilla ES6 and bundled with esbuild, the widget stays small enough to test safely before a broad rollout.
04
State Machine
We handle the complex state logic (`INIT` → `START_GUIDANCE` → `LOADING` → `[TOOL_STATE]` → `FINISH`) inside the widget.
How it compares
Open source tour libraries require high maintenance, break on UI updates, and involve hooking into your React state. Adoption Layer handles the mapping dynamically via AI through a simple drop-in script tag.
How it fits the team's operating rhythm
Covered workflows
- Drop-in installation via `<script>` tag or NPM
- Customizing widget themes and triggers
- Supporting multi-step SPA flows
- Tracking guidance sessions and ratings
What to expect
You move most guidance updates out of application code. PMs and tech writers can update the docs that power guidance, while engineering keeps control of installation, privacy, and performance.
Setup and privacy
Add the script tag, initialize with your API key, and configure optional theming. It works with modern web apps, including SPAs. The parser focuses on structural identifiers, and redacted selectors give you control over sensitive areas.
Frequently asked questions
Will it slow down my React/Vue application?
No. The widget uses a highly optimized DOM parser and offloads the heavy processing to our API.
How does it find elements if I don't provide CSS selectors?
The backend uses an LLM through OpenRouter to interpret the structural DOM snapshot and match the user's intent to the right element.
Is the widget customizable?
Yes. You can customize colors, positioning, and trigger icons to match your brand.
How do you handle privacy?
The parser focuses on structural identifiers, and each project can define redacted selectors for areas that should stay out of guidance context.