floorsHow it works
For static Astro sites, each page load connects to the matching room. Visitors on /blog/my-post are in the "blog/my-post" room, and visitors on /about are in the "about" room. Everyone on the same page sees each other as 3D avatars and can chat in real-time.
With View Transitions enabled, floors.js detects the client-side navigation and switches rooms automatically — no full page reload needed. Your visitors stay connected while they browse.
Installation
Add the script tag to your base layout. If you're using a shared layout like src/layouts/Layout.astro, every page that uses it will have floors.js enabled automatically.
// your frontmatter
---
<html lang="en">
<head>
<slot name="head" />
</head>
<body>
<slot />
<script src="https://floorsjs.com/embed.js" data-key="flr_..." is:inline></script>
</body>
</html>
The is:inline attribute is important. It tells Astro to leave the script tag as-is instead of trying to bundle it. Since floors.js is loaded from an external URL, bundling would break it.
View Transitions
Astro's View Transitions turn your multi-page site into a smooth, SPA-like experience. floors.js is built to handle this. It patches pushState and replaceState under the hood, so when Astro navigates between pages client-side, floors.js picks up the route change and switches rooms.
No extra configuration needed. Just add floors.js to your layout and enable View Transitions as normal — everything works together.
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
<head>
<ViewTransitions />
<slot name="head" />
</head>
<body>
<slot />
<script src="https://floorsjs.com/embed.js" data-key="flr_..." is:inline></script>
</body>
</html>
Content Collections
Astro's content collections let you manage blog posts, docs, and other structured content from Markdown or MDX files. Each page generated from a collection entry gets its own floors.js room automatically.
That means visitors reading the same blog post can chat about it. Someone on /blog/getting-started sees everyone else reading that article — and can ask questions or share thoughts in real-time.
No per-page configuration. The room is derived from the URL path, so every content collection page works out of the box as long as your layout includes the floors.js script tag.
FAQ
is:inline, Astro's build process tries to bundle the script, which won't work for external URLs like https://floorsjs.com/embed.js. The is:inline attribute tells Astro to leave the script tag untouched in the final HTML output.