Embed a self-storage booking widget on your website

Your booking widget is ready to place on your website once the setup steps are complete. For most modern site builders, embedding is a short copy-and-paste task; custom websites may need help from whoever maintains the site.

Embed snippet

<script
  src="https://embed.storageflo.io/v1/widget.js"
  data-tenant="acme-storage"
  data-theme="light"
  defer
></script>
<div id="storageflo-widget"></div>

Preview

Find a unit

Move-in date

Unit size

Every StorageFlo workspace has a unique snippet tied to your tenant. Go to Workspace → Websites and click Copy snippet. The snippet is two pieces of code: a <script> tag that loads the widget library, and a placeholder <div> that tells the widget where to render on your page.

Copy both parts. You need them together for the widget to appear. If you only paste the <script> tag, the widget loads but has nowhere to mount and will not be visible.

Paste it on your site

How you paste the snippet depends on which platform your site runs on. Pick the one that matches your setup.

WordPress

If you have the StorageFlo.io WordPress plugin installed, paste the shortcode anywhere in your page content:

[storageflo-widget]

The plugin handles loading the script automatically, so you only need the shortcode itself.

If the plugin is not yet available for your site, use the script-tag method instead. In your WordPress editor, add a Custom HTML block at the spot where you want the widget to appear. Paste the full snippet (both the <script> tag and the <div>) inside that block. Save the page and preview it to confirm the widget loads.

Squarespace

In the Squarespace editor, add a Code Block to your page at the position where you want the widget. Paste the full snippet into the code block and click Apply. Squarespace renders the widget in that block on your published page.

Wix

In the Wix editor, click Add in the left panel and choose Embed → Embed a Widget (or HTML iFrame depending on your Wix version). Paste the full snippet into the HTML field and click Update. Drag the embed element to the correct position on your page and resize it to fit.

Plain HTML site

Open the HTML file for the page where you want the widget to appear. Paste the full snippet anywhere inside the <body> tag, at the exact spot where you want the widget rendered. Save the file and reload the page in your browser to confirm it works.

Customize colors and fonts

The widget picks up your brand colors and fonts automatically if you set them in Workspace → Websites → Theme. You can also apply a dark theme by adding a data-theme="dark" attribute to the <script> tag in your snippet:

<script src="..." data-theme="dark"></script>

For deeper customization, the widget exposes a set of CSS custom properties you can override in your site's stylesheet:

--storageflo-accent controls the primary button and highlight color.
--storageflo-radius controls the border-radius on cards and buttons.

Set these properties on any ancestor element in your page (or on :root to apply them globally) and the widget picks them up automatically. There is no need to touch the snippet code itself.

Done

The widget is live. Renters visiting your page can now browse available units and complete a booking without leaving your site.

Embed the booking widget on your website

Get your widget code