docs · install
One script tag, then start clicking.
Zidl loads from a CDN and mounts itself in a shadow root. There is no package to install, no component to wrap and no build step to change.
Add the tag
Paste this as the last tag before the closing body tag. It is not bundled, so your build output is unchanged and because it names the hosts it may run on, the same tag is safe to ship to every environment.
index.html
<script
src="https://cdn.zidl.io/embed.js"
data-hosts="localhost,staging.yourapp.com"
data-zidl-key="zk_your_key"
></script>Reload the page. The Zidl panel docks to the edge of the screen, and clicking anything in your app attaches a task to it. Delete the tag and every trace is gone.
The three attributes
| Attribute | What it does |
|---|---|
| data-hosts | Decides whether the overlay activates at all, by naming the hostnames it may run on — comma separated. A leading *. matches subdomains but never the bare domain, so *.acme.com covers staging.acme.com and leaves acme.com alone. On any host you did not list, the tag does nothing. |
| data-force | Runs Zidl anywhere regardless of the host — a preview deploy, a client walkthrough. |
| data-zidl-key | The project write key. It decides which board a report lands on — see the board. Generate one by signing up, then copy it from Setup. |
What happens on the first click
- The element is captured with a resolvable CSS path and a Playwright locator, so the pin can find it again after a reflow.
- The React component behind it is resolved to a file, line and column — see source detection.
- The clicks and keystrokes that led there are already recorded — see the step recorder.
- The result becomes a task on your team's board, with a severity, a label and an assignee.
Is it safe to add?
The loader is dependency-free ES5 and the entire UI lives in a shadow root, so no style of yours collides with any style of ours. The developer notes cover isolation, immutable versioning, and what the recorder refuses to capture.