Session Replay for Webflow Sites

To add Webflow session replay with AnyReplay, paste one script tag into your site's head code in the site settings and publish. The recorder then runs on every page of your published site and sends each visit to your AnyReplay project; one option masks form inputs when you want them hidden.

Why record sessions on your Webflow site

Webflow makes it easy to ship a polished marketing site, and hard to see how it behaves on the devices your visitors actually use. Webflow session recording shows the interaction that did not trigger on a phone, the tab component nobody found, or the heading that looks like a link and gets clicked. Heatmaps vs session replay covers when a recording answers the question better than an aggregate, and how to find dead clicks shows what to look for.

How to add session replay to Webflow

<script>
(function (w, d) {
  w.anyreplay = w.anyreplay || function () {
    (w.anyreplay.q = w.anyreplay.q || []).push(arguments);
  };
  var s = d.createElement('script');
  s.async = 1;
  s.src = 'https://cdn.anyreplay.com/v1/ar.min.js?k=YOUR_PROJECT_KEY';
  d.head.appendChild(s);
})(window, document);

anyreplay('init', {
  projectKey: 'YOUR_PROJECT_KEY',
  ingestUrl: 'https://in.anyreplay.com',
  // Stop recording after this many sessions in a calendar month.
  // maxSessionsPerMonth: 10000,
  // Form fields are masked: what visitors type replays as asterisks.
  // Passwords, one-time codes and card fields are masked either way.
  // Uncomment the first line to record what visitors type, or the
  // second to hide rich-text editors too.
  // maskAllInputs: false,
  // maskAllTyping: true
});
</script>

1. Open the site settings

   In your Webflow dashboard, open the site's settings and find the Custom code section.

2. Paste into the head code

   Paste the snippet, with YOUR_PROJECT_KEY replaced by your key, into the Head code field and save.

3. Publish

   Publish the site to your staging domain, your custom domain or both. Custom code only reaches visitors once it is published.

4. Visit the published site

   Open the published site and browse a few pages. The setup page in AnyReplay switches to Connected once events arrive.

Custom code runs on the published site, not inside the Designer, so you will not see sessions from editing. Adding site-wide custom code may require a paid site plan; check Webflow's help centre for the current requirements and menu names. The script tag guide explains the snippet in detail.

Which pages are recorded (and which are not)

Because the snippet sits in the site-wide head code, every published page is recorded, including CMS collection pages. Anything hosted outside Webflow, such as a separate app or help centre on a subdomain, needs the snippet added there too. If you use Webflow Ecommerce, open a test session to confirm which checkout pages appear before relying on them.

How do I keep customer data out of recordings?

By default every value typed into your Webflow forms replays as asterisks of the same length. To see what visitors typed, add maskAllInputs: false to the init options. Passwords and one-time codes, payment card fields and anything shaped like a card number are masked whatever you set. Email and telephone fields are ordinary fields, recorded only once you opt out. To mask text shown on the page, select the element in the Designer and add a class named ar-mask; its text becomes asterisks in the recording. Add a class named ar-block to leave an element out entirely, replaced by an empty box of the same size. Webflow lets an element carry several classes, so these can sit alongside your styling classes. See masking.

Consent banners on Webflow

Add requireConsent: true to the init options and nothing is recorded or sent until anyreplay('consent', true) runs. AnyReplay does not store the choice, so call it on every page load for visitors who have agreed. Whether your banner can make that call depends on the tool you use; check its documentation for a callback or event, or route it through Google Tag Manager's consent trigger. See consent.

Allowed domains

If your project lists allowed domains, AnyReplay checks each request's Origin header against them. If you publish to both the webflow.io staging domain and a custom domain, add both, or sessions from the one you left out are refused.

How do I check it is working?

• The project's setup page switches to Connected after the first accepted event.
• In the browser's network panel on the published site, requests to in.anyreplay.com should be answered with 202.
• Add debug: true to the init options to log in the console why the recorder is not recording.
• Still nothing? See no sessions and, if you set a policy, Content Security Policy.

Frequently asked questions