Add floors.js to Next.js

How it works with Next.js

floors.js detects SPA navigation automatically. It patches pushState and replaceState and listens to popstate events. When a user navigates to /pricing, they move to the "pricing" room automatically.

No wrapper components. No hooks. No React integration needed. You add one script tag to your layout and everything works — App Router, Pages Router, doesn't matter.

Installation

There are two approaches. Both work the same way. Pick whichever fits your project.

Option A: Script tag in layout Recommended

Add the script tag to your root layout file. This loads floors.js on every page automatically.

App Router — app/layout.tsx

export default function RootLayout({ children }) { return ( <html lang="en"> <body> {children} <script src="https://floorsjs.com/embed.js" data-key="flr_..." /> </body> </html> ); }

Pages Router — pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( <Html> <Head /> <body> <Main /> <NextScript /> <script src="https://floorsjs.com/embed.js" data-key="flr_..." /> </body> </Html> ); }

Option B: Using next/script

If you prefer the Next.js Script component, use strategy="afterInteractive" to load floors.js after the page is hydrated.

App Router — app/layout.tsx

import Script from 'next/script'; export default function RootLayout({ children }) { return ( <html lang="en"> <body> {children} <Script src="https://floorsjs.com/embed.js" data-key="flr_..." strategy="afterInteractive" /> </body> </html> ); }

What happens automatically

Once the script is loaded, everything is handled for you:

Each route becomes a room — /about becomes the "about" room, /blog/hello becomes the "blog/hello" room
Route changes trigger room switches — no manual wiring needed
Visitors see each other as 3D avatars — isometric Habbo-style characters that move around
Chat works across all pages — speech bubbles appear above avatars in real-time
Widget renders in a fixed-position panel — it doesn't interfere with your layout or break your CSS

Configuration

floors.js reads optional attributes from the script tag:

data-key (required) — your site key, e.g. flr_abc123
data-server — custom WebSocket server URL, for self-hosted deployments
data-name — set a default display name for the current visitor

Example with all options

FAQ

Does it work with SSR?

Yes. The script loads and executes client-side only. It doesn't run during server-side rendering, so there are no hydration mismatches or SSR errors. The widget mounts after the page is interactive.

Does it affect bundle size?

No. floors.js is an external script loaded from a CDN, not an npm package. It never enters your build pipeline. Three.js (the 3D renderer) is loaded asynchronously from a separate CDN. Your Next.js bundle stays exactly the same size.

Does it work with middleware or rewrites?

Yes. floors.js uses the browser URL to determine the current room. Whatever URL the user sees in their address bar becomes the room name. Middleware redirects, rewrites, and basePath all work as expected because the script reads the final resolved URL.