# Integration Guide

## Add floors.js to _Astro_

Add one script tag to your Astro layout. Each page becomes a room. Works with static output, SSR, and View Transitions.

[Get started — from $14/mo](/#pricing) [See how it works](/#how)

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

```astro
// your frontmatter

<htmllang="en">
<head>
<slotname="head"/>
</head>
<body>
<slot />
<scriptsrc="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.

```astro
import { ViewTransitions } from 'astro:transitions';

<htmllang="en">
<head>
<ViewTransitions />
<slotname="head"/>
</head>
<body>
<slot />
<scriptsrc="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 is:inline required?

Yes, for external scripts. Without `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.

Does it work with SSR mode?

Yes. floors.js runs entirely client-side, so it works the same regardless of whether your Astro site uses static output, SSR, or hybrid rendering. The script loads in the browser after the page is delivered.

Does it work with Astro Starlight?

Yes. Starlight is built on Astro, so you can add floors.js through a custom layout override. Create a custom head component or override the default layout to include the script tag — visitors browsing your docs will see each other on every page.