For Web Developers

Embed This App

Copy one of the snippets below into the other site's HTML, or into a custom HTML / embed block in its page builder.

Allow embedding first

In the app dashboard, open Settings, then the Browser security section, and set iFrame embedding to "Any website" — or "Only websites you choose" and add the domain you are embedding into. Without that, the frame shows a blank area.

Full page, fixed height

Simplest option. Change height to suit your layout.

Fixed height iframe

<iframe
  src="https://machinesolutions.base44.app/"
  title="Machine Solutions"
  width="100%"
  height="900"
  style="border:0;border-radius:8px;display:block;"
  loading="lazy"
  allow="fullscreen"
></iframe>

Responsive, ratio-based

Keeps a set shape on any screen. Change padding-top: 75% is landscape, 150% is portrait.

Responsive iframe

<div style="position:relative;width:100%;padding-top:150%;">
  <iframe
    src="https://machinesolutions.base44.app/"
    title="Machine Solutions"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"
    loading="lazy"
    allow="fullscreen"
  ></iframe>
</div>

Auto-resize (height follows content)

No fixed height and no inner scrollbar: the app reports its own page height, so the frame grows or shrinks with the content and your page scrolls normally. Paste both parts — the frame and the script — together.

Auto-resizing iframe + host script

<div style="width:100%;">
  <iframe
    id="ms-embed"
    src="https://machinesolutions.base44.app/"
    title="Machine Solutions"
    style="width:100%;border:0;display:block;"
    scrolling="no"
    loading="lazy"
    allow="fullscreen"
  ></iframe>
</div>
<script>
  (function () {
    var frame = document.getElementById('ms-embed');
    window.addEventListener('message', function (event) {
      if (event.origin !== 'https://machinesolutions.base44.app') return;
      var data = event.data;
      if (!data || data.type !== 'ms-embed-height') return;
      if (typeof data.height !== 'number') return;
      frame.style.height = data.height + 'px';
    });
  })();
</script>

Single section

Point the src at any page path, such as a product category, a machine model, or the contact page.

Embedded product category

<iframe
  src="https://machinesolutions.base44.app/products/woodworking"
  title="Machine Solutions — Woodworking Machinery"
  width="100%"
  height="900"
  style="border:0;border-radius:8px;display:block;"
  loading="lazy"
  allow="fullscreen"
></iframe>