Integration Guide

Add floors.js to Framer

Open Site Settings, General, Custom Code. Paste one line in the "End of body" field. No Framer code component, no overrides — just paste and publish.

How it works

floors.js loads on every page of your Framer site. It detects each page URL and creates a room for it automatically. Visitors on the same page see each other as 3D avatars and can chat in real-time.

Framer uses standard browser navigation, and floors.js detects each URL change. Every page in your Framer project becomes a room — including CMS collection pages like blog posts and portfolio items.

Installation

Framer lets you add custom code to every page through Site Settings. Here's how:

  • Open your Framer project
  • Go to Site Settings → General → Custom Code
  • Paste the script in the "End of tag" field
  • Click Publish

Paste in "End of body tag":

<script src="https://floorsjs.com/embed.js" data-key="flr_..."></script>

Replace flr_... with your site key from the floors.js dashboard. The script loads asynchronously and won't affect your site's performance.

Works with Framer pages

Every page in your Framer project becomes a room in floors.js. This includes:

  • Static pages — homepage, about, contact — each is its own room
  • CMS collection pages — each blog post, portfolio item, or case study gets its own room
  • Dynamic pages — pages generated from CMS collections create rooms automatically

Visitors on the same page see each other. Navigate to a different page, and you're in a different room.

Configuration

Add optional attributes to customize the experience:

  • data-key (required) — your site key
  • data-server (optional) — custom WebSocket server if self-hosting
  • data-name (optional) — pre-set a display name for the visitor

FAQ

Do I need a Framer code component?

No. The Custom Code field in Site Settings is all you need. No code component, no overrides, no React knowledge required.

Does it work with Framer's page transitions?

Yes. floors.js detects URL changes regardless of how the transition happens. Fade, slide, or instant — it picks up the new page and switches rooms.

Will it affect my site's performance?

No. The script loads asynchronously after your page content. It's lightweight and won't impact your Framer site's loading speed.

Works with custom domains?

Yes. floors.js uses the data-key attribute to identify your site, not the domain name. It works on Framer's default domain and any custom domain you've configured.

Explore more

Alternatives & Comparisons

Welcome to floors.js - Live Demo

Enter the building to see and chat with other visitors in real-time.