Flawsnap
Free trial

Install Flawsnap on a Framer site

Put the snippet in the head of your Framer site, publish, and reviewers can mark up any page of the live site.

Steps

  1. 1

    Allow your domains

    In Flawsnap, add your Framer address and any custom domain under the project’s Security → Allowed domains.

  2. 2

    Open the custom code settings

    In Framer, open Site settings → General and scroll to Custom code.

  3. 3

    Paste into the head

    Paste the Flawsnap snippet into the field for the end of the <head> tag.

  4. 4

    Publish

    Publish the site. Custom code runs on the published site, not on the Framer canvas.

  5. 5

    Send a test report

    Open the published site, click Report a bug, mark something and send it.

The snippet for Framer

Framer offers a few places for custom code. Use the head. The widget then starts as the page starts, which is what lets it capture console errors and requests from page load.

Custom code is part of your site plan in Framer. If the field is not available, check the plan for that site.

Site settings → General → Custom code (end of <head>)
<script src="https://backend.flawsnap.com/widget.js" data-key="pk_…" async></script>

Moving between pages

If your Framer site moves between pages without a full reload, the widget stays loaded the whole time. Flawsnap notices each path change by itself, so you do not need to add anything per page. Reports still carry the exact URL the reporter was on.

Recordings (on Pro) continue across those page changes. A full reload ends a recording, so a reporter who refreshes mid-recording should start a new one.

Domains to allow for a Framer project

  • Your free Framer address, for reviewing a build before it has a domain.
  • Your custom domain, plus www. if it serves the site.
  • Wildcards cover subdomains of a domain you own, such as *.example.com. They are not accepted over a shared platform domain.

Leave the custom domain off the list while you only want feedback on the Framer address. The widget will not show anywhere that is not listed.

Make it look like part of your design

Framer sites are usually designed down to the pixel, and a green button in the corner may not fit. Change the colour, label and side with attributes, or let a teammate change them later in the Flawsnap project settings, which override the attributes.

Custom code (end of <head>)
<script src="https://backend.flawsnap.com/widget.js" data-key="pk_…" data-color="#111111" data-label="Feedback" async></script>

Opening the form from your own button

To keep the corner empty, turn off Show on website (under Report a bug button) in the project settings, then link to the form from a button in your design. Add a Framer code component or an embed that calls window.Flawsnap?.open() on click. The script must still be in the head.

When it does not appear

  • Looking at the canvas or preview: check the published site instead.
  • Console shows [flawsnap] widget disabled:: add the exact host from the address bar to Allowed domains.
  • You published to one domain but test on another: publish again, or check you are on the address that has the new version.

Questions

Can reviewers record a screen recording on a Framer site?
On the Pro plan, with Allow screen recording on in the project's security settings, reporters can attach a recording of up to five minutes. It is a replay of the page, so there is no screen-share prompt.
Does Flawsnap work with Framer animations?
The screenshot is drawn from the page as it is at that moment, so it shows the current state of an animation. For motion problems, a recording on Pro shows what happened over time.

Try it on your own site

7-day free trial, then $9 a month for Starter or $19 for Pro, per organization, with unlimited team members.

Start free trial Try the live demo

Related

Updated