floorsHow it works
Hugo generates static HTML. Every page your site outputs is a standalone file served from a CDN or static host. When a visitor loads any page, the floors.js script connects to a room matching that URL path. Visitors on /blog/my-post/ see each other in one room. Visitors on /about/ are in another.
The script loads asynchronously and doesn't affect Hugo's blazing fast build. There's no build plugin, no Go module, no template dependency. Your Hugo build stays exactly the same — floors.js is purely a client-side addition that runs after the page has loaded.
Installation
Add the script tag to your base template at layouts/_default/baseof.html, right before the closing </body> tag:
<script src="https://floorsjs.com/embed.js" data-key="flr_..."></script>
</body>
</html>
That's it. Every page Hugo generates will include the script automatically.
Or use a Hugo partial
If you prefer to keep things modular, create a partial file:
Then include it in your base template:
{{ partial "floors.html" . }}
</body>
</html>
Both approaches work identically. The partial method is useful if you want to conditionally load floors.js only in production or on specific pages.
Works with any Hugo theme
floors.js renders as a fixed-position overlay that floats above your site content. It doesn't inject styles into your layout, modify your DOM structure, or conflict with your theme's CSS. Any Hugo theme works out of the box:
Blog and docs
Hugo excels at blogs and documentation sites. With floors.js, each blog post and docs page gets its own room. Readers currently viewing the same article can discuss it live — no comment system needed, no external platform.
For documentation sites built with Hugo, this means developers stuck on the same page can help each other in real-time, or you can jump in and assist them before they file an issue.
Frequently asked questions
hugo server with fast render) and production builds. The script runs entirely client-side, so Hugo's build process and live reload have no effect on it./en/about/ and /fr/about/ are in different rooms, so conversations stay language-appropriate without any extra configuration.{{ if .Params.floors }} block and add floors: true to the front matter of pages where you want it.