# Script tag

> Any site, any stack — one tag before </body>.

Source: https://docs.usejot.co/docs/install/script

Works on anything that renders HTML: server-rendered apps, static sites, CMS
templates, the jQuery app nobody wants to touch.

```html
<!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:

```html
<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`](https://www.npmjs.com/package/@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](/docs/widget).

## 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**.