Skip to main content

Events

Mimeeq Embed uses events to inform webpage about some actions or state changes in it. You can use these events to apply some custom logic.

Events that can be listened to

Generic events

Events fired in both standard and modular configurators

NameDescriptionData
mimeeq-app-loadedThis event is fired when configurator library was loaded.
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-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-click-hotspotThis event is fired when user click on Hotspot{ meshId: string, instanceId: string, dimensions: { x: number, y: 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-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-pdf-generate-startThis event is fired when PDF generation starts
mimeeq-pdf-generate-doneThis event is fired when PDF generation is done
mimeeq-embed-unmountedThis event is fired when you unmount/close embed while using web-components embed. It doesn't apply to legacy embeds
mimeeq-ar-get-back-to-configurationThis event is fired when you click Edit button at AR landing page
mimeeq-generate-ar-short-codeThis event is fired when you generate AR code{shortCode: string, allowScaling: boolean}
mmq-webgl-support-modal-closeThis event is fired after closing No WebGL support modal

Modular events

Events triggered only by modular configurator

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-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.
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-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.

Authentication events

Events triggered by authentication library and functions

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 on product list and favourites list embeds

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 }

2d/3d Configurator events

Events triggered only on standard configurator embed

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

Events that can be triggered by the host site

Apart from triggering event Mimeeq Embed (2d/3d and modular) also listen to some events. These can be mostly used to control basket related logic or visibility of embed itself.

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
info

See utils section for other controls

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'));