# Install with your coding agent

One prompt that installs the GuideMark script in your codebase, and a block for AGENTS.md or CLAUDE.md that tells your agent how to build tours.

Installing GuideMark is one script tag in your app's shared layout. Your coding agent can add it: paste the prompt below into Claude Code, Cursor or any other coding agent, with your project ID filled in.

## The install prompt

Find your project ID in **Settings → Installation** (it's the `data-project-id` in the snippet). Replace `YOUR_PROJECT_ID` with it, then paste:

```text
Install the GuideMark widget in this app. It's one script tag; there is no npm package.

1. Find the one layout or HTML template that every page shares, and add this tag there once, just before </body>:

<script
  id="guidemark-embed"
  src="https://naiuhnzdampxdewizhin.supabase.co/storage/v1/object/public/widgets/embed.js"
  data-project-id="YOUR_PROJECT_ID"
  data-api-url="https://guidemark.co"
  async
></script>

   Use the framework's own way to add a third-party script:
   - Next.js App Router: <Script> from next/script in app/layout.tsx, inside <body> after {children}, with strategy="afterInteractive" (drop async).
   - Next.js Pages Router: <Script> from next/script in pages/_app.tsx, strategy="afterInteractive".
   - React or Vue with Vite: index.html. Angular: src/index.html. SvelteKit: src/app.html.
   - Nuxt: app.head.script in nuxt.config.ts, with tagPosition: 'bodyClose'.
   - Anything else: the base HTML template.
   Keep the src and data-* attributes exactly as written. Don't add data-admin-panel. Don't render the tag from a component that mounts per page.

2. If the app has sign-in: once the signed-in user is known, call window.ProductTour.identify(<the user's stable id>), and call window.ProductTour.reset() on sign-out. The script loads async, so wait until window.ProductTour exists before calling it. Do this in the existing auth code, not in a new provider.

3. If the app sets a Content Security Policy, allow https://naiuhnzdampxdewizhin.supabase.co in script-src and connect-src, and https://guidemark.co in connect-src.

4. Run the app, open a page, and check in the browser console that window.ProductTour.projectId prints YOUR_PROJECT_ID. Then tell me which files you changed.
```

If the [GuideMark MCP server](/docs/agents/connect) is already connected, the agent can read the project ID itself: `get_project` returns it as `id`.

For the exact code per framework, see [Where the script goes](/docs/getting-started/install#where-the-script-goes).

## Check it worked

1. **In the browser.** On any page of your app, `window.ProductTour.projectId` in the console prints your project ID. This is the direct check.
2. **In the dashboard.** The status next to the project picker says **Connected**. Click its refresh button after loading your app.

The dashboard counts the widget as connected when either:

* the widget has checked in from a page within the last 30 days. The widget checks in each time the script loads, from any address including `localhost`, so running your app locally is enough; or
* GuideMark fetched your project domain's home page and found your `data-project-id` in its HTML. This only reads the home page's server-rendered HTML, so a tag added with JavaScript (as `next/script` does) may not be seen there; the check-in covers it.

<Callout type="warn" title="Connected isn't proof on a project with tours">
  A project that already has tours shows **Connected** even if nothing has checked in yet. Use the console check above to be sure.
</Callout>

## Tell your agent how to use GuideMark

Paste this into your repo's `AGENTS.md` or `CLAUDE.md`, so every agent working in your code knows GuideMark is there and builds tours the same way. Fill in the file where you added the script.

```md
## GuideMark (product tours and tooltips)

The GuideMark widget is loaded by the script tag with id="guidemark-embed" in <FILE>. Tours and tooltips live in GuideMark, not in this repo; edit them through the GuideMark MCP server at https://guidemark.co/api/mcp.

- Call get_project first. pageUrl is a path on its domain, like "/settings".
- Read the page's code before writing steps. Point every step at a stable selector that is unique on that page: an id, or a data-tour attribute. If the element has neither, add data-tour="short-name" to it in the code and target [data-tour="short-name"]. Never target generated or utility class names.
- Before renaming or removing an id or data-tour attribute, check list_tours and list_beacons for steps that use it, and update them.
- Create drafts. Don't publish unless asked. When a draft is finished, call request_review once with its tourId or beaconId.
- Signed-in users: call window.ProductTour.identify(user.id) after sign-in and window.ProductTour.reset() on sign-out.
```

Each agent still has to connect to the MCP server once: see [Connect your coding agent](/docs/agents/connect). For prompts that get good tours, see [Example prompts](/docs/agents/example-prompts).