`public/embed.js`

34 lines
// estimate-instant — drop-in embed for any DW sister site.
// Usage on the host page:
//   <div id="dw-estimate"></div>
//   <script src="https://estimate.designerwallcoverings.com/embed.js"
//           data-target="#dw-estimate" data-height="720"></script>
// Renders the calculator in a sandboxed iframe so host-page CSS can't leak in
// and captured emails post back to THIS origin (single source of truth for the
// roll-math + the lead store). No host-page dependencies.
(function () {
  var s = document.currentScript;
  if (!s) return;
  // Origin the script itself was loaded from — the widget always talks home.
  var origin = new URL(s.src, location.href).origin;
  var sel = s.getAttribute('data-target') || '#dw-estimate';
  var height = parseInt(s.getAttribute('data-height') || '720', 10);
  var mount = document.querySelector(sel);
  if (!mount) { console.warn('[estimate-instant] embed target not found:', sel); return; }

  var f = document.createElement('iframe');
  // Pass the host page origin so the widget targets its postMessage back to us (not '*').
  f.src = origin + '/?embed=1&host=' + encodeURIComponent(location.origin);
  f.title = 'Wallpaper roll estimate';
  f.loading = 'lazy';
  f.setAttribute('scrolling', 'no');
  f.style.cssText = 'width:100%;border:0;display:block;max-width:680px;margin:0 auto;height:' + height + 'px';
  // Let the widget grow to fit its content once loaded (see index.html postMessage).
  window.addEventListener('message', function (e) {
    if (e.origin === origin && e.data && e.data.dwEstimateHeight) {
      f.style.height = e.data.dwEstimateHeight + 'px';
    }
  });
  mount.appendChild(f);
})();