Install the widget

Add the PinMarks snippet to plain HTML, React, Next.js, Vue or any framework.

Updated October 2026

The widget is one script tag. Copy your project's key from Settings → Widget Installation and replace proj_your_api_key_here.

Add the snippet

<!-- PinMarks Widget -->
<script src="https://app.pinmarks.io/widget.js" data-project="proj_your_api_key_here" async></script>

Use the npm package

Prefer a package over a script tag? @pinmarks/widget works with React, Next.js, Vue, Svelte and plain JavaScript, and is a no-op during server-side rendering.

npm install @pinmarks/widget

import pinmarks from '@pinmarks/widget';

const widget = await pinmarks.ioit({
  projectKey: 'proj_...',                                // required
  user: { name: 'Jane Smith', email: 'jane@acme.com' },  // optional
});

widget?.open();
pinmarks.destroy(); // e.g. on unmount

Verify the installation

In Project → Widget → Installation → Code snippet, enter your website address under Verify installation and click Verify. PinMarks fetches the page and looks for the snippet and your project key.

Send it to a developer

Not the one who edits the site? Click Send to developer, enter their email, and PinMarks sends them the snippet and your project name. You can edit the subject and message before sending.

Use an AI coding agent

The AI coding agent tab has a Copy Prompt button. Paste the prompt into Claude Code, Cursor or a similar tool. It contains your key and snippet and tells the agent to detect your setup (bundler, CMS or plain HTML), install the widget, and confirm that the button appears.

Content Security Policy

If your site sends a CSP header, allow the PinMarks domain in script-src and connect-src, otherwise the widget works locally but not in production.

Content-Security-Policy: script-src 'self' https://app.pinmarks.io; connect-src 'self' https://app.pinmarks.io;

Staging only

To avoid showing the widget to real visitors, load it only on staging hosts:

<script>
  if (window.location.hostname.includes('staging.')) {
    var s = document.createElement('script');
    s.src = 'https://app.pinmarks.io/widget.js';
    s.dataset.project = 'proj_your_api_key_here';
    s.async = true;
    document.body.appendChild(s);
  }
</script>