Integration Guide

Add floors.js to SvelteKit

Add one script tag to your app.html. floors.js detects SvelteKit's client-side navigation automatically — no Svelte action, no store, no npm package.

Get started — from $14/mo See how it works

How it works

floors.js runs completely outside Svelte's component model. It loads as a standalone script that patches the browser's history APIs — pushState, replaceState, and the popstate event — to detect SvelteKit's client-side routing.

When a visitor navigates from /about to /blog/my-post, SvelteKit uses pushState under the hood, and floors.js picks that up automatically. No Svelte stores, no actions, no lifecycle hooks needed. It doesn't touch your component tree at all.

Because it operates at the browser level, it works with every SvelteKit routing pattern — file-based routes, dynamic params, route groups, and layouts.

Installation

Add the floors.js script tag to your src/app.html file, right before the closing </body> tag.

src/app.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    %sveltekit.head%
</head>
<body>
    %sveltekit.body%
    <!-- floors.js — add before </body> -->
    <script src="https://floorsjs.com/embed.js" data-key="flr_..."></script>
</body>
</html>

Replace flr_... with your site key from the floors.js dashboard. The script loads asynchronously and won't block SvelteKit's hydration.

Works with SvelteKit routing

SvelteKit's file-based routing maps directly to floors.js rooms. Every route in your src/routes/ directory becomes a room.

  • Static routes — routes/about/+page.svelte → the /about room
  • Dynamic params — routes/blog/[slug]/+page.svelte → each blog post is its own room
  • Route groups — routes/(app)/dashboard/+page.svelte → the /dashboard room
  • Nested layouts — layouts don't affect room assignment; only the final URL matters

No configuration needed. A visitor on /pricing and a visitor on /docs are in different rooms. They see each other when they're on the same route.

Configuration

All settings are managed from your floors.js dashboard. Changes apply instantly, no code update needed. You can also use data- attributes as an optional fallback.

<script src="https://floorsjs.com/embed.js" data-key="flr_..."></script>
  • 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 in the docs.

FAQ

Do I need a Svelte component?
No. floors.js is a standalone script that runs entirely outside Svelte's component tree. There's no component, no store, no action. Just a script tag in your app.html.

Does it work with Svelte 5?
Yes. floors.js is completely framework-agnostic — it doesn't import Svelte or interact with runes, signals, or reactivity. It works with Svelte 3, 4, and 5.

What about prerendered pages?
Works fine. Prerendered pages include the script tag in their HTML output. The script runs client-side when the page loads in the browser, regardless of how the HTML was generated.

Which SvelteKit adapters work?
All of them — adapter-node, adapter-auto, adapter-static, adapter-vercel, adapter-netlify. floors.js runs in the browser, so the server adapter doesn't matter.

Can I load it conditionally?
Yes. You can dynamically inject the script tag from an onMount callback if you want to load floors.js only for certain users or environments.

Explore more

Add to Astro
Add to React
floors.js for SaaS
floors.js for Portfolios

Alternatives & Comparisons

Intercom Alternative
Crisp Alternative
Tidio Alternative
tawk.to Alternative
vs Gather
vs SpatialChat

Welcome to floors.js - Live Demo

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

Enter the building

★ Are you the owner?

Paste the settings code from your welcome email to verify.