# Integration Guide

## Add floors.js to _Gatsby_

Add one line to `gatsby-ssr.js`. floors.js detects Gatsby's client-side routing automatically — no Gatsby plugin, no GraphQL, no npm package.

## How it works

floors.js runs **completely outside React and Gatsby**. It patches the browser's history APIs to detect `@reach/router` navigation — the router Gatsby uses under the hood.

When a visitor clicks a Gatsby `<Link>` from `/about` to `/blog/hello-world`, `@reach/router` calls `pushState`, and floors.js picks that up automatically. No Gatsby plugin, no GraphQL, no build-time integration.

## Installation

The recommended approach is to use `gatsby-ssr.js` to inject the script into every page at build time.

```javascript
// gatsby-ssr.js
import React from "react"

export const onRenderBody = ({ setPostBodyComponents }) => {
    setPostBodyComponents([
        <script
            key="floors"
            src="https://floorsjs.com/embed.js"
            data-key="flr_..."
        />
    ])
}
```

Replace `flr_...` with your site key. The script loads asynchronously and won't affect Gatsby's build performance or hydration.

## Works with Gatsby routing

Every page in your Gatsby site becomes a room in floors.js — whether it's a file-based page, programmatically generated, or a client-only route.

- **File-based pages** — pages in `src/pages/` each become a room automatically
- **Programmatic pages** — pages created via `createPages` in `gatsby-node.js` work the same way
- **Client-only routes** — dynamic routes using `matchPath` are detected when the URL changes
- **MDX pages** — each MDX page gets its own room for readers to chat

## Configuration

All settings are managed from your [floors.js dashboard](/content/dashboard/index.html). Changes apply instantly, no code update needed. You can also use `data-` attributes as an optional fallback.

- **data-key** (required) — your site key, used to group visitors across your domain
- **data-server** (optional) — custom WebSocket server URL if you're self-hosting

See the [full list of data-attributes](/#docs) in the docs.

## FAQ

Do I need a Gatsby plugin?

No. floors.js is a plain script tag. It doesn't hook into Gatsby's build pipeline, GraphQL layer, or plugin system. Just add the script and it works.

Does it work with Gatsby Cloud?

Yes. floors.js has zero build-time impact. It loads and runs entirely in the browser after your site is deployed.

What about static builds?

The script runs client-side only. Gatsby's static HTML generation is unaffected. Once the page loads in the browser, floors.js initializes and connects visitors to the current room.

Works with MDX pages?

Yes. Each MDX page gets its own URL, so each one becomes a separate room. Readers on the same page see each other and can chat.

Can I load it conditionally?

Yes. Use `gatsby-browser.js` and the `onClientEntry` API to inject the script only in certain conditions — for example, only in production.

### Explore more

- [Add to React Integration guide for React SPAs.](/content/integrations/react/index.html) 
- [Add to Next.js Integration guide for Next.js apps.](/content/integrations/nextjs/index.html)
- [floors.js for Blogs Turn your blog into a social reading space.](/content/use-cases/blogs/index.html) 
- [floors.js for Documentation Help developers stuck on your docs.](/content/use-cases/documentation/index.html)

## Alternatives & Comparisons

- [Intercom Alternative](/content/alternatives/intercom/index.html) 
- [Crisp Alternative](/content/alternatives/crisp/index.html) 
- [Tidio Alternative](/content/alternatives/tidio/index.html) 
- [tawk.to Alternative](/content/alternatives/tawk-to/index.html) 
- [vs Gather](/content/vs/gather/index.html) 
- [vs SpatialChat](/content/vs/spatial-chat/index.html)

### Welcome to floors.js - Live Demo

Enter the building to see and chat with other visitors in real-time.

Powered by floors.js