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.

Name	Description	Data
mimeeq-app-loaded	This event is fired when configurator library was loaded.
mimeeq-tree-unmounted	This 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-change	This event is fired on each action which require URL change	{variantCode: string, productId: string, key?: string, target?: string, isModular?: boolean, isPreview?: boolean }
mimeeq-embed-unmounted	This 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.

Name	Description	Data
mimeeq-enter-product	This event is fired when product was entered.	{ prefix: string }
mimeeq-history-go-back	This event is fired when Back button at history widget was clicked.	History Item
mimeeq-history-go-forward	This event is fired when Redo button at history widget was clicked.	History Item
mimeeq-history-reset	This event is fired when Reset button at history widget was clicked.
mimeeq-leave-product	This event is fired when Product Configurator was closed.	{ prefix: string }
mimeeq-favourites-remove-product	This event is fired when Product was removed from favourites.	{ prefix: string }
mimeeq-favourites-add-product	This event is fired when Product was added to favourites.	{ prefix: string }
mimeeq-select-option	This event is fired when option at Option Panel was selected.	{ variantCode: string, productId: string, option: Option, groupName: string }
mimeeq-select-popular-variant	This event is fired when Popular Configurations was clicked.	{ variantCode: string, productId: string, image: string }
mimeeq-show-summary	This event is fired when Finish button was clicked.	FinishEventPayload
mimeeq-open-option-panel	This event is fired when Option Panel on mobile is opened
mimeeq-configurator-closed	This 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-screen	This event is fired when user leave full screen view at regular product
mimeeq-3d-open-full-screen	This event is fired when user enter full screen view at regular product
mmq-action-highlight-group-on	This event is fired when you hover over mesh with Highligh Group behavior	string - affected block ID
mmq-action-highlight-group-off	This event is fired when you leave hover over mesh with Highligh Group behavior	string - affected block ID
mmq-action-open-group	This event is fired when you click mesh with Open Group action	string - affected block ID
mmq-action-scroll-to-block	This event is fired when you click mesh with Scroll to Block action	string - affected block ID
mmq-action-flash-highlight-block	This event is fired after scrolling to option with Scroll to Block action
mimeeq-webgl-not-supported	This event is fired when webgl is not supported and user try to load 3d product
mimeeq-3d-product-initialized	This 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-hotspot	This 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.

Name	Description	Data
mimeeq-modular-add-product-to-scene	This event is fired when product was added to the scene.	{ productId: string, productName: string, productUId: string }
mimeeq-modular-insert-product-to-scene	This event is fired when product was inserted between other elements on the scene.	{ productId: string, productName: string, productUId: string }
mimeeq-modular-clear-scene	This event is fired when ClearScene button was clicked.
mimeeq-modular-clone-product	This event is fired when product was cloned.
mimeeq-modular-close-my-scenes	This event is fired when MyScenes were left.
mimeeq-modular-close-select-scene-modal	This event is fired when LoadScene modal was closed.
mimeeq-modular-close-summary	This event is fired when Summary was closed.
mimeeq-modular-close-warning	This event is fired when Warning Modal was closed.
mimeeq-modular-closed	This 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-scene	This 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-product	This event is fired when modular product was entered.
mimeeq-modular-flip-product	This event is fired when Flip button was clicked.
mimeeq-modular-hide-grid	This event is fired when Grid was hidden.
mimeeq-modular-history-go-back	This event is fired when Back button at history widget was clicked.
mimeeq-modular-history-go-forward	This event is fired when Redo button at history widget was clicked.
mimeeq-modular-leave-product	This event is fired when modular product was left.
mimeeq-modular-load-scene	This 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-success	This event is fired when saved Scene was loaded.
mimeeq-modular-move-product	This event is fired when product was moved.	{ productId: string, productName: string, productUId: string }
mimeeq-modular-open-my-scenes	This event is fired when My Scenes were selected.
mimeeq-modular-open-summary	This event is fired when Finish button was clicked.
mimeeq-modular-save-scene	This event is fired when Favourite Scene was updated or created.	{ shortCode: string, sceneName: string }
mimeeq-modular-select-option	This 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-multiple	This event is fired when Option in Option Panel was selected. Only for multiple products.	{ selectedIds: string, option: Option}
mimeeq-modular-select-product-to-add	This event is fired when Product to add was chosen at Product List modal.	{ productId: string, productName: string }
mimeeq-modular-set-clone	This event is fired when Clone button was clicked.
mimeeq-modular-set-move	This event is fired when Move button was clicked.
mimeeq-modular-set-copy-styles	This event is fired when Copy styles button was clicked.
mimeeq-modular-remove-product	This event is fired when Remove button was clicked.
mimeeq-modular-set-slide	This event is fired when Slide button was clicked.
mimeeq-modular-set-replace	This event is fired when Replace button was clicked.
mimeeq-modular-product-replaced	This event is fired when product on the scene was replaced with other one.	{productId: string, productName: string, productUId: string }
mimeeq-modular-show-grid	This event is fired when Grid was activated.
mimeeq-modular-unselect-all	This event is fired when Unselect all action was triggered. Either by clicking button or using keyboard shortcut.
mimeeq-modular-abort-action	This 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.

Name	Description	Data
mimeeq-3d-after-export-image	This event is fired when image was generated and saved.
mimeeq-3d-after-export-scene	This event is fired when archive was generated and saved.
mimeeq-3d-before-export-image	This event is fired before image export process was started.
mimeeq-3d-before-export-scene	This event is fired before export process was started.
mimeeq-3d-hide-dimensions	This event is fired when Show dimensions button was clicked. When active.
mimeeq-3d-show-dimensions	This event is fired when Show dimensions button was clicked. When inactive.
mimeeq-3d-zoom-out-scene	This event is fired when Zoom Out button was clicked.
mimeeq-activate-matching-options	This event is fired when Match Options button at Option Panel was clicked. If inactive.	{groupId: string, state: boolean}
mimeeq-change-quantity	This event is fired when quantity was changed.	{ quantity: number }
mimeeq-clear-filters	This event is fired when Clear Filters button was clicked.
mimeeq-configurator-clear-history	This event is fired when Close button was clicked on configurator in Modal mode.
mimeeq-configurator-go-back	This event is fired when back arrow in configurator was clicked.
mimeeq-deactivate-matching-options	This event is fired when Match Options button at Option Panel was clicked. If active.	{groupId: string, state: boolean}
mimeeq-download-file	This event is fired when image at gallery or file at files tab was downloaded.	{ fileName: string, href: string }
mimeeq-open-related-product	This event is fired when Related Product was clicked.	{ variantCode: string, productId: string, isModular: boolean }
mimeeq-select-company	This event is fired when Company at Price Selector was changed.	{ companyName: string, companyId: string }
mimeeq-select-price-type	This event is fired when Price Type at Price Selector was changed.	{ type: string, name: string, id: string }
mimeeq-select-filters	This event is fired when Filters were changed.	{ selectedFilters: string[] }
mimeeq-select-product	This event is fired when Select button was clicked. Only if Configurator in selector variant.	FinishEventPayload
mimeeq-add-to-cart	This event is fired when Add to Cart button was clicked. Only if Configurator in basket mode.	FinishEventPayload
mimeeq-show-export-pdf-modal	This event is fired when Generate PDF modal was opened.
mimeeq-select-tab	This event is fired when changing Tab.	{ hash: string, index: number }
mimeeq-price-change	This 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-start	This event is fired when PDF generation starts
mimeeq-pdf-generate-done	This event is fired when PDF generation is done
mmq-webgl-support-modal-close	This 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.

Name	Description	Data
mimeeq-auth-loaded	This event is fired when authentication library was loaded.
mimeeq-enter-forgot-password	This event is fired when Forgot at login form was clicked.
mimeeq-leave-forgot-password	This event is fired when Forgot Password form was closed.
mimeeq-login-closed	This event is fired when Login modal was closed.
mimeeq-profile-closed	This event is fired when User Profile modal was closed.
mimeeq-forgot-password-closed	This event is fired when Forgot Password modal was unmounted.
mimeeq-resend-signup-confirm-code	This event is fired when Resend Sign Up Verification Code was triggered.	{ email: string }
mimeeq-user-deleted	This event is fired when Tier2 user deleted own account.
mimeeq-user-signed-in	This event is fired after signing in.	{ firstName: string, lastName: string, email: string }
mimeeq-user-signed-out	This event is fired after signing out.
mimeeq-user-updated	This 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.

Name	Description	Data
mimeeq-close-favourites	This event is fired when Favourites at menu on favourites list was clicked.
mimeeq-favourites-add-collection	This event is fired when Favourite Collection was created.	{ favouritesCollectionName: string, type: string }
mimeeq-favourites-copy-to-collection	This event is fired when items were copied to another Favourite Collections.	{ favouritesCollectionName: string, items: string[] }
mimeeq-favourites-move-to-collection	This event is fired when items were moved to another Favourites Collections.	{ favouritesCollectionName: string, items: string[] }
mimeeq-favourites-remove-collection	This event is fired when Favourite Collections were removed.
mimeeq-favourites-delete-from-collection	This event is fired when items were removed from Favourite Collections.	{ items: string[] }
mimeeq-favourites-update-collection	This event is fired when Favourite Collection was updated.	{ favouritesCollectionName: string, type: string }
mimeeq-open-favourites	This event is fired when Favourites in product list was clicked.
mimeeq-select-favourites-collection	This event is fired when Favourite Collection selected from Menu.	{ collectionPath: string }
mimeeq-product-list-select-product	This 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

Name	Description	Data
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.

Name	Description
mimeeq-show-modular	Show (if hidden) modular when Render on Mount disabled. Doesn't apply to web-component embed. Please use web-component method instead
mimeeq-show-configurator	Show (if hidden) configurator when Render on Mount disabled. Doesn't apply to web-component embed. Please use web-component method instead
mimeeq-unmount	Remove 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-loader	Hide loader at action button next to the price at Option Panel.
mimeeq-show-basket-loader	Show loader at action button next to the price at Option Panel.
mimeeq-hide-price-loader	Hide loader in price box at Option Panel.
mimeeq-show-price-loader	Show loader in price box at Option Panel.
mimeeq-hide-add-to-cart-toast	Hide toast with information about adding to basket.
mimeeq-show-add-to-cart-toast	Show toast with information about adding to basket.
mimeeq-trigger-add-to-cart	Run add to cart logic or open finish panel at Option Panel
mimeeq-show-modular-summary	Show modular summary screen
mimeeq-refresh-translations	Triggered 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.