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:
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
accentColor | accent-color | Custom accent color to be used in the UI. | string | undefined |
accentTextColor | accent-text-color | Custom text color for controls with accent color as background. | string | undefined |
adjustToContainer | adjust-to-container | If set to true, adjusts the configurator to the container rather than using predefined min/max sizes. | boolean | undefined |
backgroundColor | background-color | Custom background color for the embedded component. | string | undefined |
basket | basket | If set to true, enables the configurator to display a basket for managing selected products. | boolean | undefined |
basketButtonColor | basket-button-color | Background color for the Mimeeq basket button. | string | undefined |
basketForLoggedInOnly | basket-for-logged-in-only | If set to true, the Mimeeq Basket will only be displayed for authenticated users. | boolean | undefined |
cartAt | cart-at | Specifies where to display the "Add to Cart" button. | AddToCartPlacement.FINISH \| AddToCartPlacement.SUMMARY_SCREEN | undefined |
cartAtModular | cart-at-modular | Specifies where to display the "Add to Cart" button for modular products only. | AddToCartPlacement.FINISH \| AddToCartPlacement.SUMMARY_SCREEN | undefined |
cartLoaderOnly | cart-loader-only | If set to true, hides text on buttons when displaying loader. | boolean | undefined |
configurationCode | configuration-code | Default configuration code to be used in a single product embed. | string | undefined |
customCss | custom-css | Custom CSS string to be applied to the embedded component. | string | undefined |
customJs | custom-js | Custom JavaScript string to be executed in the embedded component. | string | undefined |
customUi | custom-ui | If set to true, renders only the canvas, useful for creating custom UIs. | boolean | undefined |
customUiMainFiles | custom-ui-main-files | Custom UI main files to load for a custom UI. | string | undefined |
customUiTemplate | custom-ui-template | Custom UI HTML template to be rendered when customUi is set to true. | string | undefined |
exploreProductsLocation | explore-products-location | Specifies the location to take the user after clicking the "Explore" button in the Mimeeq Basket. | string | undefined |
hideARIcon | hide-ar | If set to true, hides the "View in AR" button from the UI. | boolean | undefined |
hideCollectionName | hide-collection-name | If set to true, hides the collection name above the product name. | boolean | undefined |
hideConfigurator | hide-configurator | If set to true, hides the whole configurator, leaving only tabs and related products. | boolean | undefined |
hideControls | hide-controls | If set to true, hides all controls on the configurator. | boolean | undefined |
hideDelivery | hide-delivery | If set to true, hides the delivery information from the UI. | boolean | undefined |
hideDimensions | hide-dimensions | If set to true, hides the "Show Dimensions" button from the UI. | boolean | undefined |
hideDragInfo | hide-drag-info | If set to true, hides the drag info at the bottom of the canvas. | boolean | undefined |
hideExport | hide-export | If set to true, hides the export model button from the UI. | boolean | undefined |
hideExportImage | hide-export-image | If set to true, hides the export image button from the UI. | boolean | undefined |
hideFavourites | hide-favourites | If set to true, hides the favorites button on the canvas. | boolean | undefined |
hideFavouritesButton | hide-favourites-button | If set to true, hides the favorites button on the configurator. | boolean | undefined |
hideFinish | hide-finish | If set to true, hides the finish/add to cart button from the UI. | boolean | undefined |
hideFinishScreen | hide-summary-screen | If set to true, hides the summary screen from the UI. | boolean | undefined |
hideFooter | hide-footer | If set to true, hides the configurator canvas footer from the UI. | boolean | undefined |
hideFullScreen | hide-full-screen | If set to true, hides the full-screen button from the UI. | boolean | undefined |
hideHeader | hide-header | If set to true, hides the configurator header from the UI. | boolean | undefined |
hideHistory | hide-history | If set to true, hides all history-related buttons from the UI. | boolean | undefined |
hideHotSpots | hide-3d-information | If set to true, hides the 3D information on the 3D canvas for products with these configured. | boolean | undefined |
hideMeshHighlight | hide-mesh-highlight | If set to true, hides the mesh highlight on the canvas for products with mesh highlight rules. | boolean | undefined |
hideOptionPanel | hide-option-panel | If set to true, hides the whole option panel from the UI. | boolean | undefined |
hidePdfDeliveryInfo | hide-pdf-delivery-info | If set to true, hides the delivery information in the PDF. | boolean | undefined |
hidePdfDescription | hide-pdf-description | If set to true, hides the product description in the PDF. | boolean | undefined |
hidePdfOnCanvas | hide-pdf-canvas | If set to true, hides the export PDF button on the canvas. | boolean | undefined |
hidePdfOnFinish | hide-pdf-summary | If set to true, hides the export PDF button on the summary screen. | boolean | undefined |
hidePdfPrice | hide-pdf-price | If set to true, hides the price information in the PDF. | boolean | undefined |
hidePdfProductName | hide-pdf-product-name | If set to true, hides the product name in the PDF. | boolean | undefined |
hidePdfQuantity | hide-pdf-quantity | If set to true, hides the quantity information in the PDF. | boolean | undefined |
hidePdfQuantityBreaks | hide-pdf-quantity-breaks | If set to true, hides the price quantity breaks in the PDF. | boolean | undefined |
hidePdfSku | hide-pdf-sku | If set to true, hides the SKU in the PDF. | boolean | undefined |
hidePrice | hide-price | If set to true, hides all prices from the UI. | boolean | undefined |
hideProductName | hide-product-name | If set to true, hides the product name from the UI. | boolean | undefined |
hideQty | hide-qty | If set to true, hides the quantity buttons from the UI. | boolean | undefined |
hideRedo | hide-redo | If set to true, hides the redo button from the UI. | boolean | undefined |
hideRelated | hide-related | If set to true, hides the related products section from the UI. | boolean | undefined |
hideReset | hide-reset | If set to true, hides the history reset button from the UI. | boolean | undefined |
hideShareOnCanvas | hide-share-canvas | If set to true, hides the share button on the canvas. | boolean | undefined |
hideShareOnFinish | hide-share-summary | If set to true, hides the share button on the summary screen. | boolean | undefined |
hideTabs | hide-tabs | If set to true, hides the tabs section from the UI. | boolean | undefined |
hideUndo | hide-undo | If set to true, hides the undo button from the UI. | boolean | undefined |
hideWarning3d | hide-warning-3d | If set to true, hides the 3D warning icon from the UI. | boolean | undefined |
hideWarningIcons | hide-warning-icons | If set to true, hides the warning icons on the modular canvas. | boolean | undefined |
hideZoom | hide-zoom | If set to true, hides the zoom out button from the UI. | boolean | undefined |
hideZoomButtons | hide-zoom-buttons | If set to true, hides the zoom buttons on the canvas. | boolean | undefined |
hoverGroupTextColor | hover-group-text-color | Text color for hovered groups. | string | undefined |
listModalClassName | list-modal-class-name | Custom class name(s) for the product list modal. | string | undefined |
listModalHeight | list-modal-height | Height of the product list modal. | string | undefined |
listModalOverflow | list-modal-overflow | Overflow behavior for the product list modal. | ModalOverflowType.INSIDE \| ModalOverflowType.OUTSIDE | undefined |
listModalWidth | list-modal-width | Width of the product list modal. | string | undefined |
locale | locale | Locale code specifying the language and region for localization of the embedded component. | any | undefined |
modalClassName | modal-class-name | Custom class name(s) for the standard product configurator modal. | string | undefined |
modalHeight | modal-height | Height of the standard product configurator modal. | string | undefined |
modalOverflow | modal-overflow | Overflow behavior for the standard product configurator modal. | ModalOverflowType.INSIDE \| ModalOverflowType.OUTSIDE | undefined |
modalWidth | modal-width | Width of the standard product configurator modal. | string | undefined |
modularModalClassName | modular-modal-class-name | Custom class name(s) for the modular product configurator modal. | string | undefined |
modularModalHeight | modular-modal-height | Height of the modular product modal. | string | undefined |
modularModalOverflow | modular-modal-overflow | Overflow behavior for the modular product configurator modal. | ModalOverflowType.INSIDE \| ModalOverflowType.OUTSIDE | undefined |
modularModalWidth | modular-modal-width | Width of the modular product modal. | string | undefined |
openedGroupTextColor | opened-group-text-color | Text color for opened groups. | string | undefined |
optionGroupHighlightColor | option-group-highlight-color | Highlight color for option groups. | string | undefined |
optionGroupHoverColor | option-group-hover-color | Hover color for option groups. | string | undefined |
preserveFont | preserve-font | If set to true, the component will inherit the font from the webpage. | boolean | undefined |
preventScroll | prevent-scroll | If set to true, prevents scrolling when scrolling over the canvas. Applicable only for custom UI. | boolean | undefined |
publicPriceList | public-price-list | Name of the public price list group to use for retrieving public prices for the displayed products. | string | undefined |
renderAtMount | render-at-mount | If set to true, renders the configurator immediately after mounting. | boolean | false |
sceneShortCode | scene-short-code | Default scene code to be used in a single modular product embed. | string | undefined |
shortCode | short-code | Embed shortcode representing the specific product or configuration to be displayed. | string | undefined |
showMenuControls | show-menu-controls | If set to true, displays menu controls on the product list. | boolean | undefined |
showPdfLogo | show-pdf-logo | If set to true, displays the logo in the PDF. | boolean | undefined |
template | template | Name of the template to use for configuring the appearance and layout of the embedded component. | string | undefined |
useCustomCss | use-custom-css | If set to true, adds custom CSS to global styles upon rendering. | boolean | undefined |
useCustomJs | use-custom-js | If set to true, adds custom JavaScript to the document body upon rendering. | boolean | undefined |
useCustomPricing | use-custom-pricing | If set to true, enables the embed to enter custom pricing mode. | boolean | undefined |
withCart | with-cart | If set to true, enables and shows the Mimeeq Basket for managing selected products. | boolean | undefined |
withHistory | with-history | If set to true, enables history navigation and adds the current state information to the URL. | boolean | false |
withModal | with-modal | If set to true, renders the configurator in a Mimeeq modal. | boolean | undefined |
withModalList | with-modal-list | If set to true, renders the product list in a Mimeeq modal. | boolean | undefined |
withModalModular | with-modal-modular | If set to true, renders the modular configurator in a Mimeeq modal. | boolean | undefined |
Events
Stay informed about crucial events within the MMQ Embed component using custom events. Here's a key event to watch for:
| Event | Description | Type |
|---|---|---|
mimeeq-app-loaded | Event 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
| Name | Type | Description |
|---|---|---|
payload | { arShortCode: string; allowScaling?: boolean; incompatible?: boolean; } | - Object containing AR parameters. |
Returns
Type: Promise<void>