Webflow install guideAdd your instant price calculator to Webflow

Before you start

• Custom code needs a paid Webflow site plan, and it only runs on the published site, never in the Designer. On a free plan, link a button to your price link.
• You need access to the site’s settings in Webflow.
• Your code from the Share page, copied.

The 3 steps

1. In Webflow open Site settings → Custom code.

   In your Webflow dashboard, open the site’s Site settings and go to the Custom code tab.

   install-webflow-custom-code16:10

   Webflow: Site settings → Custom code

   image1600×1000

2. Paste the code below into the Footer code box and save.

   Paste your code into Footer code (the box for code before the closing body tag) and save.

   install-webflow-footer16:10

   Webflow: paste in Footer code

   image1600×1000

3. Publish the site and open the published address: the button shows bottom right (it doesn’t run in the Designer).

   Publish the site, then open the published address in a private window: the “Instant price” button shows bottom right. The Designer never shows it.

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>

Show it inside a page

In the Designer, open the page, click Add (+) and drag a Code Embed element (under Advanced) where you want the calculator. Paste the inside a page code, save and publish. Code Embed also needs a paid plan.

If it doesn’t show up

• 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.