UI Builder

Lay out what sits over the 3D, and add your own images and buttons.

The VUE team·Last updated 10 August 2026

What UI Builder is

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 entry point is still on the embed page, greyed out, saying so.

Opening it

1. open a model and go to the Embed tab;
2. publish the embed if you have not already — there has to be a frame to lay out;
3. press Lay this embed out yourself, at the bottom of the settings column.

Each individual control also offers it. Beside your logo's five corner buttons there is a sixth option that takes you straight to the builder with the logo already selected, which is usually the quickest way in.

Eight anchors, not free positions

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.

What you can move

Each one has three answers, not two:

• Leave it to the embed page — the controls you already know decide, and the layout says nothing about it;
• Put it where I say — you place it, and the buttons for it on the embed page are disabled while your layout owns it;
• Do not show it — it comes off entirely. This is the one thing the embed page cannot do for the type switcher.

Placing an element starts it exactly where it already was, so nothing jumps when you hand it over.

The type switcher is different. It is a bar along an edge or a rail down a side, with all the space that implies, so an anchor picks one of those arrangements rather than a free position — and it takes no offset. The numbered stepper is not one of the eight; if you want that, leave the switcher to the embed page.

Your own pictures and buttons

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:

• What it says — up to sixty characters.
• Where it goes — optional, and 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.
• Look — filled or outlined, both in your accent colour.
• What your page hears — see below.

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.

What your page hears

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:

• check source is vue-embed first, so the handler only answers messages from the model;
• match on the id, not the label. The label is the words a visitor sees, so it changes when you edit the button; the id is the stable half.

Clearing a layout, and what happens if the plan changes

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.

Worth knowing before you start

• Check the layout at more than one width. The builder has four — hero, page, column and card — and they are genuinely different frames, not a zoom.
• Anchoring keeps things on screen; it does not stop them overlapping each other. Two elements anchored to the same corner will sit on top of one another.
• Nothing is live until you press Save layout, and everything is live the moment you do — including on embeds already on your customers' pages.
• The controls on the embed page still apply to everything your layout does not place, so the two work together rather than one replacing the other.

Related: Embeds and the viewer, Branding and white-labelling, Types and the configurator.