01
Semantic AI element matching
The widget inspects the live DOM tree and uses an LLM to target controls. UI refactors no longer break guidance flows.
Add guidance without maintaining tour selectors.
Hardcoded product tours turn every frontend release into a selector maintenance chore. Adoption Layer is a lightweight JavaScript widget that analyzes live DOM hierarchy without static selector maps.
Hardcoded tours break with every frontend release
Every refactored component or CSS class change breaks traditional product tours. Fixing brittle selectors pulls engineers away from building core product features.
A recurring team moment
"A product manager updates onboarding docs. No React components need editing: the widget applies the guidance directly over the live DOM. Guidance logic stays out of your codebase."
A guidance engine built for fast-moving codebases
02
Isolated private data
DOM snapshots capture structural tags only. Form input values and keystrokes are never recorded or transmitted.
03
High performance
Written in modern JavaScript with zero heavy dependencies and bundled with esbuild, preserving fast page loads.
04
Predictable state machine
The complete guidance lifecycle (initialization, loading, tool interactions, and handoff) runs autonomously.
How it compares
Open-source libraries like Shepherd or Intro.js require constant selector updates and pollute your frontend components. Adoption Layer resolves targeting dynamically via a single script tag.
How it fits the team's operating rhythm
Covered workflows
- Quick embed via script tag or NPM package
- Customizing theme colors and launcher triggers
- Handling multi-step Single Page Application flows
- Observing session performance and client telemetry
What to expect
You remove guidance logic from your application code. Product teams manage documentation while engineers maintain full control over performance and security.
Setup and privacy
Add the script tag, initialize your API key, and customize the theme. It runs cleanly across modern frameworks (React, Vue, Angular) without touching private data.
Frequently asked questions
Does the widget impact React or Vue app performance?
No. The widget performs a lightweight DOM scan and offloads model inference asynchronously to our API.
How does it find buttons without CSS selectors?
The service sends a structural DOM representation to an LLM that identifies the relevant control based on user intent.
Can we customize widget styling and placement?
Yes. You can customize colors, positioning, and launcher icons to match your brand guidelines.
How is data privacy ensured?
Analysis is restricted to structural tags. You can also specify CSS exclusion selectors to completely redact sensitive sections.