Browser extension and embed toolbar

Both tools put Notemark comments directly on a live page, for sites the canvas cannot load through its proxy: pages behind a login, local development servers and sites with bot protection.

Browser extension

The extension runs in Chromium browsers, version 116 or later: Chrome, Edge, Brave, Arc, Opera and Vivaldi. You will find it in Settings, Connections, under Extensions.

Connect your account

1. Click the extension icon. It opens Notemark and asks you to Connect Extension.
2. Approve. The extension can now capture screenshots, add comments to live pages and create canvases in your workspace.
3. The confirmation tab closes on its own.

The connection lasts 30 days and renews itself while your browser is open.

Comment on a page

1. Open the page and click the extension icon, or press Cmd+Shift+. (Mac) or Ctrl+Shift+. (Windows).
2. In Comment mode, the element under your pointer is outlined. Click it, type and post. Cmd+Enter or Ctrl+Enter posts.
3. Use Mark up screenshot to draw arrows (A), rectangles (R) and highlights (H) on the crop.

Each comment carries the element, a cropped screenshot, your browser and window size, and recent console errors and failed requests. It goes to the canvas for that page if one exists, or to a new canvas in the workspace you used last.

Click a pin to read the thread, reply, resolve it or open it in Notemark.

The extension only gets access to the tab you activate it on. To see pins without clicking each time, choose Show comments on this site automatically and grant access to that one site. The icon then shows the open comment count. Comments added this way have no screenshot.

Extension icon badges

• ! means the page does not allow extensions.
• • means the tab moved to another site. Click the icon again.

Embed toolbar

The toolbar adds Notemark comments to your own preview and staging sites. Visitors never see it: it stays idle until a signed-in member of your workspace opens it.

Add a site

Workspace owners and admins set up sites under Settings, Toolbar.

1. Click Add site and give it a Name.
2. Under Allowed origins, list the addresses the toolbar may run on, one per line. A * covers one part of the address, like https://*.preview.acme.com. Plain http works for localhost only. You can add up to 20 origins.
3. Click Save site and copy the Site key and snippet from the site's card.

Wildcards that cover a whole shared platform, such as *.vercel.app, are rejected.

Install with a script tag

Paste the snippet from the site card into every page you want feedback on:

<script
  src="https://www.notemark.app/embed/v1.js"
  data-project="pk_your_site_key"
  async
></script>

Add data-hosts="*.preview.acme.com" to run it on some hosts only, or data-enabled="false" to switch it off.

Install with npm

npm install @notemark/toolbar

For React and Next.js, render the component once near the root of your app:

import { NotemarkToolbar } from '@notemark/toolbar/react';

<NotemarkToolbar
  projectKey="pk_your_site_key"
  enabled={process.env.NEXT_PUBLIC_VERCEL_ENV !== 'production'}
/>;

For other frameworks:

import { loadToolbar } from '@notemark/toolbar';

const stop = loadToolbar({
  projectKey: 'pk_your_site_key',
  hosts: ['*.preview.acme.com'],
});

Open the toolbar

• Press Cmd+Shift+. or Ctrl+Shift+. on the page.
• Click Open on site on a canvas whose address matches one of your toolbar sites.
• Call openToolbar() from a button of your own.

The first time, a Notemark window asks you to Open the toolbar. Comments are posted as you, in the workspace that owns the site, and only you see the toolbar. Sessions last 30 days and end if the site is switched off, its origins change or you leave the workspace. Sign out of a site under Settings, Connections, Toolbar sessions.

The toolbar works like the extension, with one difference: a website cannot screenshot itself, so toolbar comments have no screenshot.