WindowCAD - Tutorials: Retail designers

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:

    #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;

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">
        <iframe id="windowCADiFrame" src=""></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>
    const windowCADdesignButton = document.getElementById(
    const windowCADdesigner = document.getElementById("windowCADdesigner");
    const windowCADcloseButton = document.getElementById(

    windowCADdesignButton.addEventListener("click", () => { = "block";
    windowCADcloseButton.addEventListener("click", () => { = "";

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.