Build a dynamic pricing calculator app

Quoting takes too long. A prospect asks “roughly what would this cost?”, and the answer waits for someone at Northwind to find the rate card, do the sums, and email back — by which time the prospect’s enthusiasm has cooled. A simple self-serve calculator turns that lag into an instant answer.

This is a small web app: a page with a service dropdown and a rush-job checkbox. Pick options and the total updates live in the browser — no page reload, no server round-trip. Share the link, and prospects get a ballpark figure in seconds while the studio gets fewer “how much?” emails.

What you’ll need

• An Apps Script project with two files: a script file and an HTML file named Pricer (the names must match the createHtmlOutputFromFile call).
• Your real prices — the figures below are placeholders. Edit the dropdown options and the rush multiplier to match Northwind’s rate card.
• Permission to deploy the project as a web app.

The HTML (Pricer.html)

<form id="p">
  <label>Service:
    <!-- Each option's value is the base price in pounds. -->
    <select id="service">
      <option value="500">Brand audit (£500)</option>
      <option value="2000">Brand refresh (£2,000)</option>
      <option value="6000">Full identity (£6,000)</option>
    </select>
  </label>

  <!-- Ticking this applies the rush surcharge. -->
  <label>Rush turnaround? <input type="checkbox" id="rush"></label>

  <p>Total: £<span id="total">500</span></p>
</form>

<script>
  // Rush jobs add 40% to the base price.
  const RUSH_MULTIPLIER = 1.4;

  // Recalculate the total from the current form state.
  const update = () => {
    const base = +document.getElementById('service').value;
    const rush = document.getElementById('rush').checked;
    const total = base * (rush ? RUSH_MULTIPLIER : 1);
    document.getElementById('total').textContent = total.toLocaleString();
  };

  // Recalculate whenever any field changes.
  document.querySelectorAll('select, input')
    .forEach((el) => el.addEventListener('change', update));
</script>

The script

/**
 * Serves the pricing calculator page when the web app is opened.
 * All the pricing logic runs in the browser — this just returns
 * the HTML file.
 */
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Pricer')
    .setTitle('Northwind — pricing calculator');
}

How it works

1. doGet runs when someone opens the web app’s URL. It returns the contents of Pricer.html via HtmlService and sets a browser tab title.
2. The HTML page is self-contained — a <select> of services and a rush checkbox, with the running total shown in a <span>.
3. Each <option>’s value attribute holds its base price in pounds, so the selected price is read straight from the dropdown.
4. The update function reads the chosen base price, checks the rush box, and multiplies by RUSH_MULTIPLIER (1.4) when rush is ticked.
5. toLocaleString formats the number with a thousands separator, so £6,000 reads as 6,000.
6. An event listener on every select and input calls update on any change, so the total recalculates instantly — entirely in the browser, with no call back to Apps Script.

Example run

Open the deployed link and the page starts on the cheapest option:

Service selected	Rush?	Total shown
Brand audit (£500)	no	£500
Brand audit (£500)	yes	£700
Brand refresh (£2,000)	no	£2,000
Full identity (£6,000)	yes	£8,400

Every change updates the figure the instant the dropdown or checkbox moves.

Run it

Deploy the project as a web app so it has a shareable URL:

1. In the Apps Script editor, click Deploy → New deployment.
2. Choose type Web app.
3. Set Execute as to yourself, and Who has access to Anyone so prospects can open it without a Google sign-in.
4. Click Deploy, approve the authorisation prompt, and copy the web app URL.
5. Share that URL — open it yourself first to confirm the page loads.

Watch out for

• The prices live in the HTML, visible to anyone who views source. This is a public ballpark tool, not a place for confidential or negotiated rates.
• Nothing is saved. The calculator only displays a figure — it does not record the quote or capture who asked. Add a Sheet-backed submit step if you need a lead trail.
• All the maths runs client-side, so the page is fast but unverified. Treat the number as an indicative estimate, not a binding quote.
• Update the deployment after editing. Apps Script serves the version from the last deployment — use Deploy → Manage deployments → Edit and pick the new version, or the live app keeps the old prices.
• “Anyone” access means truly anyone with the link. If quoting should stay internal, set access to your domain instead.