floors.js Documentation

Configure everything from your dashboard.

Customize your widget

Configure everything easily from your dashboard.

Setup

  • data-key
    Required
    Your site identifier. Scopes all visitors and rooms to your site.
    data-key="flr_..."

  • data-name
    default: page <br>Display name shown in the widget header.<br><code>data-name="My Product"</code></p> </li> <li><p><strong>data-open</strong><br>default: "false"<br>Open the widget panel automatically on page load.<br><code>data-open="true"</code></p> </li> <li><p><strong>data-owner-always</strong><br>default: "false"<br>Always show the owner's avatar in the home room, even when the owner is offline or in another room.<br><code>data-owner-always="true"</code></p> </li> </ul> <h3>Rooms</h3> <ul> <li><p><strong>data-pages</strong><br>default: auto-detect<br>Comma-separated list of pages that show a visible door in the 3D scene. The widget works on every page regardless.<br><code>data-pages="/,/about,/pricing"</code></p> </li> <li><p><strong>data-exclude</strong><br>default: none<br>Comma-separated paths to hide the widget on. Supports wildcards (*).<br><code>data-exclude="/login,/signup,/app/*"</code></p> </li> </ul> <h3>Appearance</h3> <ul> <li><p><strong>data-accent</strong><br>default: "#6366f1"<br>Custom accent color for the widget UI.<br><code>data-accent="#FF6B00"</code></p> </li> <li><p><strong>data-theme</strong><br>default: "dark"<br>Default color theme for the widget.<br><code>data-theme="light"</code></p> </li> <li><p><strong>data-theme-toggle</strong><br>default: "false"<br>Show a sun/moon toggle in the widget header so visitors can switch between light and dark mode.<br><code>data-theme-toggle="true"</code></p> </li> </ul> <h3>Chat</h3> <ul> <li><p><strong>data-pinned-message</strong><br>default: none<br>A message pinned at the top of the chat.<br><code>data-pinned-message="Hey, ask me anything!"</code></p> </li> <li><p><strong>data-room-chat</strong><br>default: "false"<br>Scope chat messages to the current room.<br><code>data-room-chat="true"</code></p> </li> <li><p><strong>data-no-links</strong><br>default: "true"<br>Block messages containing URLs or links in the chat.<br><code>data-no-links="false"</code></p> </li> <li><p><strong>data-no-promo</strong><br>default: "true"<br>Block promotional messages from the chat.<br><code>data-no-promo="false"</code></p> </li> <li><p><strong>data-auto-reply-keyword</strong> </p> <ul> <li><strong>data-auto-reply-message</strong><br>default: none<br>Auto-reply whisper triggered when a visitor types an exact keyword.<br><code>data-auto-reply-keyword="DISCOUNT"</code> <code>data-auto-reply-message="Here's your code: CHAT25"</code></li> </ul> </li> </ul> <h3>Visitors</h3> <ul> <li><p><strong>data-allow-rename</strong><br>default: "false"<br>Allow visitors to change their display name after entering.<br><code>data-allow-rename="true"</code></p> </li> <li><p><strong>data-private</strong><br>default: "false"<br>Private mode — visitors are isolated from each other.<br><code>data-private="true"</code></p> </li> </ul> <h3>Discord notifications</h3> <p>Get pinged on Discord when a visitor sends a message on your site.</p> <h3>Telegram bot</h3> <p>Reply to your visitors directly from Telegram. </p> <ol> <li>Create a bot with <a href="https://t.me/BotFather">@BotFather</a> on Telegram and copy the bot token.</li> <li>Open your Dashboard, go to Settings, paste the bot token and chat ID, then hit Connect.</li> <li>Reply to any forwarded message in Telegram — your answer appears instantly in the widget chat.</li> </ol> <h3>Welcome to floors.js - Live Demo</h3> <p>Enter the building to see and chat with other visitors in real-time.</p> <h3>Are you the owner?</h3> <p>Paste the settings code from your welcome email to verify.</p> <h3>3D scene couldn't load</h3> <p>Your browser may not support WebGL. Chat and rooms still work below.</p> </section> </article> </main> <footer> <p>Original source: <a href="https://floorsjs.com/docs">https://floorsjs.com/docs</a></p> </footer> </body> </html>