Receiving quote data

This follows on from Adding retail designers to a website. WindowCAD® will send a message to your website whenever a customer submits a quotation request — this works the same way whether you're using a retail, trade or composite door designer interface.

You can use this to know exactly when a customer has completed a quotation request, separately from simply opening or browsing the designer, which is useful for things like conversion tracking and post-submission redirects (see what else you can do).

Setting it up

Place this anywhere on the page that contains your openWindowCAD() button:

<script>
  window.addEventListener("message", (e) => {
    if (e.origin !== "https://www.windowsoftware.co.uk" || !e.data?.projectJson) return;

    // customer has completed a quotation request - handle it here
    console.log(e.data.appType, e.data.projectJson);
  });
</script>

Checking e.data.projectJson filters out other messages WindowCAD® can send (like a customer just clicking the quote button when no enquiry form is set up), so this only runs on a genuinely completed quotation request. Checking e.origin stops other scripts on the page from triggering it.

What else you can do

Use the same message to fire your conversion tracking and redirect the customer to your own thank-you page — it only fires once, at the point a quotation request has actually been completed.

Firing a GA4 / Google Ads conversion event

<script>
  window.addEventListener("message", (e) => {
    if (e.origin !== "https://www.windowsoftware.co.uk" || !e.data?.projectJson) return;

    gtag("event", "conversion", {
      send_to: "AW-XXXXXXXXX/XXXXXXXXXXXXXXXXXXXXX",
    });
  });
</script>

If you're using Google Tag Manager instead of gtag.js directly, push a custom event to the data layer and create a Custom Event trigger in GTM matching the event name:

<script>
  window.addEventListener("message", (e) => {
    if (e.origin !== "https://www.windowsoftware.co.uk" || !e.data?.projectJson) return;

    window.dataLayer = window.dataLayer || [];
    dataLayer.push({ event: "windowcad_quote_submitted" });
  });
</script>

Redirecting to your own thank-you page

Since the redirect happens on your own website rather than inside WindowCAD®, you're free to send customers wherever you like once the conversion has fired:

<script>
  window.addEventListener("message", (e) => {
    if (e.origin !== "https://www.windowsoftware.co.uk" || !e.data?.projectJson) return;

    window.location.href = "/thank-you";
  });
</script>