floorsHow 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 <body> tag" field
- Click Publish
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
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.