Skip to main content

Events

Mimeeq Embed uses events to inform the hosting webpage about various actions or state changes within the configurator. These events enable the implementation of custom logic, such as updating the UI or triggering additional functionality based on user interactions with the configurator.

Events that can be listened to

General Notes

Events are dispatched from different parts of the Mimeeq Embed and can be listened to using standard JavaScript event listeners. These events are useful for integrating Mimeeq Embed with the host website's logic and UI. The detail property of the event contains relevant data, which can be accessed in the event handler.

Generic events

Events that are applicable to all types of Mimeeq Embed instances.

NameDescriptionData
mimeeq-app-loadedThis event is fired when configurator library was loaded.
mimeeq-tree-unmountedThis event is fired when Embed was unmounted from DOM. It returns type of unmounted embed (configurator, modular, product-list, favourites, login, user-profile). Event only triggered at legacy embed. For web-component look at mimeeq-embed-unmounted event{ type: string }
mimeeq-app-url-changeThis event is fired on each action which require URL change{variantCode: string, productId: string, key?: string, target?: string, isModular?: boolean, isPreview?: boolean }
mimeeq-embed-unmountedThis event is fired when you unmount/close embed while using web-components embed. It doesn't apply to legacy embeds

2D/3D Configurator events

Events specifically triggered within the standard 2D/3D configurator embed, providing configuration updates and user interaction notifications.

NameDescriptionData
mimeeq-enter-productThis event is fired when product was entered.{ prefix: string }
mimeeq-history-go-backThis event is fired when Back button at history widget was clicked.History Item
mimeeq-history-go-forwardThis event is fired when Redo button at history widget was clicked.History Item
mimeeq-history-resetThis event is fired when Reset button at history widget was clicked.
mimeeq-leave-productThis event is fired when Product Configurator was closed.{ prefix: string }
mimeeq-favourites-remove-productThis event is fired when Product was removed from favourites.{ prefix: string }
mimeeq-favourites-add-productThis event is fired when Product was added to favourites.{ prefix: string }
mimeeq-select-optionThis event is fired when option at Option Panel was selected.{ variantCode: string, productId: string, option: Option, groupName: string }
mimeeq-select-popular-variantThis event is fired when Popular Configurations was clicked.{ variantCode: string, productId: string, image: string }
mimeeq-show-summaryThis event is fired when Finish button was clicked.FinishEventPayload
mimeeq-open-option-panelThis event is fired when Option Panel on mobile is opened
mimeeq-configurator-closedThis event is fired when configurator modal was closed. Event only triggered at legacy embed. For web-component look at mimeeq-embed-unmounted event
mimeeq-3d-close-full-screenThis event is fired when user leave full screen view at regular product
mimeeq-3d-open-full-screenThis event is fired when user enter full screen view at regular product
mmq-action-highlight-group-onThis event is fired when you hover over mesh with Highligh Group behaviorstring - affected block ID
mmq-action-highlight-group-offThis event is fired when you leave hover over mesh with Highligh Group behaviorstring - affected block ID
mmq-action-open-groupThis event is fired when you click mesh with Open Group actionstring - affected block ID
mmq-action-scroll-to-blockThis event is fired when you click mesh with Scroll to Block actionstring - affected block ID
mmq-action-flash-highlight-blockThis event is fired after scrolling to option with Scroll to Block action
mimeeq-webgl-not-supportedThis event is fired when webgl is not supported and user try to load 3d product
mimeeq-3d-product-initializedThis event is fired after 3d or modular product is fully loaded for the 1st time. Event is triggered after canvas is ready so it can be used as pointer for hiding custom loader
mimeeq-click-hotspotThis event is fired when user click on Hotspot{ meshId: string, instanceId: string, dimensions: { x: number, y: number } }

Modular events

Events triggered exclusively by the modular configurator, providing specific modular configuration and interaction updates.

NameDescriptionData
mimeeq-modular-add-product-to-sceneThis event is fired when product was added to the scene.{ productId: string, productName: string, productUId: string }
mimeeq-modular-insert-product-to-sceneThis event is fired when product was inserted between other elements on the scene.{ productId: string, productName: string, productUId: string }
mimeeq-modular-clear-sceneThis event is fired when ClearScene button was clicked.
mimeeq-modular-clone-productThis event is fired when product was cloned.
mimeeq-modular-close-my-scenesThis event is fired when MyScenes were left.
mimeeq-modular-close-select-scene-modalThis event is fired when LoadScene modal was closed.
mimeeq-modular-close-summaryThis event is fired when Summary was closed.
mimeeq-modular-close-warningThis event is fired when Warning Modal was closed.
mimeeq-modular-closedThis event is fired when modular modal was closed. Event only triggered at legacy embed. For web-component look at mimeeq-embed-unmounted event
mimeeq-modular-create-new-sceneThis event is fired when new short code was assigned for scene. Triggers after clicking New Scene button, Clear Scene button, entering existing/default scene.{ code: string, productId: string, shortCode: string }
mimeeq-modular-enter-productThis event is fired when modular product was entered.
mimeeq-modular-flip-productThis event is fired when Flip button was clicked.
mimeeq-modular-hide-gridThis event is fired when Grid was hidden.
mimeeq-modular-history-go-backThis event is fired when Back button at history widget was clicked.
mimeeq-modular-history-go-forwardThis event is fired when Redo button at history widget was clicked.
mimeeq-modular-leave-productThis event is fired when modular product was left.
mimeeq-modular-load-sceneThis event is fired when either Default Configuration scene was selected or shared Scene link was entered.{ code: string, productId: string, shortCode: string }
mimeeq-modular-load-scene-successThis event is fired when saved Scene was loaded.
mimeeq-modular-move-productThis event is fired when product was moved.{ productId: string, productName: string, productUId: string }
mimeeq-modular-open-my-scenesThis event is fired when My Scenes were selected.
mimeeq-modular-open-summaryThis event is fired when Finish button was clicked.
mimeeq-modular-save-sceneThis event is fired when Favourite Scene was updated or created.{ shortCode: string, sceneName: string }
mimeeq-modular-select-optionThis event is fired when Option in Option Panel was selected. Only for single product.{ configurationCode: string, groupName: string, option: Option, productUId: string}
mimeeq-modular-select-option-multipleThis event is fired when Option in Option Panel was selected. Only for multiple products.{ selectedIds: string, option: Option}
mimeeq-modular-select-product-to-addThis event is fired when Product to add was chosen at Product List modal.{ productId: string, productName: string }
mimeeq-modular-set-cloneThis event is fired when Clone button was clicked.
mimeeq-modular-set-moveThis event is fired when Move button was clicked.
mimeeq-modular-set-copy-stylesThis event is fired when Copy styles button was clicked.
mimeeq-modular-remove-productThis event is fired when Remove button was clicked.
mimeeq-modular-set-slideThis event is fired when Slide button was clicked.
mimeeq-modular-set-replaceThis event is fired when Replace button was clicked.
mimeeq-modular-product-replacedThis event is fired when product on the scene was replaced with other one.{productId: string, productName: string, productUId: string }
mimeeq-modular-show-gridThis event is fired when Grid was activated.
mimeeq-modular-unselect-allThis event is fired when Unselect all action was triggered. Either by clicking button or using keyboard shortcut.
mimeeq-modular-abort-actionThis event is fired when currently active modular action was aborted.

Product view events

Events that are fired in both standard and modular configurators, applicable to all Mimeeq Embed instances.

NameDescriptionData
mimeeq-3d-after-export-imageThis event is fired when image was generated and saved.
mimeeq-3d-after-export-sceneThis event is fired when archive was generated and saved.
mimeeq-3d-before-export-imageThis event is fired before image export process was started.
mimeeq-3d-before-export-sceneThis event is fired before export process was started.
mimeeq-3d-hide-dimensionsThis event is fired when Show dimensions button was clicked. When active.
mimeeq-3d-show-dimensionsThis event is fired when Show dimensions button was clicked. When inactive.
mimeeq-3d-zoom-out-sceneThis event is fired when Zoom Out button was clicked.
mimeeq-activate-matching-optionsThis event is fired when Match Options button at Option Panel was clicked. If inactive.{groupId: string, state: boolean}
mimeeq-change-quantityThis event is fired when quantity was changed.{ quantity: number }
mimeeq-clear-filtersThis event is fired when Clear Filters button was clicked.
mimeeq-configurator-clear-historyThis event is fired when Close button was clicked on configurator in Modal mode.
mimeeq-configurator-go-backThis event is fired when back arrow in configurator was clicked.
mimeeq-deactivate-matching-optionsThis event is fired when Match Options button at Option Panel was clicked. If active.{groupId: string, state: boolean}
mimeeq-download-fileThis event is fired when image at gallery or file at files tab was downloaded.{ fileName: string, href: string }
mimeeq-open-related-productThis event is fired when Related Product was clicked.{ variantCode: string, productId: string, isModular: boolean }
mimeeq-select-companyThis event is fired when Company at Price Selector was changed.{ companyName: string, companyId: string }
mimeeq-select-price-typeThis event is fired when Price Type at Price Selector was changed.{ type: string, name: string, id: string }
mimeeq-select-filtersThis event is fired when Filters were changed.{ selectedFilters: string[] }
mimeeq-select-productThis event is fired when Select button was clicked. Only if Configurator in selector variant.FinishEventPayload
mimeeq-add-to-cartThis event is fired when Add to Cart button was clicked. Only if Configurator in basket mode.FinishEventPayload
mimeeq-show-export-pdf-modalThis event is fired when Generate PDF modal was opened.
mimeeq-select-tabThis event is fired when changing Tab.{ hash: string, index: number }
mimeeq-price-changeThis event is fired just before configurator is going to fetch price. Keep in mind that data is only passed on regular product. There is no payload for Modular.{ variantCode: string, quantity: number }
mimeeq-pdf-generate-startThis event is fired when PDF generation starts
mimeeq-pdf-generate-doneThis event is fired when PDF generation is done
mmq-webgl-support-modal-closeThis event is fired after closing No WebGL support modal

Authentication events

Events triggered by the authentication library integrated with Mimeeq Embed, used for handling user authentication and session management.

NameDescriptionData
mimeeq-auth-loadedThis event is fired when authentication library was loaded.
mimeeq-enter-forgot-passwordThis event is fired when Forgot at login form was clicked.
mimeeq-leave-forgot-passwordThis event is fired when Forgot Password form was closed.
mimeeq-login-closedThis event is fired when Login modal was closed.
mimeeq-profile-closedThis event is fired when User Profile modal was closed.
mimeeq-forgot-password-closedThis event is fired when Forgot Password modal was unmounted.
mimeeq-resend-signup-confirm-codeThis event is fired when Resend Sign Up Verification Code was triggered.{ email: string }
mimeeq-user-deletedThis event is fired when Tier2 user deleted own account.
mimeeq-user-signed-inThis event is fired after signing in.{ firstName: string, lastName: string, email: string }
mimeeq-user-signed-outThis event is fired after signing out.
mimeeq-user-updatedThis event is fired when user data was updated.

Product List and Favourites events

Events triggered within the product list and favourites list embeds, relevant for managing product selections and user favorites.

NameDescriptionData
mimeeq-close-favouritesThis event is fired when Favourites at menu on favourites list was clicked.
mimeeq-favourites-add-collectionThis event is fired when Favourite Collection was created.{ favouritesCollectionName: string, type: string }
mimeeq-favourites-copy-to-collectionThis event is fired when items were copied to another Favourite Collections.{ favouritesCollectionName: string, items: string[] }
mimeeq-favourites-move-to-collectionThis event is fired when items were moved to another Favourites Collections.{ favouritesCollectionName: string, items: string[] }
mimeeq-favourites-remove-collectionThis event is fired when Favourite Collections were removed.
mimeeq-favourites-delete-from-collectionThis event is fired when items were removed from Favourite Collections.{ items: string[] }
mimeeq-favourites-update-collectionThis event is fired when Favourite Collection was updated.{ favouritesCollectionName: string, type: string }
mimeeq-open-favouritesThis event is fired when Favourites in product list was clicked.
mimeeq-select-favourites-collectionThis event is fired when Favourite Collection selected from Menu.{ collectionPath: string }
mimeeq-product-list-select-productThis event is fired when Product was selected.{ variantCode: string, productId: string, isModular: boolean }

AR

| Name | Description | Data | | ----------------------------------- | ---------------------------------------------------------------------- | -------------------------------------------- | ---- | | mimeeq-ar-get-back-to-configuration | This event is fired when you click Edit button at AR landing page ** | | ** | | mimeeq-generate-ar-short-code | This event is fired when you generate AR code | {shortCode: string, allowScaling: boolean} |

Mimeeq Basket events

Events triggered from Mimeeq Basket

NameDescriptionData
mimeeq-basket-created{cartId: string}
mimeeq-basket-submitted{cartId: string}
mimeeq-basket-updated{quantity: number, items: [], totalPrice: number, currency: string, cartId: string}

Events that can be triggered by the host site

In addition to listening for events, Mimeeq Embed (both 2D/3D and modular versions) also listens for events triggered by the host site. These events can be used to control basket-related logic, update embed visibility, or manage other interactions between the embed and host application.

NameDescription
mimeeq-show-modularShow (if hidden) modular when Render on Mount disabled. Doesn't apply to web-component embed. Please use web-component method instead
mimeeq-show-configuratorShow (if hidden) configurator when Render on Mount disabled. Doesn't apply to web-component embed. Please use web-component method instead
mimeeq-unmountRemove all existing Mimeeq instances from the DOM including in-memory cleanup. Doesn't apply to web-component embed. Please use web-component method instead
mimeeq-hide-basket-loaderHide loader at action button next to the price at Option Panel.
mimeeq-show-basket-loaderShow loader at action button next to the price at Option Panel.
mimeeq-hide-price-loaderHide loader in price box at Option Panel.
mimeeq-show-price-loaderShow loader in price box at Option Panel.
mimeeq-hide-add-to-cart-toastHide toast with information about adding to basket.
mimeeq-show-add-to-cart-toastShow toast with information about adding to basket.
mimeeq-trigger-add-to-cartRun add to cart logic or open finish panel at Option Panel
mimeeq-show-modular-summaryShow modular summary screen
mimeeq-refresh-translationsTriggered to reload custom translations defined in window.mimeeqCustomMessages. Learn more about updating translations during runtime.

Example

Listening to an event

document.addEventListener('mimeeq-change-quantity', (e) => \{
console.log(`Quantity has been changed to $\{ e.detail \}`);
\});

Firing an event

document.dispatchEvent(new Event('mimeeq-show-modular'));

Adding Event Listener to Canvas Element

To interact with the Mimeeq Embed canvas directly (mmq-3d-canvas), you can attach event listeners to the canvas element. This allows you to capture user interactions within the Mimeeq Embed's graphical interface and implement custom logic accordingly.

info

Mimeeq Embed does not automatically trigger events on interactions with the canvas. You can easily add event listeners to the actual canvas element to capture specific user actions.

Prerequisites

Before accessing the mmq-3d-canvas element:

Accessing Canvas for 3D Products

For 3D products in Mimeeq Embed:

  • 3D Product Initialized Event: After the initial scene and configuration are fully loaded, use mimeeq-3d-product-initialized event to confirm that the canvas (mmq-3d-canvas) is available.

Accessing Canvas for Modular Configurations

For modular configurations:

  • Modular Create New Scene Event: Use mimeeq-modular-create-new-scene event to detect when a new scene is created in modular mode.
  • Modular Load Scene Success Event: Use mimeeq-modular-load-scene-success event to detect when a saved scene has been successfully loaded in modular mode.

Example

Here's how you can add event listeners to the mmq-3d-canvas element with appropriate event handling based on the embed type:

<script>
// Example: Add event listener for 3D Product Initialized
document.addEventListener('mimeeq-3d-product-initialized', () => \{
console.log('3D product initialized. Canvas is now accessible.');
// Remove custom embed loader logic or transition to interactive state

// Example: Add canvas event listeners once the 3D product is initialized
const canvas = document.getElementById('mmq-3d-canvas');
if (canvas) \{
canvas.addEventListener('click', (event) => \{
console.log('Canvas clicked!', event);
// Add your custom logic here
\});

// You can add more canvas event listeners here
\}
\});

// Example: Add event listener for Modular Create New Scene
document.addEventListener('mimeeq-modular-create-new-scene', () => \{
console.log('New scene created in modular mode.');
// Adjust UI or logic for new scene

// Example: Add canvas event listeners when creating a new scene in modular mode
const canvas = document.getElementById('mmq-3d-canvas');
if (canvas) \{
canvas.addEventListener('click', (event) => \{
console.log('Canvas clicked!', event);
// Add your custom logic here
\});

// You can add more canvas event listeners here
\}
\});

// Example: Add event listener for Modular Load Scene Success
document.addEventListener('mimeeq-modular-load-scene-success', () => \{
console.log('Scene successfully loaded in modular mode.');
// Update UI or handle loaded scene

// Example: Add canvas event listeners when scene is successfully loaded in modular mode
const canvas = document.getElementById('mmq-3d-canvas');
if (canvas) \{
canvas.addEventListener('click', (event) => \{
console.log('Canvas clicked!', event);
// Add your custom logic here
\});

// You can add more canvas event listeners here
\}
\});
</script>

In this example, event listeners for the mmq-3d-canvas are added within the callbacks of relevant events (mimeeq-3d-product-initialized, mimeeq-modular-create-new-scene, mimeeq-modular-load-scene-success) to ensure the canvas element exists before attaching listeners. Adjust your custom logic and event handling as per your application's requirements.