Show your rates on your website

Your website can show your hourly rates the way they are in MoveBoard: a table of your crews and price levels, your price calendar under it, and your promotion banners. When you change a rate, the table on your website changes by itself, within about five minutes. Nobody has to edit the website.

Before you start

• MoveBoard must already be on your website: the one line from Settings › Website & forms › Quote forms › Install, step 1. A site that has the integration.js line already has it.
• The table shows what you set in Settings › Pricing & calculator › Rates (the rates, the price levels that are on, the crews that are on), your price calendar, and Settings › Pricing & calculator › Promotions.

Add the rates table

1. Open Settings › Website & forms › Quote forms › Install (or press Get the code for your website on Settings › Pricing & calculator › Promotions, under Show rates table on the website).
2. In step 2, under Rates table, press Copy the Rates table tag:

<div id="mb-discount-table"></div>

3. Paste it into your website's page where the table should be (a "Rates" or "Pricing" page, for example).

If your website already has this tag, you don't need to do anything. It shows your rates again.

What the table shows

• A tab for each move type you take (Residential, Commercial…), with the names you gave them. A move type shows a tab only while Show rates table on the website is ticked for it on Promotions.
• A column for each price level that is on (Discount, Regular, Peak…), with your own name for it, in its calendar colour.
• A row for each crew that is on and has a rate: 2 Movers & Truck, 3 Movers & Truck…, Additional Mover/hr, Additional Truck/hr. Each cell is the hourly rate.
• While a promotion is on, a higher rate crossed out above the real one, worked out exactly as on your quotes (Promotions). The Additional Mover and Additional Truck rows never show one.
• Your price calendar under the table: this month, with arrows for the next twelve. Each day shows the colour of its price level. Days you blocked show as Not available.
• On a phone the rows stack: each crew, then one line per price level.

The table and the banners use the colors and font of your quote forms (the Theme panel of Quote forms: Colors and Font).

Choose what the table shows

Add these to the tag:

You can combine them, for example data-move-type="commercial" data-calendar="off".

Promotion banners

Each move type has two banners: your hourly moves slogan and your long distance slogan from Promotions, with the percent beside it when Display hourly rate discount in promotion slogan (or the long-distance one) is ticked. Their tags are listed in step 2 under Rates table, for example:

<div id="mb-discount-banner-hourly-moves-residential"></div>

A banner shows only while the promotion is on, its slogan switch is on and a slogan is typed. Otherwise it shows nothing.

Use your rates elsewhere on your site

Every rate in the table carries plain data your web developer can read: data-crew on each row, and data-rate-type, data-rate and data-was on each cell. When the table is drawn it also sends a moveboard:rates event with every rate in it:

<script>
  document.addEventListener("moveboard:rates", function (e) {
    // e.detail.types[0].rows[0].cells[0].r is the first crew's first rate, e.g. 149
    console.log(e.detail.types);
  });
</script>

So a rate shown on another part of the page (a "From $149/hr" card) can follow MoveBoard too.

If the table does not show

• Check the MoveBoard line is on that page (step 3, Test my website).
• The table shows only move types that have at least one rate and Show rates table on the website ticked.
• A change shows on your website within about five minutes. A visitor who already had the page open sees it the next time they open it.