Script tag
Any site, any stack — one tag before </body>.
Works on anything that renders HTML: server-rendered apps, static sites, CMS templates, the jQuery app nobody wants to touch.
<!doctype html>
<html>
<body>
<!-- your page -->
<script
src="https://cdn.jsdelivr.net/npm/@usejot/widget@1/dist/jot.js"
data-jot-key="jot_pk_your_key"
></script>
</body>
</html>Copy the exact tag from Project → Settings — it has your key in it.
Versions
@1 always serves the newest 1.x release, so fixes reach your site without
you changing anything. To approve every change yourself, pin an exact version
and bump it when you choose:
<script
src="https://cdn.jsdelivr.net/npm/@usejot/widget@1.0.0/dist/jot.js"
data-jot-key="jot_pk_your_key"
></script>The widget is also on npm as @usejot/widget
if you would rather serve the files yourself.
Options
Every option is a data-jot-* attribute on the same tag:
| Attribute | Default | What it does |
|---|---|---|
data-jot-key | — | Required. Your project key |
data-jot-trigger | fab | The round Jot button (fab) or a vertical edge tab (tab) |
data-jot-edge | right | Which side the trigger sits on: left or right |
data-jot-offset | 50 | Vertical position, as a percent of the viewport height |
data-jot-env | — | Tags every report with an environment name |
data-jot-autostart | true | false waits for your code to call Jot.init() |
data-jot-internal | — | true hides the widget from ordinary visitors |
The full list, with what each one does in detail, is in the widget reference.
What it costs your page
The tag loads a loader of about a kilobyte. The rest of the widget downloads only when someone opens it, and the recorder only when someone presses Record. A visitor who never opens Jot pays for the loader and nothing else.
The widget renders inside a shadow root, sits out of the page flow, and never touches your styles — zero layout shift.
Check it works
Reload the page. The Jot button appears on the right edge, and your dashboard's setup checklist ticks off Install the widget.