Review a web appContents

Review a web app (logins, dashboards, checkout)

A review link normally shows reviewers a copy of your site. That works for marketing pages, but it stops at the login screen. Add one snippet to your app and the review link loads your real app instead: logins, dashboards and checkout work, and pins land where you click.

What it does

  • The review dock loads your real app, so reviewers can sign in and reach the pages behind it.
  • Every pin, screenshot and diagnostic is captured the same way as on any other dock.
  • If your app cannot be shown inside the dock, Open on live site opens the real page in a new tab with the Layerdock toolbar, signed in to the same review.
  • Reviewers still open the same review link. Nothing to install on their side.

Add the snippet

Each dock has its own snippet. Find it in two places: New dock → Web app (step 2 shows it), or open any review and choose the Layerdock menu → Site snippet. It looks like this:

<script src="https://www.layerdock.io/embed.js" data-layerdock-key="ld_..." async></script>

Two ways to add it:

  • Copy AI prompt. Paste it into Claude Code, Cursor or any AI coding tool working on your app. It tells the tool where the tag goes, which security headers to change, and to change nothing else.
  • Copy the tag and add it yourself, once, in the shared layout so it is on every page you want reviewed.

Where it goes

  • Next.js App Router: the root app/layout.tsx, using next/script with strategy="afterInteractive", the same src, and the data-layerdock-key attribute exactly as copied.
  • Next.js Pages Router: pages/_document.tsx, before </body>.
  • Vite or plain HTML: index.html (or your shared template), before </body>.
  • WordPress: the theme footer (footer.php), before wp_footer().
  • Webflow, Shopify or Framer:the site-wide custom code setting for “before </body>”.

Add it once only. Do not also load it through a tag manager.

Check it worked

  1. Deploy the change, then open your review link.
  2. Open the Layerdock menu. Site snippet shows Installed.
  3. Reopen the review link. The dock now loads your real app: the address shown in the dock is your own site, not a Layerdock copy.

If it still shows Layerdock's copy, see troubleshooting below.

Open on live site

Use it when your app cannot be shown inside the dock: it refuses to be framed, or signing in does not stick inside the review (common in Safari, which blocks the login cookie there).

  1. In the review, open the Layerdock menu and choose Open on live site. It is also on the card shown when a site blocks framing.
  2. Your real page opens in a new tab with the Layerdock toolbar at the bottom. Switch to Comment and click anything to pin it. Pins go to the same review.
  3. If the site asks you to sign in, sign in, then go back to the dock and press Open on live site again. The second time you land signed in to both.

The link it opens works once and only for a short time, so it never carries anything a visitor could reuse. Back to dock on the toolbar returns you to the review; Exit removes the toolbar.

Troubleshooting

What you seeFix
The dock says your site refuses to be shown in a frameHave the site send Content-Security-Policy: frame-ancestors 'self' https://www.layerdock.io, and remove X-Frame-Options: DENY or SAMEORIGIN. Or use Open on live site.
You are logged out inside the dockSet your login cookie to SameSite=None; Secure. In Safari this is not enough, because Safari blocks the cookie inside the review: use Open on live site.
Site snippet says Wrong keyThe tag on your site belongs to another dock, or the key was rotated. Copy this dock's snippet from Site snippet and replace the old tag.
Site snippet never shows InstalledCheck the tag is on the page the review link opens, and that the change is deployed. If your site sends a Content-Security-Policy, add https://www.layerdock.io to script-src (loads the snippet) and connect-src (sends pins).

The full set of policy lines, if your site sends a Content-Security-Policy:

script-src  ... https://www.layerdock.io
connect-src ... https://www.layerdock.io
frame-ancestors 'self' https://www.layerdock.io

Change only those directives and keep the rest of your policy as it is.

What your visitors get

Nothing. For an ordinary visitor the snippet does nothing after the script file loads: it adds nothing to the page, stores nothing in their browser and sends no requests. It only wakes up inside a Layerdock review, or for a reviewer who arrived through Open on live site. The key in the tag is public by design: on its own it cannot read or write any feedback.

Collecting feedback on a marketing site instead? You do not need the snippet: see Collect client feedback.