← back to Estimate Instant
public/embed-demo.html
77 lines
<!doctype html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Widget Embed Demo — estimate-instant</title>
<style>
/* Simulates a mock retailer / DW sister-site page so the embed looks realistic */
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 Georgia,serif;color:#2a2a2a;background:#f4f0eb}
.site-header{background:#1a2a1a;color:#fff;padding:14px 40px;display:flex;align-items:center;gap:16px}
.site-header .brand{font-size:20px;letter-spacing:.06em;font-weight:700}
.site-header .tagline{font-size:12px;opacity:.7;letter-spacing:.1em;text-transform:uppercase}
.hero{background:linear-gradient(135deg,#2d3a2d 0%,#4a3a2a 100%);color:#fff;text-align:center;padding:60px 20px 50px}
.hero h1{font-size:clamp(24px,4vw,40px);margin:0 0 10px;font-weight:400;letter-spacing:.02em}
.hero p{font-size:16px;opacity:.8;margin:0 0 0;max-width:500px;margin-inline:auto}
.content{max-width:1060px;margin:0 auto;padding:40px 20px}
h2{font-size:22px;font-weight:400;margin:0 0 6px;letter-spacing:.02em}
.intro{color:#666;margin:0 0 24px;font-size:15px}
/* The embed container — on a real site this is all you put in the page */
#dw-estimate{max-width:680px}
.snippet-box{margin-top:40px;background:#1a1a1a;color:#d4c8b8;border-radius:10px;padding:20px 24px;font-family:monospace;font-size:13px;line-height:1.7;overflow-x:auto}
.snippet-box .comment{color:#6a8a6a}
.snippet-box .tag{color:#7aafdf}
.snippet-box .attr{color:#d4a84a}
.snippet-box .val{color:#8acd8a}
.snippet-note{margin-top:10px;font-size:13px;color:#888;font-style:italic}
.footer-bar{background:#1a2a1a;color:#fff;text-align:center;padding:18px;font-size:13px;margin-top:60px;opacity:.85}
</style></head><body>
<header class="site-header">
<div>
<div class="brand">Silk Wallpaper</div>
<div class="tagline">Designer Wallcoverings — sister site demo</div>
</div>
</header>
<div class="hero">
<h1>Luxury Silk & Textile Wallcoverings</h1>
<p>Curated from the world's finest ateliers. Delivered to designers and discerning clients.</p>
</div>
<div class="content">
<h2>How many rolls do you need?</h2>
<p class="intro">
Use our instant estimator — enter your wall dimensions, pick a pattern, and get an exact roll count
with pattern-match waste math and an instant price. Works across every room and every roll width.
</p>
<!--
══ EMBED START ══
This is the only markup a sister site needs to add.
The <script> injects a sandboxed iframe that talks back to estimate.designerwallcoverings.com.
The widget auto-resizes via postMessage — no fixed height needed.
-->
<div id="dw-estimate"></div>
<script src="/embed.js" data-target="#dw-estimate" data-height="680"></script>
<!-- ══ EMBED END ══ -->
<div class="snippet-box">
<div class="comment"><!-- Drop this into any DW sister-site page --></div>
<div><span class="tag"><div</span> <span class="attr">id</span>=<span class="val">"dw-estimate"</span><span class="tag">></div></span></div>
<div><span class="tag"><script</span></div>
<div> <span class="attr">src</span>=<span class="val">"https://estimate.designerwallcoverings.com/embed.js"</span></div>
<div> <span class="attr">data-target</span>=<span class="val">"#dw-estimate"</span></div>
<div> <span class="attr">data-height</span>=<span class="val">"680"</span><span class="tag">></script></span></div>
</div>
<p class="snippet-note">
The widget is sandboxed in an iframe — host-page CSS never leaks in, captured emails POST
back to the estimate server (single lead store), and the widget auto-resizes to fit content
via <code>postMessage</code>.
</p>
</div>
<div class="footer-bar">
Silk Wallpaper · a Designer Wallcoverings sister site ·
<a href="/" style="color:#aaa">Back to estimate tool</a>
</div>
</body></html>