mmq-embed

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.

<mmq-embed short-code="YOUR_SHORT_CODE" template="YOUR_TEMPLATE"></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>

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.

Important Usage Notes

You should generally avoid using multiple mmq-embed components simultaneously on the same page. The observers in the current implementation are not instance-bound, which means multiple embed components would interfere with each other.
Instead of using multiple embed components, use a single component and dynamically change its short-code attribute when you need to display different products.
Ensure your template ID exists and has no typos - if the template doesn't exist, the component won't load anything at all.

Integration Examples

Basic Product Configuration

<mmq-embed short-code="PRODUCT123" template="standard_template"></mmq-embed>

Integration with E-commerce Platform

// Listen for add to cart events
document.addEventListener('mimeeq-add-to-cart', (event) => {
  // Extract product details from the event
  const { productId, productName, image, price, quantity, selectedOptions } = event.detail;

  // Add to your e-commerce platform's cart
  addToCart({
    id: productId,
    name: productName,
    price: price,
    quantity: quantity,
    options: selectedOptions,
    image: image,
  });
});

Properties

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`
`fontFamily`	`pdf-font-family`		`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 hotspots 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. Templates are created and managed in the Mimeeq admin panel and provide a way to predefine all visual and behavioral settings for your configurator embed. Using templates is strongly recommended over setting individual properties. IMPORTANT: Ensure the template ID exists and has no typos. If the template doesn't exist or has typos in name, the component won't load anything at all.	`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`
`viewBasketOnlineLocation`	`view-basket-online-location`	When using Mimeeq Basket, location to take user to see his submitted basket preview	`string`	`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

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.

This method hides the currently displayed configurator. It's useful when you want to temporarily remove the configurator from view without removing the component from your page.

// Get a reference to the embed component
const configurator = document.querySelector('mmq-embed');

// Hide the configurator when a close button is clicked
document.getElementById('close-configurator').addEventListener('click', () => {
  configurator.hide();
});

// Later, you can show it again with the show() method
document.getElementById('show-configurator').addEventListener('click', () => {
  configurator.show();
});

Returns

Type: Promise<void>

A promise that resolves when the configurator has been hidden

`show() => Promise<void>`

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

This method displays the configurator after it has been hidden or when you want to explicitly control when the configurator appears rather than using the render-at-mount attribute.

// Get a reference to the embed component
const configurator = document.querySelector('mmq-embed');

// Show the configurator when a button is clicked
document.getElementById('configure-button').addEventListener('click', () => {
  configurator.show();
});

Returns

Type: Promise<void>

A promise that resolves when the configurator has been displayed

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

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

This method renders an Augmented Reality viewing experience for your product, allowing customers to visualize products in their own space using their mobile device.

// Get a reference to the embed component
const configurator = document.querySelector('mmq-embed');

// Display the product in AR when an "View in AR" button is clicked
document.getElementById('view-in-ar').addEventListener('click', () => {
  configurator.showAR({
    arShortCode: 'AR123456', // The AR short code for this product
    allowScaling: true, // Allow users to resize the product in AR
  });
});

// Or automatically show AR content when generated
document.addEventListener('mimeeq-generate-ar-short-code', (event) => {
  const { shortCode, allowScaling } = event.detail;
  configurator.showAR({
    arShortCode: shortCode,
    allowScaling: allowScaling,
  });
});

Parameters

Name	Type	Description
`payload`	`{ arShortCode: string; allowScaling?: boolean; incompatible?: boolean; }`	- Object containing AR parameters.

Returns

Type: Promise<void>

Promise indicating completion of rendering.

Overview​

Getting Started​

Important Usage Notes​

Integration Examples​

Basic Product Configuration​

Integration with E-commerce Platform​

Properties​

Events​

Methods​

hide() => Promise<void>​

Returns​

show() => Promise<void>​

Returns​

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

Parameters​

Returns​

Overview

Getting Started

Important Usage Notes

Integration Examples

Basic Product Configuration

Integration with E-commerce Platform

Properties

Events

Methods

`hide() => Promise<void>`

Returns

`show() => Promise<void>`

Returns

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

Parameters

Returns