> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userplane.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Static HTML Integration

> Install Userplane on a static HTML site using the CDN embed script

This guide covers how to install Userplane on a static HTML site with no build step.

## Adding the script

Add these two tags to the `<head>` of every page where you want recordings to work:

```html theme={null}
<head>
  <!-- Sets workspace ID for screen recording -->
  <meta name="userplane:workspace" content="YOUR_WORKSPACE_ID" />

  <!-- Loads Userplane screen recording script -->
  <script type="module" src="https://cdn.userplane.io/embed/script.js"></script>
</head>
```

Replace `YOUR_WORKSPACE_ID` with your workspace ID. You can copy the exact snippet with your ID pre-filled from **Workspace Settings > Domains** in the Userplane dashboard.

Place the tags as early as possible in `<head>`. The Userplane script can only capture console logs and network requests that occur after it initializes — placing it early gives you the most complete recording context.

## Sensitive data

To blur an element in recordings, add the `data-userplane-blur` attribute:

```html theme={null}
<div data-userplane-blur>
  <input type="text" placeholder="Credit card number" />
</div>
```

To blur all inputs across the page, add a meta tag:

```html theme={null}
<meta name="userplane:blur" content="inputs" />
```

Supported `content` values for the meta tag:

| Value    | What is blurred                                      |
| -------- | ---------------------------------------------------- |
| `inputs` | All `<input>`, `<textarea>`, and `<select>` elements |
| `images` | All `<img>` elements                                 |
| `all`    | The entire page                                      |

To exclude a specific element from blur (when a parent is blurred):

```html theme={null}
<div data-userplane-blur>
  <p>This is blurred.</p>
  <p data-userplane-blur="false">This is not blurred.</p>
</div>
```

See [Sensitive Data Redaction](/developer/sensitive-data-redaction) for the full reference including CSS class blurring and third-party widget compatibility.

## URL parameters

When a customer opens a recording link, Userplane appends `userplane-token`, `userplane-action`, and `userplane-workspace` to the URL. For a static HTML site, these are read automatically by the embed script — no additional configuration is needed.

If your site redirects users to a login page before they reach the recorded page, carry the `userplane-` prefixed parameters through the redirect so the recording session can start after login. See [Installation](/developer/installation) for an example.

## Example app

A complete static HTML example is available at [github.com/userplanehq/userplane-sdk-examples/tree/main/examples/static-html](https://github.com/userplanehq/userplane-sdk-examples/tree/main/examples/static-html).

<Frame caption="Example app">
  <img src="https://mintcdn.com/userplane/iHJrxtyvOmNXmfMS/media/developer/framework/static-example-app.png?fit=max&auto=format&n=iHJrxtyvOmNXmfMS&q=85&s=5274fc08be6891d8e7d489bd29d8368b" width="1920" height="1440" data-path="media/developer/framework/static-example-app.png" />
</Frame>

No environment variables or build step are required. Open `index.html` directly in a browser or serve it with any static file server:

```bash theme={null}
cd examples/static-html && npx serve .
```

## Related articles

* [Installation](/developer/installation) — script placement, CSP, iframes, and browser support.
* [Domain Verification Guide](/developer/domain-verification) — verify domain ownership after installing the script.
* [Sensitive Data Redaction](/developer/sensitive-data-redaction) — blur sensitive content in recordings.
* [Web SDK](/developer/web-sdk) — programmatic SDK for apps with a build step.
