Skip to main content

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

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
fontFamilypdf-font-familystringundefined
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 hotspots 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. 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.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
viewBasketOnlineLocationview-basket-online-locationWhen using Mimeeq Basket, location to take user to see his submitted basket previewstringundefined
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

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.

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

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

Returns

Type: Promise<void>

  • Promise indicating completion of rendering.