Static sites and frameworks

Put the tag in whatever template renders <head> on every page. For React and Next.js, use the npm package.

<script src="https://tryshortbread.com/shortbread.js" data-site="YOUR_SITE_KEY" async></script>

| Framework | Where | |---|---| | Plain HTML | Every page's <head>, or a shared include. | | Astro | The <head> of your base layout, for example src/layouts/Layout.astro. | | Hugo | layouts/partials/head.html, or the theme's equivalent. | | Eleventy | The base layout under _includes. | | Jekyll | _includes/head.html. | | Nuxt | app.head.script in nuxt.config.ts: { src: "https://tryshortbread.com/shortbread.js", async: true, "data-site": "YOUR_SITE_KEY" }. | | SvelteKit | src/app.html, inside <head>. | | Vite or Create React App | index.html, inside <head>. |

Then publish and click Verify my site in Shortbread.

Blocking your own scripts

Mark anything that sets cookies with type="text/plain" data-shortbread="statistics" or marketing, as in the install guide. Build tools leave those attributes alone.

Cookie declaration

Put <div id="ShortbreadDeclaration"></div> on your policy page. Shortbread fills it on load.