For self-storage operators

Install the storage size calculator

By the Every Last Box teamHow we measure How we make money

Paste one short piece of code where you want the calculator, usually your size guide or units page. It takes about five minutes and needs no account. The quickest way to get the code with your sizes filled in is the setup form.

1. Your code

This is the whole thing. Change the unit sizes and the link to your own:

<div data-elb-storage
     data-units="5x5, 5x10, 10x10, 10x15, 10x20, 10x30"
     data-link="https://yoursite.com/rent?size={size}">
  <a href="https://everylastbox.com/storage-size-calculator">Storage size calculator by Every Last Box</a>
</div>
<script src="https://everylastbox.com/embed.js" async></script>

Keep the link line inside the box: it shows as a small credit under the calculator, and it's what keeps the calculator free.

2. Where to paste it

WordPress: Edit the page, add a Custom HTML block where the calculator should go, and paste. On WordPress.com, code with scripts needs a plan that allows custom code; if the block removes the <script> line, use the frame-only code instead.
Wix: Add → Embed Code → Embed HTML, choose Code, and paste. Wix puts embeds in a box of their own, so drag the box to the full width of the section and about 720 px tall.
Squarespace: Add a Code block and paste. If your plan doesn't run scripts in code blocks, the preview stays empty: use the frame-only code.
Webflow: Drag an Embed element onto the page and paste. The calculator shows on the published site, not in the designer.
Storage website platforms: Most website builders made for storage facilities have a custom HTML or embed block on content pages. If yours doesn't, send this page to your provider's support and ask them to add the code to your size guide.
Plain HTML: Paste it into the page's body where the calculator should appear. One page can hold more than one calculator.

3. Settings

Each setting is an attribute on the box. Only data-units matters; leave out anything you don't need.

Setting	What it does	Example
`data-units`	Your unit sizes, width × depth, separated by commas. Add `@` and a ceiling for any unit, and `/` and a door size if you know it (width × height).	`5x10, 10x10@9, 10x20@10/9x8`
`data-dims`	`m` if you write sizes in metres.	`m`
`data-ceiling`	Ceiling for units that don't give one. Without it: 8 ft, or 2.4 m.	`9`
`data-link`	Where the button goes. `{size}` becomes the unit's size as you wrote it. Without a link there is no button.	`https://yoursite.com/rent?size={size}`
`data-cta`	The button's text (up to 28 characters). The size is added after it.	`Rent now`
`data-color`	Your colour, as a hex code without the #. Used on the button, the fill meter and the unit's door; the button text turns white or black to stay readable.	`1f3a5f`
`data-name`	Your facility's name, used in the calculator's opening line.	`Harbor Lane`
`data-truck`	`1` to also say the smallest rental truck that moves the load in.	`1`
`data-show`	Start in `metric` or `imperial`. Visitors can switch either way.	`metric`
`data-height`	The calculator's height in pixels, if the default (680 px, or 760 px on narrow screens) doesn't suit your page. 420 or more.	`720`

A link or a note for each unit

If each size has its own booking page, or you want a short note such as "Drive-up", put everything in onedata-config attribute instead. It takes the same settings, plus note, link,height and door for each unit:

<div data-elb-storage data-config='{
  "units": [
    { "size": "5x10", "note": "Climate controlled", "link": "https://yoursite.com/units/5x10-cc" },
    { "size": "10x10", "height": 9 },
    { "size": "10x20", "height": 10, "door": "9x8", "note": "Drive-up" }
  ],
  "link": "https://yoursite.com/rent?size={size}",
  "color": "1f3a5f"
}'>
  <a href="https://everylastbox.com/storage-size-calculator">Storage size calculator by Every Last Box</a>
</div>

If your site won't run scripts

Some builders allow frames but strip scripts. This version needs no script: the settings go in the address, with the same names without data- (units, link, cta, color and so on). The link must be URL-encoded, which the setup form does for you.

<iframe src="https://everylastbox.com/embed/storage?units=5x5,5x10,10x10,10x15,10x20,10x30&link=https%3A%2F%2Fyoursite.com%2Frent%3Fsize%3D%7Bsize%7D"
        title="Storage unit size calculator" loading="lazy"
        style="display:block;width:100%;height:700px;border:0"></iframe>
<a href="https://everylastbox.com/storage-size-calculator">Storage size calculator by Every Last Box</a>

Tracking what visitors pick

The calculator tells your page what happened, so you can send it to your own analytics. It never sends anything about the visitor, only sizes and counts. Listen on the box for:

elb:result: a new answer, with size (the best fit, or empty), fits, items and fillPct
elb:select: the visitor tapped a size in the list, with size
elb:cta: the visitor pressed your button, with size

<script>
  var calc = document.querySelector('[data-elb-storage]');
  calc.addEventListener('elb:cta', function (e) {
    // e.g. Google Analytics 4
    gtag('event', 'size_calculator_reserve', { unit_size: e.detail.size });
  });
</script>

If it doesn't show

Nothing appears. Your builder probably removed the <script> line. Check that it's still there after saving, or use the frame-only code.
A grey box that stays empty. Your site may block frames from other sites (a content security policy). Allow https://everylastbox.com in frame-src and script-src.
The sizes look wrong. Sizes are width × depth, with the door on the width side. Check the ceiling: an 8 ft default is low for some facilities.
Too short or too tall. Set data-height on the box, e.g. data-height="720".
Something else. Email contact@everylastbox.com with the page's address.