Integration Guide

Add floors.js to Webflow

Paste one line in your Webflow project settings. Your beautifully designed site becomes a social space where visitors see each other and chat.

Get lifetime access — $39 See how it works

How it works

Webflow sites are static or server-rendered pages. floors.js works perfectly with this architecture. Each page URL on your Webflow site automatically becomes its own room. Your homepage is one room, your about page is another, each blog post is another.

The widget renders as a fixed-position overlay in the corner of the screen. It doesn't affect your Webflow layout, doesn't shift any elements, and doesn't interfere with your interactions or animations. Visitors see a small floating button. Click it to open the 3D room view, see other visitors as avatars, and chat in real-time.

Installation

There are two ways to add floors.js to your Webflow site. Both take under a minute.

1
Project-wide installation
Recommended
Add floors.js to every page on your site at once. Open your Webflow Dashboard, go to your project, then navigate to:
Project Settings → Custom Code → Footer Code
Paste the following script tag in the Footer Code field and save:
<script src="https://floorsjs.com/embed.js" data-key="flr_..."></script>
Publish your site. floors.js is now live on every page.
2
Single page only
If you only want floors.js on a specific page, open that page in the Webflow Designer and navigate to:
Page Settings → Custom Code → Before </body> tag
Paste the same script tag:
<script src="https://floorsjs.com/embed.js" data-key="flr_..."></script>
Publish. Only that page will have floors.js active.

Replace flr_... with the site key from your floors.js dashboard. That's it. No npm packages, no build steps, no Webflow apps to install.

Works with everything in Webflow

floors.js runs in its own isolated layer. It doesn't touch Webflow's DOM, doesn't modify your styles, and doesn't conflict with any Webflow feature.

CMS collection pages
Each blog post, project page, or CMS item automatically becomes its own room. Visitors browsing the same article see each other.
Interactions and animations
Your IX2 scroll animations, hover effects, and page transitions work exactly as before. floors.js doesn't interfere with Webflow's animation engine.
Webflow forms
Contact forms, newsletter signups, and any other Webflow form elements coexist perfectly with the floors.js widget.
Custom domains
floors.js works on your-domain.com, not just the default webflow.io staging URL. Your rooms are tied to whatever domain visitors see.

Great for agencies and freelancers

If you build Webflow sites for clients, floors.js is a powerful way to differentiate your work. Add it to client sites to give them something no other Webflow agency is offering: a living, social website where visitors can interact in real-time.

It's also perfect for your own agency portfolio. When a potential client visits your site, they can see other visitors browsing your work and chat with you directly. No scheduling calls, no contact forms. Just a natural, immediate conversation.

FAQ

Does it work on the free Webflow plan?
Custom code injection requires a paid Webflow site plan (Basic, CMS, Business, or Enterprise). The free Webflow plan doesn't support custom code in project settings. The floors.js script itself is a one-time $39 purchase with lifetime access.
Does it break my Webflow interactions?
No. floors.js runs in its own isolated DOM layer with all elements prefixed to avoid collisions. Your IX2 animations, scroll-triggered effects, hover states, and page transitions all work exactly as they did before. The widget is a fixed-position overlay that sits on top of your content without affecting layout or z-index stacking.
Does it work with CMS collection pages?
Yes. Each CMS item page gets its own room automatically based on the URL path. If you have a blog with 50 posts, that's 50 rooms. Visitors reading the same blog post will see each other and can chat. No extra configuration needed.
Will it slow down my Webflow site?
The embed script is tiny and loads asynchronously. The 3D rendering engine (Three.js) only loads when a visitor opens the widget. Your page load speed and Lighthouse score are not affected.
Can I customize the widget position or colors?
The widget uses a dark theme by default and appears in the bottom-right corner. Visitors choose their own avatar color and name. Further customization options are on the roadmap.