Start for free
Guides/Share a preview

Guides

Share a preview

Let people who are not on your machine comment on a deployed preview, while production stays clean.

On your dev server, comments are written on your machine. For a client or a teammate, deploy a preview and let them comment there. The preview build is opted in with the project’s build secret; a build without it carries nothing of ours. Each project’s Setup tab has these steps with its own values filled in.

Shared mode in your config

The same config as in the Quickstart, with shared mode on wherever FEEDBACK_SECRET is set.

In vite.config.ts, feedback() stays first, before the React plugin:

import { feedback } from '@ontrackd/feedback/vite';

export default defineConfig({
  plugins: [
    feedback({ shared: Boolean(process.env.FEEDBACK_SECRET) }), // first
    react(),
  ],
});

In next.config.mjs, the options go after your config:

import { withFeedback } from '@ontrackd/feedback/next';

export default withFeedback(
  { /* your config */ },
  { shared: Boolean(process.env.FEEDBACK_SECRET) },
);

<Feedback /> stays once in app/layout.tsx, as in the Quickstart:

import { Feedback } from '@ontrackd/feedback/next/overlay';

<body>
  {children}
  <Feedback /> {/* renders nothing in production */}
</body>

In astro.config.mjs, on the integration:

import feedback from '@ontrackd/feedback/astro';

export default defineConfig({
  integrations: [feedback({ shared: Boolean(process.env.FEEDBACK_SECRET) })],
});

In nuxt.config.ts, through Nuxt’s Vite config:

import { feedback } from '@ontrackd/feedback/vite';

export default defineNuxtConfig({
  vite: { plugins: [feedback({ shared: Boolean(process.env.FEEDBACK_SECRET) })] },
});

In vite.config.ts, feedback() stays before sveltekit():

import { feedback } from '@ontrackd/feedback/vite';

export default defineConfig({
  plugins: [
    feedback({ shared: Boolean(process.env.FEEDBACK_SECRET) }), // first
    sveltekit(),
  ],
});

With the script tag there is no build and no shared mode: the live site is what reviewers comment on. The Quickstart covers it.

What a shared preview gives you

Anyone you let in can comment on the preview, and each comment still knows the file and line behind the element it points at. Without the project’s secret, nobody can read those locations from the preview.

Why production stays clean

Shared mode is on only where FEEDBACK_SECRET is set, and you set it for preview builds only. A production build, built without it, carries nothing of ours. A preview build needs the secret and no other variable.

Which address to allow

Allow one that stays the same between deploys, like your preview branch’s URL. A per-deployment URL changes on every push, and comments from the new one are refused until it is allowed.

Esc

Type to search every page.