Session Replay for Framer Sites

To add Framer session replay with AnyReplay, paste one script tag into your site's custom code settings so it loads in the head of every page, then publish. The recorder runs on your published Framer site and follows visitors as they move between pages; one option masks form inputs when you want them hidden.

Why record sessions on your Framer site

Framer sites often lean on motion, hover effects and layouts that change between breakpoints. Framer session recording shows how that lands with real visitors: the animated button someone clicks repeatedly before it responds, the section that never scrolls into view on a small screen, the call to action nobody reaches. How to fix rage clicks walks through turning those moments into fixes.

How to add session replay to Framer

<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 Framer project, open Site settings and find the Custom Code section, usually under General.

2. Paste into the head

   Paste the snippet, with YOUR_PROJECT_KEY replaced by your key, into the field for the end of the <head> tag so it applies to all pages.

3. Publish

   Publish the site. Custom code reaches visitors on the published site, not in the editor canvas.

4. Visit the published site

   Open the published URL and click through a few pages. The setup page in AnyReplay switches to Connected when events arrive.

Custom code settings may require a paid site plan; check Framer's help centre for the current requirements and where the setting lives. The script tag guide explains the snippet in detail.

Which pages are recorded (and which are not)

Every published page that loads the site-wide head code is recorded. Framer moves between pages without a full reload, using the browser's History API, and AnyReplay detects those changes automatically, so a visit that spans several pages stays one session with a route marker for each page. Check a test session for route markers after publishing; if a transition is missing, mark it with anyreplay('track', name). Single-page apps explains what counts as a navigation. The editor and preview inside Framer are not recorded.

How do I keep customer data out of recordings?

By default every value typed into your Framer 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. Text on the page is recorded as shown. The ar-mask class masks an element's text — and a field's value, when you put it on an input or a wrapper — while ar-block removes an element from the recording, but Framer does not expose a class name setting on every element. Where Framer lets you add a class, or an embed or code component that renders with class="ar-block", use that for sensitive content. Where it does not, keep personal data off the pages you record. See masking.

Consent banners on Framer

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 already agreed. If your cookie banner exposes no callback or event for this, check its documentation, or load both through Google Tag Manager and fire the consent call from its consent trigger. See consent.

Allowed domains

If your project lists allowed domains, AnyReplay checks each request's Origin header against them. If people visit both the Framer-provided domain and your custom domain, add both.

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 one, Content Security Policy.

Frequently asked questions