Embed the Widget

Add the Garage Door Designer to any website or app in seconds.

Widget URL

Link directly to the standalone widget page:

https://observant-door-craft-studio.base44.app/widget

iFrame Embed

Paste this snippet anywhere in your HTML to embed the designer:

<iframe
  src="https://observant-door-craft-studio.base44.app/widget"
  style="display:block;width:100%;height:100vh;border:0;"
  title="Garage Door Designer"
></iframe>

The widget always fills the full width of the browser window, edge to edge, and the full height of the screen. Add min-height to the iframe style if your page needs more room.

WordPress HTML

Paste this into a Custom HTML block on any WordPress page or post. It ignores your theme's content width and stretches edge to edge:

<!-- Garage Door Designer -->
<div style="width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);position:relative;overflow:hidden;">
  <iframe
    src="https://observant-door-craft-studio.base44.app/widget"
    style="display:block;width:100%;height:100vh;border:0;"
    title="Garage Door Designer"
    loading="lazy"
  ></iframe>
</div>

Create the page and choose a full-width or blank page template so the theme's sidebar and column don't squeeze it.
Add a Custom HTML block and paste the code above.
Click Update, then open the page on your live site.
In Elementor, Divi or WPBakery, drop the block into a full-width section with no padding.

Full HTML Page

Save this as an .html file and upload it to your site. It includes the estimator intro on step one and the full designer beneath it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Instant Garage Door Cost Estimator | Advantage Garage Door</title>
</head>
<body style="margin:0;padding:0;background:#F2FCFE;">
  <iframe
    src="https://observant-door-craft-studio.base44.app/widget"
    style="display:block;width:100vw;height:100vh;border:0;"
    title="Instant Garage Door Cost Estimator"
    loading="lazy"
  ></iframe>
</body>
</html>

Preview Widget