Lay out what sits over the 3D, and add your own images and buttons.
The embed page gives you a handful of positions for each thing that sits over the 3D: your logo goes in one of four corners, the type switcher on one of the edges, the View in your space button in one of six places. That covers most product pages.
UI Builder replaces those choices with a layout you draw yourself. You drag each element where you want it, you can take any of them off entirely, and you can add your own pictures and your own buttons on top.
It is a paid feature. If it is not on your plan the main entry point at the bottom of the embed page is still there, greyed out, saying so. The per-control shortcuts described below are simply absent rather than greyed.
Each individual control also offers it. Under your logo's corner buttons there is a full-width Put it somewhere else, which takes you straight to the builder with the logo already selected — usually the quickest way in. Once a layout owns that element the same button reads Placed in UI Builder or Hidden by UI Builder.
An element is pinned to one of eight anchors — the four corners, the middle of each edge — and given an offset from it. You cannot put something at an arbitrary point, and that is deliberate.
The same embed is a full-width banner on a desktop product page and a small card on a phone. A position stored as 780 across and 120 down is in the middle of one and off the edge of the other. Stored as 16 in from the top right it is sixteen pixels in from the top right of both. What you lay out is what every visitor sees, on every screen.
The offsets are measured after the type switcher has taken its share of the edge, so something anchored to the bottom sits clear of a bottom bar rather than on top of it.
There is no centre-centre anchor. The middle of the frame is where the model is.
The type switcher is the exception, and it has its own section below.
| Element | What it does |
|---|---|
| Your logo | The image from your branding settings. Needs one uploaded, or there is nothing to place. |
| Type switcher | The pills or rail a visitor picks a variant with. |
| Type name | The name of the variant being shown. |
| View in your space | The augmented reality button. |
Each one has three answers, not two:
Placing an element starts it exactly where it already was, so nothing jumps when you hand it over.
It is a bar along the top or the bottom, running the full width, or a rail down one side — so you choose one of four edges rather than a position, and it takes no offset. Everything else in your layout is measured after it has taken its share of the edge, which is why moving it moves them.
Drag its handle towards an edge: the strip you are about to give it lights up while you drag, so you can see the answer before you let go. The arrow keys do the same thing. The dashed box around the handle is that strip — not the pills themselves, which sit inside it.
You also choose where the pills sit along it — left, centred or right in a bar, top, centred or bottom in a rail. That is for getting them away from whatever is beside your embed on the page: a caption, a price, a gutter, or your own logo in the same corner.
It only takes effect when there is room to spare. A family with more types than fit packs them from the start whatever you choose, because the alternative would hide the first ones off the beginning of the scroll where no scrollbar can reach them.
The numbered stepper is not one of the four. If you want that, leave the switcher to the embed page.
If your family's parameters break down into options, the switcher is a row of dropdowns rather than a row of type pills — the builder calls it Options on those models. It is the same element and the same four edges; it just looks different, because picking a size and a finish separately is a different job from picking one of five named types.
One difference that is not cosmetic: Do not show it removes a row of type pills, but on an Options family the dropdowns are what the model is configured with, and they stay. If you want them gone, the family needs no derivable options rather than a layout that hides them.
The frame reloads the model each time you change the layout, so it takes a moment to catch up. While it does, the other elements' handles stay where the frame still has them and cannot be dragged — otherwise you would be aiming at edges the frame is about to move.
Up to twelve, in any combination. They are painted in the order they appear in the list, so move one down the list to bring it in front of the others — that is what the arrows beside each one are for.
Add an image uploads a PNG, JPEG or WebP under 8 MB, or takes one you have already uploaded — it is the same library your materials use, so a badge you add here can be used on a finish, and the other way round. SVG is not accepted. Give it a description: it is read aloud in place of the picture, and empty is right for a flourish and wrong for anything carrying words.
Add a button gives you four things:
https only. Leave it empty for a button that only tells your page it was pressed; a link would take the visitor away from the model. A button with a link opens it in a new tab.Both take a Size between 50% and 200%. The anchor stays put as it grows, so something in a corner grows into the frame rather than off it.
Every button posts a message to the page the embed sits on when it is pressed, whether or not it has a link. That is what lets a button add to your own basket or open your own quote form without navigating away from the product.
The message is always these four fields:
`` { source: "vue-embed", type: "button", id: "buy-now", label: "Buy now" } ``
The id is suggested from what the button says — Request a quote becomes request-a-quote — and you can change it. Two buttons cannot share one, because the id is the whole of what your website matches on.
The builder shows the exact listener your developer needs, with your button's id already in it, and a Copy button beside it. Two things to tell them:
source is vue-embed first, so the handler only answers messages from the model;This message is a published contract. Its shape will not change once you have written code against it.
Clear this layout puts every element back where the embed page put it. It is not a way to hide things — an embed with no layout shows exactly what it showed before UI Builder existed. Your own images and buttons come off with it, though the pictures themselves stay in your library.
If UI Builder leaves your plan, nothing on your website breaks. Your embeds go back to the controls on the embed page, and your layout is kept rather than deleted — it returns if the feature does. You cannot save changes to it in the meantime, and you can still clear it.
Related: Embeds and the viewer, Branding and white-labelling, Types and the configurator.