Adding retail designers to a website

We recommend the below approach to add the window and door designers to a website. This will keep the page load time down while giving customers an easy to use experience.

Having WindowCAD® hosted inline on a website can be hard to use for customers. The page will already require scrolling with a mouse or finger but will also need to scroll items and orbit/pan the 3D view within WindowCAD®. This causes an frustration for users and provides a bad user experience.

1. Add the CSS styling

Copy and paste the following CSS styles, either into a <style> tag within the page <head> or into your CSS stylesheet:


<style>
    #windowCADdesigner {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    #windowCADdesigner > div {
        position: absolute;
        top: 3vw;
        right: 3vw;
        left: 3vw;
        bottom: 3vw;
        box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
    }

    #windowCADiFrame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        margin: 0;
        padding: 0;
    }

    #windowCADcloseButton {
        position: fixed;
        top: max(0px, calc(3vw - 20px));
        right: max(0px, calc(3vw - 20px));
    }

    #windowCADcloseButton path {
        fill: #ddd;
        stroke: #000;
        stroke-width: 3px;
        cursor: pointer;
    }

    #windowCADcloseButton path:hover {
        fill: #bbb;
    }

    #windowCADcloseButton path:active {
        fill: #333;
        stroke: #bbb;
    }
</style>

2. Add the button

Copy and paste the following button HTML into the desired location within the <body> of your webpage:


<button id="windowCADdesignButton">Get a free quote</button>

3. Add the iframe and script

Copy and paste the following HTML which contains an iframe before your closing </body> tag:


<div id="windowCADdesigner">
    <div>
        <iframe id="windowCADiFrame" src="https://www.windowsoftware.co.uk/windowcad7/?interface=composite"></iframe>
        <svg id="windowCADcloseButton" width="40" height="40">
            <path d="M38.5,20 A18.5,18.5 0 1 1 38.5,19.99 Z M29,11 11,29 M11,11 29,29"></path>
        </svg>
    </div>
</div>
<script>
    const windowCADdesignButton = document.getElementById(
        "windowCADdesignButton"
    );
    const windowCADdesigner = document.getElementById("windowCADdesigner");
    const windowCADcloseButton = document.getElementById(
        "windowCADcloseButton"
    );

    windowCADdesignButton.addEventListener("click", () => {
        windowCADdesigner.style.display = "block";
    });
    windowCADcloseButton.addEventListener("click", () => {
        windowCADdesigner.style.display = "";
    });
</script>

4. Replace the iframe src

Copy the URL from the WindowCAD® settings under Website designers and use it to replace the value of the src attribute within the <iframe> tag.