Attributes reference

All attributes are optional except project. Attribute changes are observed live — updating one re-syncs the embed (and reloads the frame only when the underlying URL actually changes).

Content

Attribute	Values	Purpose
project (or project-id)	ID	The published project to show. Required — without it the element renders empty.
scene-id	ID	Pin a specific scene of the project.
model	path	Show a single model of the project by path.

Modes

Attribute	Values	Purpose
configurator	boolean	Enable option picking (parts & variations). Without it the embed is a viewer.
picker	off | none | false	Hide the built-in option panel while keeping the engine + SDK alive (headless).
mode	headless | launcher | ar-launcher	headless = same as picker="off". launcher = device-adaptive AR launcher page instead of the inline viewer.
ar-button	off | none | false | 0	Hide only the built-in AR button so AR entry runs from your own button via enterAR(). controls="off" already covers it.
controls	off | none | false | 0	Take down the whole built-in control surface — AR, photo, measurements, reset view — and draw your own, driven over the SDK. Named after <video controls>. getControls() and the togenar:controls event report what each control should offer.
launcher	boolean	Same as mode="launcher".
preview	token	Owner draft-preview token from the panel, so the owner can embed an unpublished project. Never set this on public pages.

Presentation

Attribute	Values	Purpose
lang (or locale)	en | tr | ru	UI language of the built-in panel and summary.
aspect	16/9, 1/1, 4/3, …	Aspect-ratio sizing (default 16/9). Accepts 16:9 too.
height	CSS length	Fixed-height sizing; overrides aspect.
loading	lazy (default) | eager	Iframe loading strategy.
allow	permissions list	Iframe permissions. Default: xr-spatial-tracking; fullscreen; camera; accelerometer; gyroscope.

Advanced

Attribute	Values	Purpose
base-url	URL	Override the viewer origin (default https://model.togenar.com).
size-hints	boolean	Append the element’s pixel size to the viewer URL. Off by default — size changes would reload the frame.
na	boolean	Skip analytics for this impression (e.g. internal dashboards). Also skips the anonymous rendering-health summary (device class, load timings — no identifiers).
consent	analytics	Opt in to configurator funnel analytics. Off by default.
enquire	boolean	Show the “Request a quote” button in the configurator summary. Off by default.
enquire-label	string	Rename that button (“Add to cart”, “Get a price”…).
reflection	boolean	Studio-style ground reflection under the product. Off by default.
page-url	URL	Product-page URL for AR hand-off — Quick Look’s canonical URL and the QR return target. Defaults to the embedding page’s own URL.

page-url — AR that finds its way back to your product page

A desktop shopper who launches AR gets a QR code and finishes the journey on their phone — on model.togenar.com, where your page, your prices and your cart no longer exist. page-url (or its default, the embedding page’s own URL) travels with that QR hop:

• The price you last pushed with setPrices() travels too, so Apple’s AR banner shows the configured price on the phone — not a blank.
• The AR banner’s canonical URL becomes your product page instead of the viewer.
• When the shopper taps your AR call-to-action (WebAR settings → AR Add to Cart), the phone returns them to your product page with togenar_ar_cart=1 appended — plus the configured selection — so your page can drop the exact configuration into the cart.

One condition: the page’s domain must be on your workspace embed allowlist (the same list that powers the domain lock). An empty allowlist keeps the whole hand-off off — that is what stops a forged QR from steering shoppers to a foreign site.

reflection — a floor under the product

A soft mirror on the ground plane, the way a product is lit in a studio shot. It costs GPU time, so it is off unless you ask for it, and the viewer skips it where it would cost more than it adds.

<togenar-embed project="..." reflection></togenar-embed>

enquire — the configurator’s conversion step

The shopper builds a configuration; enquire is how they ask for it. The viewer shows the button in the summary panel and emits an event — you fulfil it, by opening your quote form, adding a cart line, or posting to your CRM.

<togenar-embed project="..." configurator enquire enquire-label="Request a quote"></togenar-embed>

document.querySelector('togenar-embed')
  .addEventListener('togenar:configurator:enquire', (e) => {
    // { parts: [{ partId, partLabel, variantId, label, sku, modelName }], skus, shareUrl }
    openQuoteForm(e.detail);
  });

It is off unless you ask for it, because a button nobody listens to is a dead end for the shopper.

If you have no cart or CRM to wire the event into, don’t use the attribute — switch on Quote requests in the panel instead. That serves a built-in contact form and emails you the configured selection, with zero code; the button then also appears in the standalone viewer and share links, and the event above still fires for hosts that listen.

This is also what makes conversion reportable: the tap happens inside the configurator, so it lands in your dashboard’s funnel. (A buy button that lives outside the 3D player — the common arrangement — cannot be attributed at all.) Taps are recorded when consent="analytics" is set.

consent — configurator funnel analytics

Views and AR launches are counts. Which options a shopper picked, and whether they enquired, is a behavioural profile — so it is off unless you turn it on, and the server enforces that, not just the embed.

<togenar-embed project="..." configurator consent="analytics"></togenar-embed>

Set it only once the visitor has consented to analytics tracking: for this data you are the controller. Drop the attribute (or remove it when consent is withdrawn) and collection stops — the viewer sends nothing behavioural and the API rejects it if it somehow arrives.

With it on, the dashboard can report the configurator funnel: most-picked options, configure rate, abandoned configurations, and enquiries.

Styling

The host element exposes one CSS custom property:

togenar-embed { --togenar-embed-bg: #f4f4f6; }   /* default: transparent */

The frame has border-radius: 12px and clips its content; wrap it if you need a different radius.