Embed an AI 3D Scene in Webflow, Shopify, or Framer in 5 Minutes

A 3D embed used to mean "hire a developer". With Yugma's embed iframe, it's a paste job. Here's the 5-minute version for Webflow, Shopify, and Framer.

# TL;DR

• Compose in Yugma → click Share → copy iframe.
• Paste into a custom HTML / embed block in your CMS.
• Done. Visitors orbit, zoom, and (on iOS) tap-to-AR.

# The iframe

<iframe
  src="https://yugma.studio/embed/SCENE_ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="fullscreen"
  loading="lazy"
  title="Yugma 3D Scene">
</iframe>

SCENE_ID is auto-generated when you click Share in the studio.

# Webflow

1. In the Designer, drop a Custom HTML embed onto your page.
2. Paste the iframe HTML.
3. In the embed settings, set width 100% and a height that matches your design (e.g. 500–800px).
4. Publish.

Webflow's preview won't render the iframe; the live site will.

# Shopify

1. Edit your theme. In the section where you want the embed (product page, custom landing), add a Custom Liquid or HTML block.
2. Paste the iframe.
3. For the product page, edit the product template. The iframe lives alongside (or replaces) the product image.
4. Save.

For mobile-first storefronts, set height="500" — phones render this nicely.

# Framer

1. Drop a Code layer onto your canvas.
2. Choose HTML embed, paste the iframe.
3. Set the layer's frame to fill its container.
4. Publish.

Framer's preview renders the embed live.

# Performance considerations

Yugma's embed loads the WebGL scene only when scrolled into view (loading="lazy"). First paint is the page; the 3D scene streams in. No layout shift.

For pages where the 3D scene is the hero (above-the-fold), remove loading="lazy" so it starts loading immediately.

# Watermark

Free tier embeds carry a small "Made with Yugma" badge in the corner. Pro removes it.

# Mobile + AR

iOS users can tap the AR button in the embed corner to open the scene in Quick Look (USDZ). Android users get Scene Viewer (GLB).

# A real e-commerce example

A furniture brand used this pipeline:

1. Photograph product in Yugma's product-marketing scene.
2. Export GLB + embed iframe.
3. Drop iframe on the product page below the photo carousel.
4. Customer rotates, zooms, taps AR to see the chair in their room.

Conversion-rate uplift on the test page: +14%. Not anything magical — customers just want to see the product in 3D before buying.

Read the product-marketing-scenes use case → Read the AI 3D export pipeline pillar →