# 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.

## 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:

```html
<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:

```html
<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. floors.js starts at $14/month, or $99 for 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.