WordPress install guideAdd your instant price calculator to WordPress

Before you start

• Log in to WordPress as an Administrator. Editors and Contributors can’t add code: WordPress removes it when they save.
• WordPress.com (your address ends in wordpress.com, or you pay WordPress.com): you need a paid plan, and a plugin must be installed before code is allowed. On the free plan use your price link instead.
• Your code from the Share page, copied.

The 3 steps

1. In your WordPress dashboard go to Plugins → Add New Plugin, search for “WPCode”, then click Install Now and Activate.

   In the black menu on the left: Plugins → Add New Plugin (older versions say “Add New”). Search for WPCode. The one you want is called “WPCode – Insert Headers and Footers”. Click Install Now, then Activate. Already have a header-and-footer plugin? Use that one’s footer box instead.

   install-wordpress-plugin16:10

   WordPress: install WPCode

   image1600×1000

2. Go to Code Snippets → Header & Footer and paste the code below into the Footer box.

   In the left menu open Code Snippets → Header & Footer. The page has three boxes: Header, Body and Footer. Paste your code into the Footer box. If there is already code in it, paste yours on a new line below.

   install-wordpress-footer16:10

   WordPress: paste in the Footer box

   image1600×1000

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

   Click Save Changes at the top right. Open your site in a private window: the green “Instant price” button sits bottom right on every page. If you use a caching plugin, clear its cache first.

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>

Show it inside a page

For a “Get a quote” page, edit that page and add a Custom HTML block (click + and search “Custom HTML”, or type /html on an empty line). Paste the inside a page code from your Share page into it and click Update. Use a Custom HTML block, not a Paragraph: a paragraph shows the code as text. The floating button stays away from that page by itself, so the footer code can stay.

If it doesn’t show up

• You use WP Rocket, LiteSpeed Cache, Autoptimize or another speed plugin. Their “Delay JavaScript” and “Combine JavaScript” options can hold the code back. Add loader.js to the plugin’s exclusion list (in WP Rocket: File Optimization, the “Excluded JavaScript Files” box under Delay JavaScript execution), save and clear the cache.
• 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.