Install guideAdd your instant price calculator to any website

Before you start

• Access to your site’s files or its “custom code”, “footer code” or “scripts” setting. Not sure? Send the steps to your web person from the Share page.
• Your code from the Share page, copied.

The 3 steps

1. Open your site’s HTML, or forward this to whoever built it.

   Open the template or footer file that every page shares (often footer.php, footer.html or a layout file), or your builder’s site-wide custom code setting.

2. Paste the code below just before </body> on every page (a shared footer file is easiest).

   Paste the code just before </body>. It loads in the background (async), so it doesn’t hold up your page, and if our server can’t be reached nothing shows and nothing breaks.

3. Publish, then open your site: the “Instant price” button shows bottom right.

   Publish or upload the file, then open your site in a private window: the “Instant price” button shows bottom right.

Your code

Copy it from your Share page: it has your calculator’s name filled in where this example says your-calculator. Paste it exactly as it is, in one piece.

<script async src="https://w.pricemywash.com/loader.js" data-widget="your-calculator" data-mode="button"></script>

<div data-pricemywash="your-calculator"></div><script async src="https://w.pricemywash.com/loader.js"></script>

<iframe src="https://w.pricemywash.com/w/your-calculator?embed=fixed" style="width:100%;height:1000px;border:0" title="Instant price" loading="lazy"></iframe>

Three ways to embed

• Floating button: one line for the whole site; opens the calculator in a full-screen sheet on phones. Optional: data-label (button text, up to 40 characters), data-position="left", data-offset (0–200 px higher).
• Inside a page: a <div> where the calculator should appear plus the same script; the frame grows to fit. It fills the width of that <div>, so on a wide page cap it — style="max-width:520px;margin:0 auto" — or the calculator stretches across the screen. Use one way per page.
• Fixed box: a plain iframe, 1000 px tall, for places that don’t run scripts. Everything else is the same.

The calculator runs in its own frame from our widget address, so your site’s CSS can’t break it and it can’t touch your pages.

If it doesn’t show up

• Speed or caching plugins with “delay JavaScript”, “defer all scripts” or “combine files” options: exclude loader.js from them.
• Open the live site, not the editor. Most builders don’t run added code in their editor or preview. Open your real address in a private window.
• Button and inline on the same page? Use one way per page. The floating button hides itself on a page that already shows the calculator inside it.
• The button covers a chat bubble or a bar. It moves above cookie and chat bars by itself. If it still sits on top of something, add data-position="left" (bottom left) or data-offset="80" (80 px higher, up to 200). The Share page has these under “If the button covers something”.
• Your web person set a strict security policy (CSP). Ask them to allow w.pricemywash.com in script-src and frame-src.
• Check it worked: the Share page shows Live on your-site.com within a minute of someone opening the page, or press Check install.

Stuck? Use the hosted link instead

Your calculator also lives on its own page, pricemywash.com/q/your-name. Any site builder can link to it: add a menu item or button called “Instant price” that opens that address. It works the same on your Google Business Profile, your Facebook page and as a QR code on door hangers. Copy it, or download the QR, on your Share page.