# HTML and static sites

Paste the widget script before the closing body tag on an HTML or static site, then confirm Widget install is complete.

## Prerequisites

- A Modifee project.
- **Site URL** saved under **Settings → Connection**.
- **Authentication** set to **Site without login** (wizard: **Public site, no login**). A static page cannot sign a token.

## Steps

Use the wizard step **Install the widget**, or **Settings → Widget install**.

1. Open **Install manually** and select **HTML**. The instruction is "Paste this once in your shared layout, template or footer, just before `</body>`. It will load on every page." The note is "No shared layout? Add it to each page where your client should see the widget."

```
<script src="https://www.modifee.com/widget.js" data-project="YOUR_PROJECT_KEY" async></script>
```

`YOUR_PROJECT_KEY` is the `data-project` value already filled in on the **HTML** tab. The same value is shown under **Settings → Danger zone**. Copy `src` from the tab if it is not `https://www.modifee.com/widget.js`.

2. **Install automatically** writes that tag into the first file it finds among `index.html`, `public/index.html`, and `src/index.html`. It can also target a shared template: `templates/base.html`, `templates/layout.html`, `templates/base.html.jinja`, `app/templates/base.html`, `templates/application.html.erb`, `app/views/layouts/application.html.erb`, `resources/views/layouts/app.blade.php`, or `resources/views/app.blade.php`. Server frameworks are covered in [Other frameworks](https://www.modifee.com/docs/install/other-frameworks).
3. The same tag is on three more tabs:
   - **WordPress**: "Add this once in the theme footer, or with a plugin that injects a footer script, just before `</body>`."
   - **Webflow**: "Add this once in **Project settings → Custom code → Footer**, then publish."
   - **Shopify**: "Add this once in **Online Store → Themes → Edit code → theme.liquid**, just before `</body>`, then save."
4. Or press **Install automatically**. The pull request is titled "Install Modifee widget" on branch `modifee/install-widget`. Merge it, then wait until the screen no longer says "Merged — waiting for deploy".

**Site without login** does not use `MODIFEE_SECRET`.

**App with login** on a static HTML file stops automatic install: "This site has no server file where a token can be signed. Switch to Site without login to install with one line, or paste the signed-token snippet on your server. No pull request was opened."

If you paste that snippet on a server, the response that includes `data-token` must be rendered for each request and must not be cached. A cached page can send one user's token to someone else. See [Other frameworks](https://www.modifee.com/docs/install/other-frameworks).

**Install manually** includes an **iOS tip (optional)**: "Add viewport-fit=cover to your viewport meta tag so the button clears the iPhone home bar."

## Verify

1. Publish the page that contains the script.
2. Open **Settings → Widget install**.
3. Press **Check installation**.
4. The text is "Found on the site." and "Widget found on the site." The mark beside **Widget install** turns green.

The check reads the HTML Modifee fetches. The script tag must be in that HTML, with this project's `data-project`. A green mark also sticks when the widget has loaded and the stored check did not fail. The yellow tooltip is "Widget not found on the site".

## Troubleshooting

- "Add a site URL before checking."
- `We couldn't find the widget on` the saved site URL. `Paste the snippet just before </body> and check again.`
- `The widget on this page belongs to another project.`
- `We couldn't reach` the saved site URL. `Connection failed. The widget will be marked installed as soon as it loads on the site.` The same sentence uses `Timed out` or `HTTP` plus the status code when that is what the check reports.
- `This page is rendered in the browser, so the widget script is not in the HTML we fetched from` the saved site URL. `Open the site after you paste the snippet. We'll mark this done as soon as the widget loads.`
- "This repo doesn't match a place we can edit safely: Next.js App Router, Next.js Pages Router, Vite + React, Astro, or a root index.html. Paste the snippet above. No pull request was opened."
- "The repository tree is too large to choose a file safely. Paste the snippet above. No pull request was opened."
- The file path, then `has no </body> tag to attach the widget to. Paste the snippet above. No pull request was opened.`
- "This site has no server file where a token can be signed. Switch to Site without login to install with one line, or paste the signed-token snippet on your server. No pull request was opened."
- "Missing GitHub permissions. Re-authorize the GitHub App with contents:write and pull_requests:write."
- "This repository is archived. No pull request was opened."
- "Could not open the pull request."
- "This project has no API key yet."
- Browser console: "Modifee: data-project is required". "Modifee: missing script element".
- The button stays hidden until the client opens the access-marker URL. See [Access marker](https://www.modifee.com/docs/client-access/access-marker) and [Widget not showing](https://www.modifee.com/docs/troubleshooting/widget-not-showing).
- "This email isn't allowed to request changes on this site." is [MDF-AUTH-002](https://www.modifee.com/docs/errors/MDF-AUTH-002). See [Email not allowed](https://www.modifee.com/docs/troubleshooting/email-not-allowed).