Install options

Everything the tag can be told, and what to do on sites that need a little more: strict security policies, single page apps, and pages that scroll inside a box.

The tag#

html

<script src="/notefix/notefix-embed.js"
        data-project="Acme staging"
        data-api="/notefix-api"
        data-board="staging"
        data-issues="queue"></script>

Attribute	What it does	If you leave it out
`data-project`	The name shown in Notefix	The page title
`data-api`	Where the store is. A path on your site, not a full address	Notes stay in each person's browser
`data-board`	Which board this page's notes go on	A board named after the page's path
`data-issues`	`queue` turns on Create an issue for a connected tracker. Needs `data-api`	Create an issue says nothing is connected
`data-theme`	`light` or `dark`	Dark
`data-rail`	`pinned` starts with the toolbar on screen instead of tucked at the edge	Tucked at the edge
`data-mobile-breakpoint`	Below this width, in pixels, Notefix lays itself out for a phone: toolbar along the bottom, All notes as a sheet	`560`
`data-phone`	`off` hides Notefix on phones altogether, instead of laying it out for one	On

Where to put it#

Just before </body>, on the pages you want reviewed. Put it on your staging site, not production: since it is one line, it is only ever where you added it.

If your pages share a layout template, add it there behind a condition:

html

{% if environment == "staging" %}
  <script src="/notefix/notefix-embed.js" data-api="/notefix-api" data-board="staging"></script>
{% endif %}

Content Security Policy#

This is the most common reason nothing appears. If your site sends a Content-Security-Policy header, it may block Notefix's files. The browser console says so.

The recommended install already works with the strictest usual policy, without changing it:

Your policy says	Why it still works
`script-src 'self'`	The files are copied onto your own site
`style-src 'self'`	The stylesheets are too
`connect-src 'self'`	The store is a path on your own site, through your proxy

So: copy the folder rather than linking to it from somewhere else, and proxy the store rather than pointing at its port.

Single page apps#

React, Vue, Angular and the like work as they are, as long as the address changes when the screen does. Notefix files each note under the page's path.

If your app does not change the address, or you would rather notes were filed under your own screen names, tell Notefix how to name the current screen. Put this before the tag:

html

<script>
  window.NotefixConfig = {
    screen: function () { return myRouter.currentRouteName(); }
  };
</script>
<script src="/notefix/notefix-embed.js" data-api="/notefix-api"></script>

Apps that scroll inside a box#

Notefix finds the part of the page that scrolls by itself. If notes stay still while your content scrolls under them, point it at the right element:

window.NotefixConfig = {
  scroller: function () { return document.querySelector('.app-scroll'); }
};

Help notes find their element#

A note remembers several ways to find its element again. The most reliable is a stable attribute: every data-testid in your app keeps notes attached even through a redesign. Without those, an id on important elements is nearly as good.

Removing it#

Delete the tag. Notefix never changes your page: it draws on top and reads where things are, so the page works exactly the same without it. Notes already written stay in the store until you delete its database.

What it does to your site#

It never modifies your page: no wrapping, submitting or changing of anything.
It adds its own elements and stylesheets, with class names starting rv- and sn-.
It sets a few data-sn- attributes on <html> for the reviewer's display settings.
It keeps a copy of notes in the browser's local storage, under keys starting sn_.
It makes no requests anywhere except the data-api path you gave it. No analytics, no third parties.

Check which version is running by typing window.NotefixVersion in the browser console.