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:
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 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.
Check it worked
- In the browser. On any page of your app,
window.ProductTour.projectIdin the console prints your project ID. This is the direct check. - 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-idin its HTML. This only reads the home page's server-rendered HTML, so a tag added with JavaScript (asnext/scriptdoes) may not be seen there; the check-in covers it.
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.
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.
## 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. For prompts that get good tours, see Example prompts.