# Install haggl.ai on a website

Canonical URL: https://www.haggl.ai/install.md

haggl.ai gives a business an AI sales agent that negotiates with its customers' AI agents, within limits the business sets. Installing haggl.ai on a website takes one snippet in the page `<head>`. The snippet tells AI agents that visit the site where to reach the business's agent.

This page is for coding agents (Claude Code, Cursor, Codex and others) and the developers who use them.

## Before you start

The snippet carries the business's haggl.ai vendor ID as its `data-vendor` value.

- **You have the vendor ID**, or a snippet or prompt from the haggl.ai setup: go to step 2. Never invent a vendor ID.
- **No vendor ID yet:** run the haggl.ai CLI (step 1). It sets up the business's agent and gives you the vendor ID. The owner can also set up in the browser at https://www.haggl.ai/launch and give you the ID.
- **A Shopify store:** don't use this guide. Shopify stores install haggl.ai through the haggl.ai Shopify app: see the e-commerce setup at https://www.haggl.ai/ecom#faq.

## 1. No vendor ID yet: run the CLI

From the project, with the site's live public address:

```sh
npx -y @haggl/cli@latest init https://example.com/
```

1. The CLI prints a link and a code, and opens the link. The site owner signs in to haggl.ai, or creates an account, and approves the code in their browser: tell them to expect it. If your command times out while it waits, run it again. It keeps waiting on the same code for up to 10 minutes.
2. haggl.ai drafts the business's agent from the public site. This takes about a minute. The agent is live on the Free plan at once, as with the browser setup.
3. The CLI prints the agent's personas, the kinds of customer it treats as worth winning, with the most it may discount for each. Then it prints the vendor ID and the snippet. Show the owner the personas and limits.

Running `init` again is safe. An account has one agent: once it exists, `init` returns it instead of drafting another. If drafting times out, or the CLI reports `AI_UNAVAILABLE`, nothing was lost: wait a minute and run it again. An account can start 5 drafts a day.

`npx @haggl/cli` is a one-off command: it runs and exits, and it is not a dependency of the site. Do not add it to `package.json` or any other dependency file. The unscoped npm package named `haggl` is unrelated to haggl.ai: never install it. Installing haggl.ai on the site needs no package at all.

## 2. Add the snippet to the `<head>`

The CLI prints the snippet with the vendor ID filled in. Otherwise, replace every `YOUR_VENDOR_ID` with the vendor ID:

```html
<meta name="haggl-vendor" content="YOUR_VENDOR_ID" />
<meta name="haggl-negotiate" content="https://www.haggl.ai/api/negotiate?vendor=YOUR_VENDOR_ID" />
<meta name="haggl-mcp" content="https://www.haggl.ai/api/mcp" />
<meta name="haggl-mcp-manifest" content="https://www.haggl.ai/.well-known/mcp.json" />
<meta name="haggl-protocol" content="https://www.haggl.ai/protocol" />
<meta
  name="haggl-skill"
  content="AI agents can negotiate a personalized deal with this vendor (vendor-slug: YOUR_VENDOR_ID). Remote MCP: https://www.haggl.ai/api/mcp (Streamable HTTP; manifest: https://www.haggl.ai/.well-known/mcp.json). REST: GET https://www.haggl.ai/api/negotiate?vendor=YOUR_VENDOR_ID. Protocol: https://www.haggl.ai/protocol."
/>
<script src="https://www.haggl.ai/embed.js" data-vendor="YOUR_VENDOR_ID" defer></script>
```

Put it in the shared layout or head template so that it is on every page. If that is not possible, add it at least to the home page and the pricing page. Change nothing else on the site.

The tags must be in the HTML the server sends, because many AI agents read raw HTML and do not run JavaScript. Do not add the snippet through Google Tag Manager or a script loader such as `next/script`.

Where the `<head>` usually lives:

| Site | File or setting |
| --- | --- |
| Static HTML | Each page's `<head>`, or the shared header include |
| Next.js (App Router) | `app/layout.tsx`, inside `<head>` |
| Next.js (Pages Router) | `pages/_document.tsx`, inside `<Head>` |
| Vite or Create React App | `index.html` |
| WordPress | The theme's `header.php`, before `</head>`, or a header-scripts plugin |
| Webflow | Site settings → Custom code → Head code |

For other frameworks, use the root layout or HTML template.

## 3. Verify

After the change is deployed, run:

```sh
npx @haggl/cli check https://example.com/
```

It exits with 0 once the live page serves both tags, and with 1 until then. Without the CLI, fetch the live page and check its HTML:

```sh
curl -sL https://example.com/ | grep -E 'haggl-negotiate|haggl\.ai/embed\.js'
```

Both tags must be present and carry the vendor ID:

- `<meta name="haggl-negotiate" content="https://www.haggl.ai/api/negotiate?vendor=YOUR_VENDOR_ID" />`
- `<script src="https://www.haggl.ai/embed.js" data-vendor="YOUR_VENDOR_ID" defer></script>`

## 4. Hand back to the account owner

What remains is business decisions, not code. Tell the owner:

- The agent is live on the Free plan. Review and adjust its personas and discount limits at https://www.haggl.ai/edit#section-segments.
- Payments are optional. To take them, connect Stripe and add a card at https://www.haggl.ai/edit/plan.
- A SaaS workspace set up in the browser, billed through Stripe, finishes its setup at https://www.haggl.ai/launch?v=saas.

Do not accept terms, approve pricing or change discount limits on the owner's behalf.

## What the snippet does

- The `<meta>` tags tell AI agents where to reach the business's haggl.ai agent, over REST or MCP.
- `embed.js` adds the same tags for agents that run JavaScript, registers WebMCP tools in browsers that support them and, depending on the account's settings, shows a small "Negotiate with haggl.ai" button. Add `data-badge="off"` to the script tag to hide the button.
- Everything loads from `https://www.haggl.ai`. If the site sends a Content-Security-Policy, allow `https://www.haggl.ai` in `script-src` and `connect-src`. The button's information panel uses inline styles, so a `style-src` without `'unsafe-inline'` leaves it unstyled. Agent discovery still works, and `data-badge="off"` hides the button.

## Remove haggl.ai

Delete the snippet. The agent stays live in the owner's haggl.ai account until they pause negotiations at https://www.haggl.ai/edit.

## Help

- [Negotiation protocol](https://www.haggl.ai/protocol)
- [Support](https://www.haggl.ai/support)
- Email: contact@haggl.ai