Events reference

Events are standard bubbling CustomEvents on the element:

tg.addEventListener('togenar:configurator:selection_change', (e) => {
  console.log(e.detail);
});

Events

togenar:ready

The viewer is loaded and interactive.

togenar:configurator:selection_change

Fires on load and on every option change — including changes you drive with select(). Detail:

{
  "parts": [
    { "partId": "…", "partLabel": "Body", "variantId": "…", "label": "Walnut",
      "sku": "OSLO-BODY-WALNUT", "modelName": "…" }
  ],
  "shareUrl": "https://model.togenar.com/…"   // deep link to this exact configuration
}

This event also refreshes the synchronous caches behind getSelection(), getSkus() and getShareUrl().

togenar:load

The embed’s iframe finished loading its document shell. Fires before togenar:ready — for almost every purpose you want ready or selection_change instead.

togenar:error

Load or configuration failure.

Analytics hooks

togenar:commerce:add_to_cart_success / togenar:commerce:add_to_cart_fail are conventions for your code to dispatch after your cart call resolves, keeping commerce analytics on one channel.

Pattern: gate your cart button

const btn = document.getElementById('add');
tg.addEventListener('togenar:configurator:selection_change', (e) => {
  const skus = (e.detail.parts || []).map(p => p.sku).filter(Boolean);
  btn.disabled = skus.length === 0;
});