# 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](/content/integrations/nextjs/index.html)  
[React  
Drop the script in your index.html. Works with React Router, Vite, and CRA. No wrapper component needed.  
Script tag in index.html](/content/integrations/react/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](/content/integrations/vue/index.html)  
[Astro  
Add to your base layout with is:inline. Works with View Transitions, SSR, and Starlight docs.  
Script tag in Layout.astro](/content/integrations/astro/index.html)  
[Nuxt  
Nuxt 3 or Nuxt 2 — add via nuxt.config.ts or useHead composable. Auto-detects route changes.  
nuxt.config.ts or useHead](/content/integrations/nuxt/index.html)  
[SvelteKit  
Add to src/app.html before the closing body tag. Works with SvelteKit routing and transitions.  
Script tag in app.html](/content/integrations/svelte/index.html)  
[Angular  
Add to src/index.html. Works with Angular Router, SSR, and standalone components.  
Script tag in index.html](/content/integrations/angular/index.html)  
[Gatsby  
Add via gatsby-ssr.js onRenderBody. Persists across Gatsby's client-side navigation.  
gatsby-ssr.js](/content/integrations/gatsby/index.html)

## 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](/content/integrations/wordpress/index.html)  
[Shopify  
Add to theme.liquid via the theme editor. See shoppers on product pages. No Shopify app needed.  
theme.liquid footer](/content/integrations/shopify/index.html)  
[Webflow  
Project Settings → Custom Code → Footer. Works with CMS collections and all interactions.  
Project custom code settings](/content/integrations/webflow/index.html)  
[Hugo  
Add to your baseof.html or create a partial. Works with PaperMod, Blowfish, and every Hugo theme.  
baseof.html or partial](/content/integrations/hugo/index.html)  
[Squarespace  
Settings → Advanced → Code Injection → Footer. Works on all Squarespace templates and pages.  
Code Injection footer](/content/integrations/squarespace/index.html)  
[Wix  
Dashboard → Settings → Custom Code → Body end. Works with Wix Editor and Wix Studio sites.  
Custom code settings](/content/integrations/wix/index.html)  
[Framer  
Site Settings → Custom Code → End of body. Works with CMS collections and page transitions.  
Site Settings custom code](/content/integrations/framer/index.html)

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

## Use Cases

[SaaS](/content/use-cases/saas/index.html) [Communities](/content/use-cases/communities/index.html) [Portfolios](/content/use-cases/portfolios/index.html) [E-commerce](/content/use-cases/ecommerce/index.html) [Documentation](/content/use-cases/documentation/index.html) [Landing Pages](/content/use-cases/landing-pages/index.html) [Blogs](/content/use-cases/blogs/index.html) [Agencies](/content/use-cases/agencies/index.html) [Events](/content/use-cases/events/index.html) [Education](/content/use-cases/education/index.html) [Startups](/content/use-cases/startups/index.html) [Marketplaces](/content/use-cases/marketplaces/index.html) [Open Source](/content/use-cases/open-source/index.html) [Newsletters](/content/use-cases/newsletters/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) [All Comparisons](/content/alternatives/index.html)