HTML and static sites

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

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 and Widget not showing.
• "This email isn't allowed to request changes on this site." is MDF-AUTH-002. See Email not allowed.