Lifecycle Events
Lifecycle events tell you when the Mimeeq embed is ready, when a product finishes loading, and when the embed is removed from the page. You need to know the embed is ready before you can subscribe to observers, call actions, or register other event listeners.
Startup Flow
Page loads <script> and <mmq-embed> is registered
│
▼
Web component connects to DOM (no event)
│
▼
mimeeq-app-loaded
│
├── if template error ──► mimeeq-app-template-error (stops here)
│
├── if renderAtMount = true ──────────────┐
│ │
├── or after programmatic .show() call ───┤
│ ▼
│ ┌──────────────┼──────────────────┐
│ │ │ │
│ ▼ ▼ ▼
│ mimeeq-enter- mimeeq-modular- mimeeq-product-
│ product enter-product list-initialized
│ │ │
│ ▼ │
│ ┌───────┴────────┐ │
│ │ │ │
│ ▼ ▼ │
│ mimeeq-3d-product- mimeeq-2d- │
│ initialized product- │
│ initialized │
│ │
└── if renderAtMount = false ───────────┘
(embed waits, no product events until triggered)
Teardown Flow
User closes / navigates away / SPA route change
│
▼
mimeeq-leave-product or mimeeq-modular-leave-product
│
▼
mimeeq-embed-unmounted
Do not access window.mimeeqApp.observers or window.mimeeqApp.actions before mimeeq-app-loaded fires. The API object does not exist until the library finishes loading.
Events
mimeeq-app-loaded
The configurator library has loaded and window.mimeeqApp is available. This is the earliest safe point to subscribe to observers, register action callbacks, or set up other event listeners.
This event fires once per page, even if multiple <mmq-embed> elements are present. It fires during the initial embed setup, before the renderAtMount check — so you will receive this event even if the product has not yet started rendering.
Payload: none
Triggered by: The embed library completing initialization, regardless of whether the product renders immediately.
document.addEventListener('mimeeq-app-loaded', () => {
// Safe to access the API
window.mimeeqApp.observers.product.mainProductData.subscribe(({ newValue }) => {
if (newValue) {
console.log('Product loaded:', newValue.metadata.name);
}
});
});
If your integration code loads after the embed script, mimeeq-app-loaded may have already fired. Check window.mimeeqAppLoaded to handle this:
function onReady(callback) {
if (window.mimeeqAppLoaded) {
callback();
} else {
document.addEventListener('mimeeq-app-loaded', callback, { once: true });
}
}
onReady(() => {
// Guaranteed to run whether the embed loaded before or after your script
});
mimeeq-app-template-error
An error occurred while loading the embed template. This typically means the template file could not be found on the CDN or failed to parse as valid JSON. When this fires, the configurator will not render.
Payload: AppTemplateErrorEventPayload
| Field | Type | Description |
|---|---|---|
error | Error | The error that occurred during template loading |
document.addEventListener('mimeeq-app-template-error', (event) => {
const { error } = event.detail;
console.error('Embed template failed to load:', error.message);
// Show a fallback UI or report to your error tracking
showFallbackProductView();
});
mimeeq-3d-product-initialized
The 3D product has fully loaded — the canvas is rendered, product data is available, and the configurator is ready for interaction. This is the event to wait for if you need to interact with the product immediately after load, such as hiding a custom loading screen.
Fires for 3D standard and hybrid modular products. Does not fire for full modular or 2D-only products.
Payload: none
Triggered by: The WebGL engine completing scene setup and the product data being fully resolved.
// Replace the default loader with your own
document.addEventListener('mimeeq-3d-product-initialized', () => {
document.getElementById('custom-loader').style.display = 'none';
document.querySelector('mmq-embed').style.visibility = 'visible';
});
For a detailed guide on custom loading screens, see How to Use your Own Custom Loader on the help site.
mimeeq-2d-product-initialized
The 2D product has fully loaded and all image layers are rendered. This is the 2D equivalent of mimeeq-3d-product-initialized — use it to hide custom loaders for products that use layered 2D visualization instead of WebGL.
Payload: none
mimeeq-webgl-not-supported
The user's browser or device does not support WebGL. The fallback behavior depends on the product type:
Modular products cannot function without WebGL. A modal is displayed informing the user — they can dismiss it, but the configurator is effectively unusable beyond navigating back.
Standard products degrade more gracefully. The 3D canvas is not rendered, and the embed falls back in this order: if the product has 2D views, the first one is displayed; if not, the product thumbnail is shown instead. If the 3D view was supposed to be the active view (or is the only view), a toast notification appears informing the user that WebGL is not supported.
Payload: none
document.addEventListener('mimeeq-webgl-not-supported', () => {
analytics.track('webgl_not_supported');
});
mimeeq-product-list-initialized
The product list embed has loaded its products from the database and is ready for interaction. For product list embeds, this replaces the role of mimeeq-3d-product-initialized in the startup flow.
Payload: none
document.addEventListener('mimeeq-product-list-initialized', () => {
document.getElementById('list-skeleton').style.display = 'none';
document.querySelector('mmq-embed').style.opacity = '1';
});
mimeeq-embed-unmounted
The <mmq-embed> web component has been removed from the DOM and its internal state has been cleaned up. Use this to tear down any integration state tied to that embed instance.
Payload: none
document.addEventListener('mimeeq-embed-unmounted', () => {
cleanupIntegration();
});
SPA Cleanup Pattern
In single-page applications, the embed's DOM element may be created and destroyed as users navigate between views. Always clean up event listeners when the component hosting the embed is destroyed:
// React example
useEffect(() => {
const handleLoaded = () => {
// Set up observers, etc.
};
const handleUnmounted = () => {
// Clean up integration state
};
document.addEventListener('mimeeq-app-loaded', handleLoaded);
document.addEventListener('mimeeq-embed-unmounted', handleUnmounted);
return () => {
document.removeEventListener('mimeeq-app-loaded', handleLoaded);
document.removeEventListener('mimeeq-embed-unmounted', handleUnmounted);
};
}, []);
// Vue example
onMounted(() => {
document.addEventListener('mimeeq-app-loaded', handleLoaded);
document.addEventListener('mimeeq-embed-unmounted', handleUnmounted);
});
onUnmounted(() => {
document.removeEventListener('mimeeq-app-loaded', handleLoaded);
document.removeEventListener('mimeeq-embed-unmounted', handleUnmounted);
});
Legacy Lifecycle Events
The events below apply only to the legacy embed (non-web-component). They are deprecated and should not be used in new integrations. Use the web component embed and its events instead.
mimeeq-configurator-closed
The configurator modal has been closed by the user. Only fires when using the legacy embed in modal/popup mode. For the web component embed, listen for mimeeq-embed-unmounted instead.
Payload: none
mimeeq-modular-closed
The modular configurator modal has been closed. Only fires with the legacy embed. For the web component embed, listen for mimeeq-embed-unmounted instead.
Payload: none
mimeeq-tree-unmounted
An embed tree has been unmounted from the DOM. The type field identifies which embed was removed. This is the legacy embed's equivalent of mimeeq-embed-unmounted, with the added context of which embed type was removed.
Payload: TreeUnmountedEventPayload
| Field | Type | Description |
|---|---|---|
type | string | Which embed was unmounted: 'configurator', 'modular', 'product-list', 'favourites', 'login', or 'user-profile' |
Related
- Embed Types — understanding the difference between legacy and web component embeds
- Components —
<mmq-embed>and<mmq-auth>web component reference - Authentication Events —
mimeeq-auth-loadedand related auth lifecycle events - Custom Loader Guide — using lifecycle events to implement custom loading screens