Host SDK overview

The <togenar-embed> element is the SDK — no separate client library. It exposes three surfaces:

1. Synchronous reads (cached)

getSelection(), getSkus() and getShareUrl() return instantly from the last selection_change event — no round-trip. They return null / [] until the first event arrives, so gate any UI on the event first:

tg.addEventListener('togenar:configurator:selection_change', () => {
  console.log(tg.getSkus());        // ["OSLO-BODY-WALNUT", "OSLO-LEGS-CHROME"]
  console.log(tg.getShareUrl());    // deep link that rebuilds this exact configuration
});

2. Async requests (Promise-based)

Everything else — getOptions(), select(), setPrices(), enterAR(), … — round-trips to the viewer and returns a Promise. Full list: Methods reference.

const { ok } = await tg.select('body', 'walnut');   // resolves AFTER the swap settles

You can call these immediately — even before the viewer finishes loading. Requests are queued and flushed once the viewer’s bridge is up; you never have to wait for a ready event before wiring your page. Requests time out after 30 s if the viewer never becomes reachable.

3. DOM events

The viewer reports back through bubbling togenar:* CustomEvents on the element — togenar:ready, togenar:configurator:selection_change and friends. Full list: Events reference.

Security model

• The embed only accepts messages from its own iframe and verifies the frame’s origin.
• Requests/responses are correlated by ID — stray or duplicate messages are ignored.
• Removing the element from the DOM rejects all in-flight requests and tears the channel down cleanly.