Works with everything

One script tag. No SDK, no npm package, no build step. Paste it into your site and you're live. Here's how for each platform.

JavaScript Frameworks

Next.js
App Router or Pages Router — add one line to your layout. SPA route changes detected automatically.
Script tag in layout.tsx or _document.tsx
React
Drop the script in your index.html. Works with React Router, Vite, and CRA. No wrapper component needed.
Script tag in index.html
Vue & Nuxt
Vue 3, Nuxt 3, Vue Router — all supported. Add to index.html or nuxt.config. No plugin required.
Script tag or nuxt.config.ts
Astro
Add to your base layout with is:inline. Works with View Transitions, SSR, and Starlight docs.
Script tag in Layout.astro
Nuxt
Nuxt 3 or Nuxt 2 — add via nuxt.config.ts or useHead composable. Auto-detects route changes.
nuxt.config.ts or useHead
SvelteKit
Add to src/app.html before the closing body tag. Works with SvelteKit routing and transitions.
Script tag in app.html
Angular
Add to src/index.html. Works with Angular Router, SSR, and standalone components.
Script tag in index.html
Gatsby
Add via gatsby-ssr.js onRenderBody. Persists across Gatsby's client-side navigation.
gatsby-ssr.js

CMS & Website Builders

WordPress
Paste in your theme footer, functions.php, or use a plugin. Works with any theme and WooCommerce.
footer.php or functions.php
Shopify
Add to theme.liquid via the theme editor. See shoppers on product pages. No Shopify app needed.
theme.liquid footer
Webflow
Project Settings → Custom Code → Footer. Works with CMS collections and all interactions.
Project custom code settings
Hugo
Add to your baseof.html or create a partial. Works with PaperMod, Blowfish, and every Hugo theme.
baseof.html or partial
Squarespace
Settings → Advanced → Code Injection → Footer. Works on all Squarespace templates and pages.
Code Injection footer
Wix
Dashboard → Settings → Custom Code → Body end. Works with Wix Editor and Wix Studio sites.
Custom code settings
Framer
Site Settings → Custom Code → End of body. Works with CMS collections and page transitions.
Site Settings custom code

How integration works

floors.js is a single <script> tag. There's no npm package to install, no SDK to configure, no build step to modify. You paste one line of HTML before your closing </body> tag and every page on your site becomes a room where visitors can see each other and chat.

The script loads asynchronously — it won't block your page render or affect Core Web Vitals. Three.js (the 3D engine for the avatars) only loads when a visitor actually opens the widget. Your site stays fast.

For single-page applications (React, Next.js, Vue, Nuxt, SvelteKit), floors.js automatically detects client-side navigation by patching pushState and replaceState. When visitors navigate between routes, the widget updates the room without reconnecting. No extra configuration needed.

What you need

A site key (data-key) that you get after purchase. That's it. The key identifies your site on the floors.js server. Each key creates a separate building with its own rooms, visitors, and chat.

Optionally, you can customize the widget with data- attributes: data-name to set your display name, data-theme for light or dark mode, and data-accent to match your brand color.

Frequently asked questions

Does it work with my platform?
If your platform lets you add custom HTML or a script tag, yes. That covers virtually every website builder, CMS, and framework. The guides above show exact steps for each platform.
Will it slow down my site?
No. The script loads asynchronously after your page content. Three.js only initializes when someone opens the widget. Your page load time and Core Web Vitals are unaffected.
Does it work with single-page apps?
Yes. floors.js detects client-side navigation (pushState, replaceState, popstate) and updates the room automatically. Works out of the box with React Router, Next.js App Router, Vue Router, and all major SPA frameworks.
Can I use it on multiple sites?
Each site key works for one domain. If you run multiple sites, you need a key per site. Each key is a separate purchase ($14/month or $99 lifetime).
How do I remove it?
Delete the script tag. That's it. No residual code, no cleanup, no leftover files. The widget is entirely self-contained.

Don't see your platform? floors.js is just a script tag — it works on any website that supports custom HTML.

Get started — from $14/mo

Use Cases

SaaS Communities Portfolios E-commerce Documentation Landing Pages Blogs Agencies Events Education Startups Marketplaces Open Source Newsletters

Alternatives & Comparisons

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