Embed a 3D viewer or ring builder

Two kinds of embed

In Dashboard → Embeds you publish either a Ring Builder (a live 3D configurator shoppers use on your store: options, live SKU + price, add to cart) or a Media Only set (a 360° hero plus captured still shots that replace your product photos; no options, no cart). You choose which when you create it, and you can convert later. Nothing is deleted, so converting back restores exactly what was there.

Ring Builder embeds

Publish a live interactive 3D configurator customers can build right on your store: a real-time WebGL ring they drag to rotate, with instant option switching (every published part is warmed up front) and instant metal/gem swaps. Control the default ring, allowed metals, the AR try-on, live SKU + price and an "add to cart" button.

Quick options on the stage

Switch on Quick options on the stage and the product's own metal and shape swatches sit on the 3D view itself, by default in a slim rail on the left edge (you can move it to the right edge or above the view buttons under Features → Quick options). The rail shows the current metal and shape as pictures; tapping one opens every choice (beside the rail on a computer, or in a low tray under the ring on a phone, where the rail is smaller and slides behind a small arrow at the edge when it is not in use; shoppers can hide it themselves too), using the same metal and diamond pictures your configurator uses.

Metals are shown as colour + karat (White, Yellow, Rose, Platinum and a 9K / 14K / 18K switch), only the ones that can actually be bought, with what each choice adds or takes off the price when your theme sends its prices. Every karat is shown in its 18K colour, and Platinum in the same finish as white gold, just as your product photos show them. On a computer, resting the mouse on a metal previews it on the ring before it is chosen.

The choices put themselves away after 5 seconds unused, when the shopper touches the ring, or when the 3D scrolls out of view. You choose whether it shows on phones and on computers, and whether it starts open on each, in every view, including while the shopper is wearing it in try-on. Its opens and picks appear on the embed's Analytics page. A pick changes the ring instantly and selects the matching store variant, so the price and the cart follow; your page's own swatches stay and stay in sync. Your theme tells the embed what that product can be built as; see the install recipe.

Install in one line

Copy a ready Shopify / WooCommerce / Wix / custom recipe under Install on your store, or drop in the raw iframe / JS loader (RMJRingBuilder.mount(...)). "Add to cart" emits an authoritative quote (server-recomputed SKU + price + a quoteId you can trust) plus the full selection, so you wire it to any cart.

Need a build-your-own UI instead of the widget? Use the API: the published catalog via GET /api/public/ring-builder/catalog and authoritative quotes from POST /api/public/ring-builder/quotes (or ringQuote). The developer reference lists both.

Views on the stage: 3D, On model, In box

Under Hand and box (both embed kinds) switch on the On model and In box buttons, and shoppers then tap a pill on the 3D view itself to swap between 3D view (the turnable ring), On model (the model hand, with a skin-tone picker) and In box, without leaving the builder.

There are no zoom or play buttons on the stage: shoppers pinch to zoom on a phone and scroll to zoom on a computer once they have clicked the ring (a scroll that merely passes over the ring still moves the page), a finger dragged up or down over the ring scrolls the page while a sideways drag turns it, and while a turn or a pinch is under way the page holds still, iPhone included. The full view button fills the screen on every phone (on iPhone, which has no fullscreen for pages, the store page expands the 3D frame instead); there an up/down drag tilts the ring. The turntable pauses while the ring is held and resumes a few seconds after it is let go.

The tab reads On model, not "On hand": beside a Try on that means the shopper's OWN hand, "on hand" read as the same offer twice. Those three are views, so they keep the strip to themselves. Try on is an action, so it sits apart in the stage's top-left corner, stacked under your logo if you have one: nothing near your watermark, and no one mistaking it for a fourth view.

It reads the shopper's device: with a camera it shows Try on; with none (a desktop tower, or a frame that blocks the camera) it shows On phone instead, a QR that opens the same ring on their phone. On a desktop both appear together; on a phone-sized screen the QR never does, since they are already holding the phone.

The Materials and Branding tabs are available on a Media Only embed too, where they set the metal and gemstone every still is rendered in, plus your accent colour and logo. Your accent colour also paints the try-on itself (the mode pills, buttons and pickers inside it), so shoppers never jump from your colours into ours; leave it unset and try-on keeps the default theme.

Media Only embeds

Pick the camera angles (and the On hand / In box showcase views) in Media tiles, set hero behaviour in Hero and views (interactive 360 or a locked angle, caption, share, zoom), then paste one line, RMJRingBuilder.mountMedia(...), where your product photos are; the loader hides your existing gallery on mount and restores it if 3D cannot start. Install and embed runs a real test capture so you can watch the actual stills come back before going live.

Match the studio look

On the embed's Appearance tab, tune brightness, diamond brilliance and reflection intensity; defaults render the diamond and metal exactly as the studio does.

Page builder (Pro and up)

Design the whole page around a builder in Dashboard → Embeds → Page. Drag blocks (ring viewer, configurator steps, price, buy, trust, FAQ, custom HTML) onto the outline, set your theme colours and fonts, and preview the real embed live at mobile, tablet and desktop widths. The Configurator steps block renders the same One step / Three step flow as the built-in page; toggle it from the Page builder's Layout tab or the embed editor's own Layout pane, and they stay in sync. Your draft saves as you go and only reaches shoppers when you press Publish; every publish keeps a restore point, and Unpublish puts the built-in layout back.

Related

• Band engraving
• The presentation box
• Checkout, cart modes and per-builder pricing
• Shopify and WooCommerce