Embed Widget
Let customers preview your enclosure layout directly on your product
page. Add a single <iframe> tag and you're done.
How to embed
Three steps to a live preview
Create a layout, copy the embed code from the Share menu, and paste it into your HTML.
Create a project & make it public
Open the app, design your layout, then open the Share menu and toggle your project to Public so anyone can view it.
Copy the embed code
In the Share menu, click Copy next to the embed code. The snippet already contains your project ID.
Paste into your HTML
Add the <iframe> snippet to your product page
HTML. That's it. No extra configuration needed.
Embed code
Copy and paste
The Share menu gives you a ready-to-paste snippet. You can also copy
the template below and replace YOUR_PROJECT_ID with
your project's UUID.
<iframe
src="https://app.stompboxlayout.com/embed/YOUR_PROJECT_ID"
width="100%"
height="500"
style="border: none; border-radius: 8px;"
loading="lazy"
allow="fullscreen"
title="Stompbox Layout preview"
></iframe>Options
Query parameters
Append these to the embed URL to customise the widget appearance.
| Parameter | Values | Description |
|---|---|---|
theme |
light | dark |
Sets the widget colour scheme. Light by default, which suits most pages the widget is dropped into. |
footprints |
true | false |
Draw the outline of the part that goes in each hole. On by default. |
knobs |
true | false |
Draw the knobs fitted to the pots. Off by default, because a knob covers the hole position underneath it. Turn them on to show the finished pedal rather than the drilling. |
These three work the same way on the 2D widget, the 3D view and the image endpoint, so one set of settings carries across all of them.
<!-- Dark theme example -->
src="https://app.stompboxlayout.com/embed/YOUR_PROJECT_ID?theme=dark"
<!-- Light theme example -->
src="https://app.stompboxlayout.com/embed/YOUR_PROJECT_ID?theme=light"3D preview
Embed a rotating 3D view
Add /3d to the embed URL for a slowly rotating 3D view
of the enclosure, with every hole drilled and each component seated
in place. Use the same project ID as the flat preview.
<iframe
src="https://app.stompboxlayout.com/embed/YOUR_PROJECT_ID/3d"
width="100%"
height="500"
style="border: none; border-radius: 8px;"
loading="lazy"
allow="fullscreen"
title="Stompbox Layout 3D preview"
></iframe>
The 3D view takes two more parameters, on top of
theme, footprints and knobs:
| Parameter | Values | Description |
|---|---|---|
view |
outside | inside |
Start looking at the outside of the enclosure (the default) or up into the open enclosure to see how the parts sit inside. |
xray |
true | false |
Make the enclosure walls see-through so the components read through the shell. Off by default. |
clearance |
true | false |
Shade parts that clash into each other in red. Off by default, so an embedded layout shows the build rather than the working notes. Turn it on if you are sharing a layout for feedback. |
<!-- Inside, see-through, dark theme -->
src="https://app.stompboxlayout.com/embed/YOUR_PROJECT_ID/3d?view=inside&xray=true&theme=dark&knobs=true"Live demo
See it in action
Real embedded projects, exactly what your customers will see: the flat preview on the left, the rotating 3D view on the right.