Modular Events

Modular events fire during the configuration of modular products — products composed of multiple items arranged on a scene. The modular configurator has its own interaction model: users add, move, replace, and remove products on a 2D or 3D scene, configure individual items or groups of items, and manage saved scenes.

This page covers events specific to the modular configurator. Several events are shared with the standard configurator and are documented on the Configuration Events page — see Shared Events below for the full list.

Scene Composition Flow

When the user builds or modifies the scene, events fire in the order products are manipulated:

  User opens modular product
       │
       ▼
  mimeeq-modular-enter-product
       │
       ▼
  ┌─── Scene is loaded (default or saved) ───┐
  │                                           │
  ▼                                           ▼
  mimeeq-modular-create-new-scene      mimeeq-modular-load-scene
  (new short code assigned)                   │
                                              ▼
                                    mimeeq-modular-load-scene-success
       │
       ▼
  User adds products to the scene
       │
       ├── from product list ──► mimeeq-modular-select-product-to-add
       │                                │
       │                                ▼
       │                    mimeeq-modular-add-product-to-scene
       │
       ├── insert between ──► mimeeq-modular-insert-product-to-scene
       │
       ├── move ────────────► mimeeq-modular-move-product
       │
       ├── clone ───────────► mimeeq-modular-clone-product
       │
       ├── flip ────────────► mimeeq-modular-flip-product
       │
       ├── replace ─────────► mimeeq-modular-product-replaced
       │
       └── remove ──────────► mimeeq-modular-remove-product

Configuration Flow

Configuring products on the modular scene works differently from standard products. The user selects one or more products on the scene, then changes options. The event that fires depends on how many products are selected:

  User selects product(s) on scene
       │
       ├── single product selected ──► mimeeq-modular-select-option
       │                                (includes productUId and configurationCode)
       │
       └── multiple products selected ► mimeeq-modular-select-option-multiple
                                         (includes comma-separated selectedIds)
       │
       ▼
  mimeeq-price-change (no payload for modular)
       │
       ▼
  pricing observer updates with new scene total

Scene Management Flow

Saved scenes let users preserve and share their compositions. The scene lifecycle has a clear event trail:

  User saves scene ──────────► mimeeq-modular-save-scene
                                (shortCode + sceneName)

  User creates new scene ────► mimeeq-modular-create-new-scene
  (New Scene / Clear Scene)    (new shortCode assigned)

  User loads saved scene ────► mimeeq-modular-load-scene
                                      │
                                      ▼
                              mimeeq-modular-load-scene-success

  User clears scene ─────────► mimeeq-modular-clear-scene
                                      │
                                      ▼
                              mimeeq-modular-create-new-scene
                               (fresh shortCode assigned)

mimeeq-modular-enter-product

The modular product configurator has opened. This is the modular equivalent of mimeeq-enter-product for standard products. It fires after the embed resolves the modular product and begins rendering the scene.

Payload: none

document.addEventListener('mimeeq-modular-enter-product', () => {
  // Show modular-specific UI controls (scene toolbar, My Scenes button, etc.)
  document.getElementById('modular-controls').style.display = 'block';

  analytics.track('modular_configurator_opened');
});

mimeeq-modular-leave-product

The modular product configurator has been closed or the user navigated away. Use this to tear down any modular-specific integration state. Fires before mimeeq-embed-unmounted in the teardown flow.

Payload: none

document.addEventListener('mimeeq-modular-leave-product', () => {
  document.getElementById('modular-controls').style.display = 'none';

  // Save any unsaved scene state to your backend
  if (hasUnsavedChanges) {
    autoSaveScene();
  }
});

Scene Composition Events

mimeeq-modular-select-product-to-add

A product was chosen from the product list modal to be added to the scene. This fires when the user picks the product — mimeeq-modular-add-product-to-scene follows once it's actually placed on the scene. There can be a gap between these two events if the product needs to load its 3D assets.

Payload: ModularSelectProductToAddEventPayload

Field	Type	Description
`productId`	`string`	Unique identifier of the chosen product
`productName`	`string`	Display name of the product

// Track which products users are adding to understand composition patterns
document.addEventListener('mimeeq-modular-select-product-to-add', (event) => {
  const { productId, productName } = event.detail;
  analytics.track('modular_product_selected', { productId, productName });
});

mimeeq-modular-add-product-to-scene

A product was added to the modular scene. The productUId is the runtime instance identifier — it's unique per placement on the scene, even if the same product type is added multiple times. Use it to track individual items.

Payload: ModularProductSceneEventPayload

Field	Type	Description
`productId`	`string`	Unique identifier of the product type
`productName`	`string`	Display name of the product
`productUId`	`string`	Runtime instance identifier on the scene (unique per placement)

// Maintain an external scene inventory
const sceneInventory = new Map();

document.addEventListener('mimeeq-modular-add-product-to-scene', (event) => {
  const { productId, productName, productUId } = event.detail;
  sceneInventory.set(productUId, { productId, productName });
  updateSceneCount(sceneInventory.size);
});

document.addEventListener('mimeeq-modular-remove-product', () => {
  // Note: remove doesn't carry a payload, so you may need
  // the observer to know which product was removed
});

mimeeq-modular-insert-product-to-scene

A product was inserted between existing elements on the modular scene. This is different from adding to the end — the product was placed at a specific position in the sequence. The payload is identical to add-product-to-scene.

Payload: ModularProductSceneEventPayload

mimeeq-modular-move-product

A product was moved to a new position on the scene. The layout order changed but no products were added or removed.

Payload: ModularProductSceneEventPayload

mimeeq-modular-product-replaced

A product on the scene was replaced with a different one. The old product is removed and the new one takes its position. The payload describes the new product that replaced the old one.

Payload: ModularProductSceneEventPayload

document.addEventListener('mimeeq-modular-product-replaced', (event) => {
  const { productId, productName, productUId } = event.detail;
  console.log(`Position ${productUId} now contains "${productName}"`);

  // Update your external scene representation
  sceneInventory.set(productUId, { productId, productName });
});

mimeeq-modular-clone-product

A product on the scene was cloned — a copy was created with the same configuration as the original. The clone gets its own productUId.

Payload: none

mimeeq-modular-remove-product

A product was removed from the scene.

Payload: none

mimeeq-modular-flip-product

A product on the scene was flipped (mirrored). This is a visual transformation — the product's configuration doesn't change, only its orientation on the scene.

Payload: none

mimeeq-modular-clear-scene

All products were removed from the scene. This fires when the user clicks the Clear Scene button. A mimeeq-modular-create-new-scene event follows immediately as a fresh short code is assigned to the empty scene.

Payload: none

document.addEventListener('mimeeq-modular-clear-scene', () => {
  // Reset your external scene state
  sceneInventory.clear();
  updateSceneCount(0);
});

Option Selection Events

mimeeq-modular-select-option

An option was selected in the option panel for a single selected product on the scene. This is the modular equivalent of mimeeq-select-option for standard products, but it includes the productUId to identify which specific product instance on the scene received the change, and configurationCode for the updated SKU-style code.

Payload: ModularSelectOptionEventPayload

Field	Type	Description
`configurationCode`	`string`	Updated configuration code for the product instance
`groupName`	`string`	Display name of the option block
`option`	`OptionSetOption`	The option object that was selected
`productUId`	`string`	Runtime instance identifier of the product on the scene

document.addEventListener('mimeeq-modular-select-option', (event) => {
  const { productUId, groupName, option, configurationCode } = event.detail;

  analytics.track('modular_option_selected', {
    productInstance: productUId,
    blockName: groupName,
    optionCode: option.code,
    optionName: option.name,
    newConfigCode: configurationCode,
  });
});

mimeeq-modular-select-option-multiple

An option was applied to multiple selected products at once. When the user selects several products on the scene and then picks an option, that option is applied to all of them simultaneously. The selectedIds is a comma-separated string of productUId values.

Payload: ModularSelectOptionMultipleEventPayload

Field	Type	Description
`selectedIds`	`string`	Comma-separated list of runtime instance identifiers that received the option
`option`	`OptionSetOption`	The option object that was applied to all selected products

document.addEventListener('mimeeq-modular-select-option-multiple', (event) => {
  const { selectedIds, option } = event.detail;
  const ids = selectedIds.split(',');

  console.log(`Applied "${option.name}" to ${ids.length} products`);

  // Update configuration state for each affected product
  ids.forEach((uid) => {
    updateProductConfig(uid, option);
  });
});

Scene Management Events

mimeeq-modular-load-scene

A saved scene or default configuration was loaded. This fires when the user enters via a shared scene link, selects a default configuration, or loads a saved scene from My Scenes. The shortCode identifies the scene and can be used to reconstruct a share URL.

Payload: ModularLoadSceneEventPayload

Field	Type	Description
`code`	`string`	Scene code
`productId`	`string`	Product identifier for the modular product
`shortCode`	`string`	Short code for the loaded scene

document.addEventListener('mimeeq-modular-load-scene', (event) => {
  const { shortCode, productId } = event.detail;

  // Update the browser URL to reflect the loaded scene
  const url = new URL(window.location);
  url.searchParams.set('scene', shortCode);
  window.history.replaceState({}, '', url);

  analytics.track('modular_scene_loaded', { shortCode, productId });
});

mimeeq-modular-load-scene-success

A saved scene finished loading successfully. This fires after mimeeq-modular-load-scene once all products on the scene have been fully resolved and placed. Use this as the "scene ready" signal — equivalent to what mimeeq-3d-product-initialized is for standard products.

Payload: none

document.addEventListener('mimeeq-modular-load-scene-success', () => {
  // Scene is fully loaded — safe to interact with scene data
  document.getElementById('scene-loader').style.display = 'none';
});

mimeeq-modular-save-scene

A scene was saved or updated as a favourite. The user provided a name and the scene received a persistent short code that can be used to reload it later or share it via URL.

Payload: ModularSaveSceneEventPayload

Field	Type	Description
`shortCode`	`string`	Short code of the saved scene
`sceneName`	`string`	Display name the user gave to the scene

document.addEventListener('mimeeq-modular-save-scene', (event) => {
  const { shortCode, sceneName } = event.detail;

  // Show confirmation with a shareable link
  const shareUrl = `${window.location.origin}/configurator?scene=${shortCode}`;
  showNotification(`"${sceneName}" saved! Share link: ${shareUrl}`);

  // Persist to your backend for the user's account
  saveSceneToUserProfile(shortCode, sceneName);
});

mimeeq-modular-create-new-scene

A new short code was assigned for the scene. This fires in several situations: after clicking New Scene, after Clear Scene (a fresh scene still needs a code), or when entering an existing or default scene configuration. The payload has the same shape as mimeeq-modular-load-scene.

Payload: ModularLoadSceneEventPayload

Field	Type	Description
`code`	`string`	Scene code
`productId`	`string`	Product identifier
`shortCode`	`string`	Newly assigned short code

These signal events fire when the user activates toolbar actions or opens/closes panels. None carry a payload — they're useful for tracking engagement patterns and syncing custom UI state.

Action Activation

When the user clicks a toolbar button, the corresponding action mode is activated. Only one action can be active at a time. Clicking a different action deactivates the previous one.

Event	Description
`mimeeq-modular-set-clone`	Clone mode activated — next click on scene clones the target product
`mimeeq-modular-set-move`	Move mode activated — user can drag products to new positions
`mimeeq-modular-set-copy-styles`	Copy Styles mode activated — copies configuration from one product to others
`mimeeq-modular-set-slide`	Slide mode activated — user can slide products along the scene axis
`mimeeq-modular-set-replace`	Replace mode activated — next product selection replaces the target
`mimeeq-modular-abort-action`	The currently active action was cancelled (via button click or keyboard shortcut)

// Track which toolbar actions users actually use
const toolbarActions = [
  'mimeeq-modular-set-clone',
  'mimeeq-modular-set-move',
  'mimeeq-modular-set-copy-styles',
  'mimeeq-modular-set-slide',
  'mimeeq-modular-set-replace',
  'mimeeq-modular-abort-action',
];

toolbarActions.forEach((eventName) => {
  document.addEventListener(eventName, () => {
    const action = eventName.replace('mimeeq-modular-', '');
    analytics.track('modular_toolbar_action', { action });
  });
});

Selection & Grid

Event	Description
`mimeeq-modular-unselect-all`	All products deselected on the scene (via button or keyboard shortcut)
`mimeeq-modular-show-grid`	Grid overlay activated — helps users align products on the scene
`mimeeq-modular-hide-grid`	Grid overlay hidden

History

Modular has its own history stack, separate from the standard configurator's history. These events track undo/redo within the modular scene.

Event	Description
`mimeeq-modular-history-go-back`	Undo — reverts the last scene change
`mimeeq-modular-history-go-forward`	Redo — reapplies the last undone change

note

Unlike the standard configurator's mimeeq-history-go-back and mimeeq-history-go-forward which carry a HistoryItem payload, the modular history events do not carry a payload.

Panels & Modals

Event	Description
`mimeeq-modular-open-my-scenes`	My Scenes panel opened — user is browsing saved scenes
`mimeeq-modular-close-my-scenes`	My Scenes panel closed
`mimeeq-modular-close-select-scene-modal`	Load Scene modal closed
`mimeeq-modular-open-summary`	Finish button clicked — summary/finish screen opened
`mimeeq-modular-close-summary`	Summary/finish screen closed
`mimeeq-modular-close-warning`	Warning modal closed (e.g., unsaved changes confirmation)
`mmq-webgl-support-modal-close`	The "WebGL not supported" modal was dismissed. For modular products, WebGL is required — the configurator cannot function without it. See Lifecycle Events for the full fallback behavior

Shared Events

The following events fire in both the standard and modular configurator. They are fully documented on the Configuration Events page — the descriptions here are brief reminders.

Event	Payload	Notes for modular
`mimeeq-select-tab`	`SelectTabEventPayload`	Same behavior — tabs exist in modular too
`mimeeq-price-change`	`PriceChangeEventPayload`	Fires without a payload for modular — the variant/quantity fields only apply to standard products
`mimeeq-change-quantity`	`ChangeQuantityEventPayload`	Same behavior
`mimeeq-select-filters`	`SelectFiltersEventPayload`	Same behavior
`mimeeq-clear-filters`	none	Same behavior
`mimeeq-deactivate-matching-options`	`DeactivateMatchingOptionsEventPayload`	Same behavior
`mimeeq-activate-matching-options`	`DeactivateMatchingOptionsEventPayload`	Same behavior
`mimeeq-download-file`	`DownloadFileEventPayload`	Same behavior
`mimeeq-open-related-product`	`OpenRelatedProductEventPayload`	Same behavior
`mimeeq-configurator-go-back`	none	Same behavior
`mimeeq-configurator-clear-history`	none	Same behavior
`mimeeq-open-option-panel`	none	Same behavior — fires when any block group accordion is opened
`mimeeq-3d-show-dimensions`	none	Same behavior
`mimeeq-3d-hide-dimensions`	none	Same behavior
`mimeeq-3d-zoom-out-scene`	none	Same behavior

Configuration Events — standard product events (shared events are documented there)
Lifecycle Events — startup and teardown flow
Finish & Cart Events — what happens after the user finishes configuring a modular scene
Observers — continuous state tracking, including optionSets.selectedOptions which tracks all product instances
Actions — programmatic scene manipulation with markOptionModular

Scene Composition Flow​

Configuration Flow​

Scene Management Flow​

Navigation Events​

mimeeq-modular-enter-product​

mimeeq-modular-leave-product​

Scene Composition Events​

mimeeq-modular-select-product-to-add​

mimeeq-modular-add-product-to-scene​

mimeeq-modular-insert-product-to-scene​

mimeeq-modular-move-product​

mimeeq-modular-product-replaced​

mimeeq-modular-clone-product​

mimeeq-modular-remove-product​

mimeeq-modular-flip-product​

mimeeq-modular-clear-scene​

Option Selection Events​

mimeeq-modular-select-option​

mimeeq-modular-select-option-multiple​

Scene Management Events​

mimeeq-modular-load-scene​

mimeeq-modular-load-scene-success​

mimeeq-modular-save-scene​

mimeeq-modular-create-new-scene​

Toolbar & UI Events​

Action Activation​

Selection & Grid​

History​

Panels & Modals​

Shared Events​

Related​

Scene Composition Flow

Configuration Flow

Scene Management Flow

Navigation Events

mimeeq-modular-enter-product

mimeeq-modular-leave-product

Scene Composition Events

mimeeq-modular-select-product-to-add

mimeeq-modular-add-product-to-scene

mimeeq-modular-insert-product-to-scene

mimeeq-modular-move-product

mimeeq-modular-product-replaced

mimeeq-modular-clone-product

mimeeq-modular-remove-product

mimeeq-modular-flip-product

mimeeq-modular-clear-scene

Option Selection Events

mimeeq-modular-select-option

mimeeq-modular-select-option-multiple

Scene Management Events

mimeeq-modular-load-scene

mimeeq-modular-load-scene-success

mimeeq-modular-save-scene

mimeeq-modular-create-new-scene

Toolbar & UI Events

Action Activation

Selection & Grid

History

Panels & Modals

Shared Events

Related