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

# Verifying Installation

> How to confirm the OpenHermit script is correctly installed on your website.

## The installation badge

Every website in your dashboard shows a real-time installation status badge. It updates automatically — no refresh needed.

| Badge                                   | Meaning                                                             |
| --------------------------------------- | ------------------------------------------------------------------- |
| 🟡 **Script not yet detected**          | The script has never pinged from this website                       |
| 🟢 **Script active · Last seen 3m ago** | Script is installed and running correctly                           |
| ⚪ **Script detected (inactive)**        | Script was seen more than 24h ago — check if it's still on the page |

The badge polls every 15 seconds. After you paste the script and visit a page, it will turn green within seconds.

***

## Manual verification

If the badge stays amber, verify the script is correctly installed:

### 1. View page source

In any browser, press `Ctrl+U` (Windows) or `Cmd+U` (Mac) to view the raw HTML source. Search for `openhermit` — you should see:

```html theme={null}
<script
  src="https://openhermit.com/script.js"
  data-api-key="YOUR_KEY_HERE"
  async>
</script>
```

**Common issues:**

* The script is only on the homepage, not all pages — add it to your layout/template
* The `data-api-key` is empty or wrong — copy it again from the dashboard
* The script URL is wrong — it must be `https://openhermit.com/script.js`

### 2. Check the browser console

Open DevTools (F12) → Console. The script logs a warning if something is wrong:

```
[OpenHermit] No data-api-key found on script tag.
```

If you see no OpenHermit messages at all, the script file itself may not be loading (check the Network tab for a failed request to `script.js`).

### 3. Check network requests

In DevTools → Network tab, filter by `openhermit`. You should see:

* A request to `script.js` (status 200)
* A POST to `/api/ping` (status 200)
* A POST to `/api/actions/sync` (status 200)

***

## Forms not detected?

If the script is confirmed active but no actions appear in your dashboard:

**The form might be on a different page.** The script only detects forms on the current page. Make sure you visit the specific page containing the form — not just the homepage.

**The form might be loaded dynamically.** React, Vue, and Angular apps often render forms after the initial page load. The script has a MutationObserver that handles this, but there can be a short delay. Wait 2–3 seconds after the form appears before checking.

**The form might not look like a form.** If a "form" is built entirely with `div` and `onClick` handlers (not real `<form>` and `<input>` tags), the script can't detect it. Consider adding `data-mcp-action` attributes manually.

**Third-party widgets need special handling.** Calendly, Typeform, HubSpot etc. are detected by checking for their JavaScript objects or DOM elements. If a widget is embedded via a plain iframe with no identifying attributes, it won't be detected.

***

## Adding detection manually

For any element the script can't auto-detect, add WebMCP attributes directly in your HTML:

```html theme={null}
<div
  data-mcp-action="booking"
  data-mcp-description="Book a 30-minute strategy call with our team"
  data-mcp-params='{"name": "required", "email": "required", "message": "optional"}'
>
  <!-- your booking widget here -->
</div>
```

The script will pick up these attributes and include the action in the next sync.