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

# Quick Start

> Add OpenHermit to your website in 2 minutes.

## Step 1 — Create an account

Go to [openhermit.com/register](https://openhermit.com/register) and create a free account.

***

## Step 2 — Add your website

In your dashboard, click **+ Add Website**. Enter your website's name and domain (e.g. `example.com`). OpenHermit generates a unique API key for your site.

***

## Step 3 — Install the script

Copy the generated script tag and paste it into every page of your website, just before the closing `</body>` tag.

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

### Installing in popular frameworks

<Tabs>
  <Tab title="Next.js">
    Add to your root `app/layout.tsx` using the Next.js `Script` component so it loads on every page:

    ```tsx theme={null}
    import Script from 'next/script';

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            {children}
            <Script
              src="https://openhermit.com/script.js"
              data-api-key="YOUR_API_KEY"
              strategy="afterInteractive"
            />
          </body>
        </html>
      );
    }
    ```

    Use `strategy="afterInteractive"` — this ensures the script runs after React hydration so dynamically rendered forms are visible.
  </Tab>

  <Tab title="WordPress">
    Add to your theme's `functions.php`:

    ```php theme={null}
    function openhermit_script() {
      echo '<script src="https://openhermit.com/script.js" data-api-key="YOUR_API_KEY" async></script>';
    }
    add_action('wp_footer', 'openhermit_script');
    ```
  </Tab>

  <Tab title="HTML">
    Paste directly before `</body>` in your HTML files:

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

  <Tab title="Webflow / Squarespace">
    In your platform's **Custom Code** settings, paste the script tag into the **Footer Code** field. This adds it to every page automatically.
  </Tab>
</Tabs>

***

## Step 4 — Verify installation

After pasting the script, visit any page on your website in a browser. Within a few seconds, your dashboard will show:

<Frame>
  <div className="p-4 bg-teal-50 border border-teal-200 rounded-xl text-sm">
    ✓ Script active · Last seen just now
  </div>
</Frame>

If the badge stays amber ("Script not yet detected"), check that:

* The script tag is present in your page's HTML source (Ctrl+U / Cmd+U to view source)
* The `data-api-key` matches the key shown in your dashboard
* The script URL is accessible (not blocked by a CSP header)

***

## Step 5 — Visit pages with forms

Visit the pages on your website that contain contact forms, booking widgets, or other interactive elements. The script detects them automatically and they appear in your **Actions** dashboard within seconds.

***

## What's next?

<CardGroup cols={2}>
  <Card title="Configure Agent Prompts" icon="sliders" href="/guides/agent-prompts">
    Tell agents what to do before, during, and after each action
  </Card>

  <Card title="View Your Manifest" icon="file-code" href="/guides/webmcp-manifest">
    See exactly what AI agents see when they discover your site
  </Card>
</CardGroup>
