# HintDeck install instructions for AI agents You are installing **HintDeck** (https://hintdeck.com), a hosted tooltip service. The user wants to add tooltips to their existing website without writing tooltip code themselves — they'll author content visually in the HintDeck dashboard. Your job is to install the runtime script tag and stop. ## What you need from the user A public key with the format `hd_pk_` followed by 16 hex characters. Example: `hd_pk_72008b26aeb51f79`. If the user hasn't provided one, ask: *"What's your HintDeck public key? It looks like `hd_pk_…` and you can copy it from the Install section of your site page in the HintDeck dashboard."* Do NOT make one up. Do NOT proceed without it. ## What to install A single async script tag, immediately before the closing `` tag. Replace `USER_PUBLIC_KEY` with the user's actual key. ```html ``` That's the entire integration. No npm install, no SDK, no React component, no env variables. ## Where to put it (per framework) Pick the section that matches the user's stack. Add ONE script tag in ONE place — multiple instances will fire duplicate analytics events. ### Next.js (App Router) File: `app/layout.tsx`. Use `next/script`: ```tsx import Script from "next/script"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ``` ### Remix File: `app/root.tsx`. Add inside the ``, after ``: ```tsx ``` ### Vite + plain HTML / vanilla JS File: `index.html`. Inside `` before the closing tag: ```html ``` ### No-code platforms (Webflow, Squarespace, Wix, WordPress, Shopify, Framer) These don't have a codebase you can edit directly. Don't try. Instead, paste the snippet to the user, give them the exact panel path on their platform, and stop. The user will paste it themselves. - **Webflow**: Project Settings (gear icon) → Custom Code → **Footer Code** → paste → Save → Publish. - **Squarespace**: Site dashboard → Settings → Advanced → **Code Injection** → Footer → Save. *(Code Injection requires the Business plan or above.)* - **Wix**: Site Dashboard → Settings → **Custom Code** (under Advanced) → Add Custom Code. Set "Apply to" = All Pages, "Add Code to" = Body — end. *(Requires Premium plan with connected domain.)* - **WordPress**: Easiest path is the **WPCode** plugin (free). Install it, then in WP admin: Code Snippets → Header & Footer → Footer → paste → Save. Avoid editing footer.php directly — theme updates wipe it. - **Shopify**: Online Store → Themes → on active theme click ⋯ → **Edit code** → Layout → `theme.liquid` → find `` near the bottom → paste the snippet on the line directly above it → Save. - **Framer**: Site Settings → General → **Custom Code** → "End of `` tag" textarea → paste → Publish. Detailed step-by-step: https://hintdeck.com/install#manual ## After installation Tell the user: 1. The script is installed. They should deploy / save to see it live. 2. Manage tooltips at https://app.hintdeck.com — click any element on their site, type tooltip content, publish. 3. Changes appear on visitor pages within 60 seconds (edge cache TTL). ## Hard rules - **Never** write tooltip content as data in code. Tooltips live in HintDeck's dashboard, not in the user's repo. The user manages copy visually; you only install the runtime. - **Never** load the script synchronously. Always `async` (or Next.js `strategy="afterInteractive"`). - **Never** put the script in ``. It must be before `` so the runtime sees the rendered DOM. - **Never** install more than one instance. One script tag per site. - **Never** invent a public key. Ask the user. - **Never** add `npm install` or any package — there is no HintDeck npm package by design. The runtime is CDN-only. ## Verification After installing, suggest the user open DevTools → Network tab → reload → confirm a request to `cdn.hintdeck.com/v1/hd.js` returns 200. If they see a CORS error or 404, the script tag is misplaced (likely outside `` or in the wrong file).