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 section 3).

1. Add a message listener

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?.isWindowCAD) return;

    // handle the message here
  });
</script>

Always check e.origin and e.data.isWindowCAD before acting on a message — other scripts on the page (or malicious ones) can also call postMessage.

2. Check the message type

Two kinds of messages are sent, and only one of them means a quotation request has actually been submitted:

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

    if (e.data.isButtonClicked) {
      // customer clicked "Get a quote" - no enquiry form is configured, so
      // this fires before any quote data exists. Don't count this as a conversion.
    }

    if (e.data.projectJson) {
      // customer submitted the enquiry form and reached the confirmation screen
      console.log(e.data.appType, e.data.projectJson);
    }
  });
</script>

isButtonClicked is sent when there's no enquiry form and the customer just clicked the quote button — treat this as "used the designer", not "submitted a quote". projectJson is only sent once the enquiry form has been submitted, validated and saved, at the point the customer sees the confirmation screen. It contains the full project data plus appType (e.g. Retail, Trade, Composite).

3. Track conversions and redirect on submission

Use the projectJson message from step 2 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?.isWindowCAD) return;
    if (!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?.isWindowCAD) return;
    if (!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?.isWindowCAD) return;
    if (!e.data.projectJson) return;

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

Because this only fires on projectJson, customers who simply open or use the designer without completing a quotation request won't trigger a conversion or redirect.