Skip to main content

Overview

The MMQ Embed web component offers a powerful solution for integrating product-related functionalities into your website or application. Whether you're a web developer or a business professional, MMQ Embed provides a seamless way to enhance your online platform. One of its key strengths lies in its flexibility, allowing for dynamic adjustments to key parameters during runtime.

Getting Started

To begin using the MMQ Embed component, you'll typically receive a generated HTML snippet from our Mimeeq App. This snippet will include the mmq-embed element with prefilled parameters such as short-code and template. Additionally, the language parameter may be preset, providing a localized experience for your users.

<mmq-embed
short-code="YOUR_SHORT_CODE"
template="YOUR_TEMPLATE"
language="YOUR_LANGUAGE"></mmq-embed>

However, if you're integrating MMQ Embed into your own application, you may have dynamic requirements where the short-code, template, or language values need to change during runtime. Not to worry – MMQ Embed fully supports this dynamic behavior. You can update these parameters on the fly, and the component will adjust accordingly, ensuring a seamless user experience.

This runtime flexibility empowers you to tailor the MMQ Embed component to match your application's evolving needs, whether it's switching templates based on user preferences or adapting to different languages on the fly. Simply modify the relevant parameters as needed, and let MMQ Embed handle the rest.

Dynamic Parameter Modification

In certain scenarios, you might need to modify the parameters of the MMQ Embed component dynamically. Here's how you can achieve this:

Updating Parameters at Runtime

You can dynamically update parameters such as short-code, template, or language during the execution of your application. This allows for real-time adjustments to the MMQ Embed component's behavior without requiring a page reload.

Seamless Integration

Whether you're building a web application or incorporating MMQ Embed into an existing platform, the ability to modify parameters on the fly ensures a seamless integration experience. Your application can respond dynamically to user interactions or backend changes, providing a personalized and responsive environment for your users.

Properties

The MMQ Embed component offers a variety of properties that allow you to customize its appearance and behavior.

Each of these properties can be also set on your Embed Template in Mimeeq App.

Below is a table describing each property:

PropertyAttributeDescriptionTypeDefault
accentColoraccent-colorCustom accent color to be used in the UI.stringundefined
accentTextColoraccent-text-colorCustom text color for controls with accent color as background.stringundefined
adjustToContaineradjust-to-containerIf set to true, adjusts the configurator to the container rather than using predefined min/max sizes.booleanundefined
backgroundColorbackground-colorCustom background color for the embedded component.stringundefined
basketbasketIf set to true, enables the configurator to display a basket for managing selected products.booleanundefined
basketButtonColorbasket-button-colorBackground color for the Mimeeq basket button.stringundefined
basketForLoggedInOnlybasket-for-logged-in-onlyIf set to true, the Mimeeq Basket will only be displayed for authenticated users.booleanundefined
cartAtcart-atSpecifies where to display the "Add to Cart" button.AddToCartPlacement.FINISH | AddToCartPlacement.SUMMARY_SCREENundefined
cartAtModularcart-at-modularSpecifies where to display the "Add to Cart" button for modular products only.AddToCartPlacement.FINISH | AddToCartPlacement.SUMMARY_SCREENundefined
cartLoaderOnlycart-loader-onlyIf set to true, hides text on buttons when displaying loader.booleanundefined
configurationCodeconfiguration-codeDefault configuration code to be used in a single product embed.stringundefined
customCsscustom-cssCustom CSS string to be applied to the embedded component.stringundefined
customJscustom-jsCustom JavaScript string to be executed in the embedded component.stringundefined
customUicustom-uiIf set to true, renders only the canvas, useful for creating custom UIs.booleanundefined
customUiMainFilescustom-ui-main-filesCustom UI main files to load for a custom UI.stringundefined
customUiTemplatecustom-ui-templateCustom UI HTML template to be rendered when customUi is set to true.stringundefined
exploreProductsLocationexplore-products-locationSpecifies the location to take the user after clicking the "Explore" button in the Mimeeq Basket.stringundefined
hideARIconhide-arIf set to true, hides the "View in AR" button from the UI.booleanundefined
hideCollectionNamehide-collection-nameIf set to true, hides the collection name above the product name.booleanundefined
hideConfiguratorhide-configuratorIf set to true, hides the whole configurator, leaving only tabs and related products.booleanundefined
hideControlshide-controlsIf set to true, hides all controls on the configurator.booleanundefined
hideDeliveryhide-deliveryIf set to true, hides the delivery information from the UI.booleanundefined
hideDimensionshide-dimensionsIf set to true, hides the "Show Dimensions" button from the UI.booleanundefined
hideDragInfohide-drag-infoIf set to true, hides the drag info at the bottom of the canvas.booleanundefined
hideExporthide-exportIf set to true, hides the export model button from the UI.booleanundefined
hideExportImagehide-export-imageIf set to true, hides the export image button from the UI.booleanundefined
hideFavouriteshide-favouritesIf set to true, hides the favorites button on the canvas.booleanundefined
hideFavouritesButtonhide-favourites-buttonIf set to true, hides the favorites button on the configurator.booleanundefined
hideFinishhide-finishIf set to true, hides the finish/add to cart button from the UI.booleanundefined
hideFinishScreenhide-summary-screenIf set to true, hides the summary screen from the UI.booleanundefined
hideFooterhide-footerIf set to true, hides the configurator canvas footer from the UI.booleanundefined
hideFullScreenhide-full-screenIf set to true, hides the full-screen button from the UI.booleanundefined
hideHeaderhide-headerIf set to true, hides the configurator header from the UI.booleanundefined
hideHistoryhide-historyIf set to true, hides all history-related buttons from the UI.booleanundefined
hideHotSpotshide-3d-informationIf set to true, hides the 3D information on the 3D canvas for products with these configured.booleanundefined
hideMeshHighlighthide-mesh-highlightIf set to true, hides the mesh highlight on the canvas for products with mesh highlight rules.booleanundefined
hideOptionPanelhide-option-panelIf set to true, hides the whole option panel from the UI.booleanundefined
hidePdfDeliveryInfohide-pdf-delivery-infoIf set to true, hides the delivery information in the PDF.booleanundefined
hidePdfDescriptionhide-pdf-descriptionIf set to true, hides the product description in the PDF.booleanundefined
hidePdfOnCanvashide-pdf-canvasIf set to true, hides the export PDF button on the canvas.booleanundefined
hidePdfOnFinishhide-pdf-summaryIf set to true, hides the export PDF button on the summary screen.booleanundefined
hidePdfPricehide-pdf-priceIf set to true, hides the price information in the PDF.booleanundefined
hidePdfProductNamehide-pdf-product-nameIf set to true, hides the product name in the PDF.booleanundefined
hidePdfQuantityhide-pdf-quantityIf set to true, hides the quantity information in the PDF.booleanundefined
hidePdfQuantityBreakshide-pdf-quantity-breaksIf set to true, hides the price quantity breaks in the PDF.booleanundefined
hidePdfSkuhide-pdf-skuIf set to true, hides the SKU in the PDF.booleanundefined
hidePricehide-priceIf set to true, hides all prices from the UI.booleanundefined
hideProductNamehide-product-nameIf set to true, hides the product name from the UI.booleanundefined
hideQtyhide-qtyIf set to true, hides the quantity buttons from the UI.booleanundefined
hideRedohide-redoIf set to true, hides the redo button from the UI.booleanundefined
hideRelatedhide-relatedIf set to true, hides the related products section from the UI.booleanundefined
hideResethide-resetIf set to true, hides the history reset button from the UI.booleanundefined
hideShareOnCanvashide-share-canvasIf set to true, hides the share button on the canvas.booleanundefined
hideShareOnFinishhide-share-summaryIf set to true, hides the share button on the summary screen.booleanundefined
hideTabshide-tabsIf set to true, hides the tabs section from the UI.booleanundefined
hideUndohide-undoIf set to true, hides the undo button from the UI.booleanundefined
hideWarning3dhide-warning-3dIf set to true, hides the 3D warning icon from the UI.booleanundefined
hideWarningIconshide-warning-iconsIf set to true, hides the warning icons on the modular canvas.booleanundefined
hideZoomhide-zoomIf set to true, hides the zoom out button from the UI.booleanundefined
hideZoomButtonshide-zoom-buttonsIf set to true, hides the zoom buttons on the canvas.booleanundefined
hoverGroupTextColorhover-group-text-colorText color for hovered groups.stringundefined
listModalClassNamelist-modal-class-nameCustom class name(s) for the product list modal.stringundefined
listModalHeightlist-modal-heightHeight of the product list modal.stringundefined
listModalOverflowlist-modal-overflowOverflow behavior for the product list modal.ModalOverflowType.INSIDE | ModalOverflowType.OUTSIDEundefined
listModalWidthlist-modal-widthWidth of the product list modal.stringundefined
localelocaleLocale code specifying the language and region for localization of the embedded component.anyundefined
modalClassNamemodal-class-nameCustom class name(s) for the standard product configurator modal.stringundefined
modalHeightmodal-heightHeight of the standard product configurator modal.stringundefined
modalOverflowmodal-overflowOverflow behavior for the standard product configurator modal.ModalOverflowType.INSIDE | ModalOverflowType.OUTSIDEundefined
modalWidthmodal-widthWidth of the standard product configurator modal.stringundefined
modularModalClassNamemodular-modal-class-nameCustom class name(s) for the modular product configurator modal.stringundefined
modularModalHeightmodular-modal-heightHeight of the modular product modal.stringundefined
modularModalOverflowmodular-modal-overflowOverflow behavior for the modular product configurator modal.ModalOverflowType.INSIDE | ModalOverflowType.OUTSIDEundefined
modularModalWidthmodular-modal-widthWidth of the modular product modal.stringundefined
openedGroupTextColoropened-group-text-colorText color for opened groups.stringundefined
optionGroupHighlightColoroption-group-highlight-colorHighlight color for option groups.stringundefined
optionGroupHoverColoroption-group-hover-colorHover color for option groups.stringundefined
preserveFontpreserve-fontIf set to true, the component will inherit the font from the webpage.booleanundefined
preventScrollprevent-scrollIf set to true, prevents scrolling when scrolling over the canvas. Applicable only for custom UI.booleanundefined
publicPriceListpublic-price-listName of the public price list group to use for retrieving public prices for the displayed products.stringundefined
renderAtMountrender-at-mountIf set to true, renders the configurator immediately after mounting.booleanfalse
sceneShortCodescene-short-codeDefault scene code to be used in a single modular product embed.stringundefined
shortCodeshort-codeEmbed shortcode representing the specific product or configuration to be displayed.stringundefined
showMenuControlsshow-menu-controlsIf set to true, displays menu controls on the product list.booleanundefined
showPdfLogoshow-pdf-logoIf set to true, displays the logo in the PDF.booleanundefined
templatetemplateName of the template to use for configuring the appearance and layout of the embedded component.stringundefined
useCustomCssuse-custom-cssIf set to true, adds custom CSS to global styles upon rendering.booleanundefined
useCustomJsuse-custom-jsIf set to true, adds custom JavaScript to the document body upon rendering.booleanundefined
useCustomPricinguse-custom-pricingIf set to true, enables the embed to enter custom pricing mode.booleanundefined
withCartwith-cartIf set to true, enables and shows the Mimeeq Basket for managing selected products.booleanundefined
withHistorywith-historyIf set to true, enables history navigation and adds the current state information to the URL.booleanfalse
withModalwith-modalIf set to true, renders the configurator in a Mimeeq modal.booleanundefined
withModalListwith-modal-listIf set to true, renders the product list in a Mimeeq modal.booleanundefined
withModalModularwith-modal-modularIf set to true, renders the modular configurator in a Mimeeq modal.booleanundefined

Events

Stay informed about crucial events within the MMQ Embed component using custom events. Here's a key event to watch for:

EventDescriptionType
mimeeq-app-loadedEvent emitted after embed with current short code was loaded. Depending on settings loaded may not be the same as rendered.CustomEvent<any>

Methods

hide() => Promise<void>

Conceal the configurator and remove it from the DOM swiftly.

Returns

Type: Promise<void>

show() => Promise<void>

Render the configurator based on the current short code with ease.

Returns

Type: Promise<void>

showAR(payload: { arShortCode: string; allowScaling?: boolean; incompatible?: boolean; }) => Promise<void>

Effortlessly display AR content specified by the provided AR short code.

Parameters

NameTypeDescription
payload{ arShortCode: string; allowScaling?: boolean; incompatible?: boolean; }- Object containing AR parameters.

Returns

Type: Promise<void>