Flawsnap
Free trial

Install Flawsnap on a Webflow site

Webflow runs custom code only on the published site, so you add the snippet in Site settings, publish, and test on the live or staging domain.

Steps

  1. 1

    Allow your Webflow domains

    In Flawsnap, open the project’s Security settings. Under Allowed domains, add your your-site.webflow.io staging address and your custom domain.

  2. 2

    Open Site settings

    In Webflow, open the site’s Site settings and go to the Custom code tab.

  3. 3

    Paste into Head code

    Paste the Flawsnap snippet into Head code and save the changes.

  4. 4

    Publish

    Publish the site to the domains you want. Custom code does not run on the Designer canvas, so nothing changes until you publish.

  5. 5

    Test on the published site

    Open the published address, click the button, and send a test report.

The code for Head code

Site-wide head code is added to every page of the site, which is where the widget should be:

Site settings → Custom code → Head code
<script src="https://backend.flawsnap.com/widget.js" data-key="pk_…" async></script>

Adding custom code needs a paid Webflow site plan. If the Custom code fields are locked, check the plan on that site.

Why you will not see it in the Designer

Webflow keeps custom scripts out of the Designer, so the canvas never shows the button. That is expected. You will only see it on the published webflow.io address or your custom domain.

If you want to test before your clients see it, publish to the webflow.io staging domain only. Your custom domain keeps the previous version until you publish there too.

Use staging for review rounds, keep production clean

A common setup for design reviews: the widget code is in Site settings, so it ships to both domains, but only the webflow.io staging host is on the project's Allowed domains.

The widget checks the domain before it shows anything. On the live domain it stays hidden and logs [flawsnap] widget disabled: in the console, while reviewers on staging get the button. Add the custom domain when you want reports from the live site too.

One page only

To collect feedback on one page, such as a new pricing page, put the snippet in that page's Page settings → Custom code head area instead of the site-wide one. Do not use both: one copy per page is enough, and a second copy is ignored.

Naming reporters and adding context

Visitors can type their name and email into the form (both are optional). If your site has a sign-in from a third-party membership tool, call window.Flawsnap?.identify({ name, email }) from its signed-in callback. To add context, such as which design round a report belongs to, set it before the snippet:

Head code (above the snippet)
<script>
  window.FlawsnapConfig = { metadata: { round: 'Homepage review 2' } };
</script>

Troubleshooting a Webflow install

  • No button after publishing: hard-refresh the published page. Then check the page source for widget.js; if it is missing, the code was saved but the site was not republished.
  • widget disabled in the console: the address you are on is not in Allowed domains. www.example.com and example.com are different entries.
  • The button sits on top of a fixed element: set data-position="left" on the tag, or change the position for everyone in the Flawsnap project settings.
  • Interactions or embeds inside an iframe are not captured in the screenshot: the widget renders the page itself, and iframes from other sites are outside it.

Questions

Can my clients report bugs without a Flawsnap account?
Yes. Anyone on an allowed domain can use the widget. Only your team needs accounts, to work the reports on the board.
Does it work on Webflow staging?
Yes, once the webflow.io address is on the project’s allowed domains. Many teams list only staging during a build and add the custom domain at launch.

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