Skip to main content

Embed Types

Mimeeq provides several embed types to cover different product visualization and e-commerce scenarios. Each embed type serves a specific purpose and most can be customized through embed templates. This guide explains all available embed types, their use cases, and how to implement them.

Overview​

Embed TypePurposeTemplate SupportGenerated From
Product ConfiguratorSingle product visualization and configurationRequiredProduct details page
Modular ConfiguratorMulti-component spatial configurationRequiredModular product details page
Product ListBrowsable catalog of all active productsRequiredProducts page
Product GroupFiltered catalog of specific productsRequiredProduct Group details page
Favorites ListUser's saved configurationsRequiredSettings → Code
BasketShopping cart for B2B quotingNoSettings → Customer Settings
AuthenticationUser login and profile managementNoSettings → Code

Getting Embed Code​

All embed types follow the same generation pattern:

  1. Navigate to the appropriate section in the Admin Panel
  2. Click Copy Embed Code
  3. Select your embed template (required for product-related embeds)
  4. Optionally override language or price list group
  5. Copy the snippet

You have two copy options:

  • Copy Short Code – Just the identifier (e.g., GP9V9M). Useful when you need to swap products dynamically in a CMS or JavaScript application.
  • Copy Script – Complete HTML snippet ready to paste into your website.

Common Configuration​

Product-related embed types share these core attributes:

<mmq-embed
  short-code="YOUR_SHORT_CODE"
  template="your_template_id"
></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>
AttributeDescription
short-codeUnique identifier for the embed (required)
templateEmbed template ID defining appearance and behavior (required)
localeLanguage code (overrides template setting)
public-price-listPrice list group (overrides template setting)
Template Required

If the provided template ID doesn't exist or contains typos, nothing will render. Always verify your template ID before deploying.

Language Priority​

Language settings follow this priority order (highest to lowest):

  1. locale attribute on the embed element
  2. Language setting in the embed template
  3. Customer default language

Mimeeq ships with complete UI translations for English, Polish, and German. Other languages require custom translations.

Customization​

All visual customization, UI visibility settings, modal dimensions, colors, and behavioral options should be configured through Embed Templates. This approach:

  • Centralizes configuration management
  • Allows updates without code changes
  • Provides real-time preview in the admin panel
  • Ensures consistency across your implementation

Product Configurator​

The standard product configurator enables customers to visualize and customize individual products in 2D or 3D. This is the most commonly used embed type and provides the best performance due to optimized caching.

Use Cases​

  • Product detail pages in e-commerce stores
  • Standalone configuration tools
  • Sales enablement applications
  • Showroom kiosks

Where to Generate​

Admin Panel → Products → [Select Product] → Copy Embed Code

Example​

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

Key Features​

  • Full 2D/3D product visualization
  • Option selection and configuration
  • Price calculation and display
  • PDF generation
  • AR viewing capability
  • Favorites (for authenticated users)

Display Modes​

The configurator can display inline or in a modal. Configure this through your embed template settings:

  • Inline: Embeds directly into your page layout
  • Modal: Opens in an overlay dialog with configurable dimensions

Performance Note​

The Product Configurator leverages caching more effectively than list-based embeds. When possible, prefer embedding individual products over product lists for better performance.

Modular Configurator​

The modular configurator allows customers to build complex, multi-component products in a spatial environment—ideal for furniture systems, kitchen layouts, or office configurations.

Use Cases​

  • Room planners and space designers
  • Modular furniture configuration
  • Kitchen and closet design tools
  • Office layout planning

Where to Generate​

Admin Panel → Products → [Select Modular Product] → Copy Embed Code

Example​

<mmq-embed 
  short-code="MOD123" 
  template="modular_template"
></mmq-embed>

Key Features​

  • Spatial product arrangement
  • Multi-component configurations
  • Scene saving and loading
  • Collision detection
  • Summary with all components

Display Recommendations​

We strongly recommend displaying the modular configurator in a modal at 100% width and height. This is the default behavior and provides the best user experience for spatial configuration tasks. Configure modal settings through your embed template.

Product List​

The product list (also called product menu) displays all active products that are enabled for menu display. Customers can browse, search, filter, and click through to configure individual products.

Use Cases​

  • Product catalog pages
  • Collection showcases
  • Full product exploration experiences

Where to Generate​

Admin Panel → Products → Copy Embed Code (from the products list page, not an individual product)

Example​

<mmq-embed 
  short-code="GP9V9M" 
  template="catalog_template"
></mmq-embed>

When enabled in your template, users get access to:

  • Categories – Filter by product categories
  • Sorting – Alphabetical ordering (A-Z or Z-A)
  • Search – Find products by name
  • Tags – Filter by product tags
  • Tile Size – Toggle between large and small product tiles

Product Display​

When a user clicks a product, the configurator opens (typically in a modal). Configure the modal dimensions and behavior through your embed template.

Performance Consideration​

Product lists don't leverage caching as effectively as individual product embeds. For high-traffic pages where you're showcasing specific products, consider using individual Product Configurator embeds instead.

Product Group​

Product groups let you display a curated subset of products rather than your entire catalog. This is useful for focused experiences, promotional pages, or category-specific embeds.

Use Cases​

  • Category landing pages
  • Promotional collections
  • Partner or channel-specific catalogs
  • Seasonal product showcases

Creating a Product Group​

  1. Admin Panel → Product Groups → Create New
  2. Set a name and enable Active status
  3. Optionally enable Manual Sort to control product order
  4. Go to Products Connected and add your desired products
  5. Save the group

Where to Generate​

Admin Panel → Product Groups → [Select Group] → Copy Embed Code

Example​

<mmq-embed 
  short-code="GRP456" 
  template="group_template"
></mmq-embed>

Manual Sort​

When Manual Sort is enabled in the group settings, products display in your specified order. When disabled, users can sort products using menu controls (if enabled in your template).

Difference from Product List​

AspectProduct ListProduct Group
Products shownAll active, menu-enabled productsOnly products you add to the group
SortingUser-controlledCan be fixed (manual sort) or user-controlled
Use caseFull catalogCurated selection

Favorites List​

The favorites list displays products that authenticated users have saved. It provides quick access to previously configured items and supports both private and shared collections.

Use Cases​

  • "My Saved Designs" pages
  • Wishlist functionality
  • Quick reorder interfaces
  • Sales team collections

Where to Generate​

Admin Panel → Settings → Code → Favorite Code

Example​

<mmq-embed 
  short-code="FAV789" 
  template="favorites_template"
></mmq-embed>

Requirements​

  • Users must be authenticated via Mimeeq Auth
  • The embed only renders for logged-in users
  • Requires the <mmq-auth> component on the page

Collection Types​

Favorites support multiple collection types:

  • Private Collections – User's personal saved configurations
  • Public Collections – Shared by other users
  • Admin Collections – Created by administrators for all users

Hiding Favorites in Other Embeds​

If you don't want favorites functionality in your product list or configurator (even for logged-in users), configure the Hide Favorites option in your embed template.

Basket​

The Mimeeq Basket provides B2B shopping cart functionality for quote requests. While basket can be enabled within other embeds via templates, you can also deploy it as a standalone component.

No Template Support

The standalone basket embed does not use embed templates. Configure it directly through the code generator options and embed attributes.

Use Cases​

  • Persistent basket icon across your site
  • Dedicated cart/quote page
  • Checkout flow integration

Where to Generate​

Admin Panel → Settings → Customer Settings → Basket → Basket Code

Example​

<mmq-embed 
  short-code="BSK101"
  explore-products-location="/products"
  view-basket-online-location="/cart"
  basket-for-logged-in-only
></mmq-embed>

Configuration Options​

OptionDescription
explore-products-locationURL to redirect users when clicking "Explore Products" from an empty basket
view-basket-online-locationURL for viewing submitted basket details
basket-for-logged-in-onlyShow basket only to authenticated users

Basket in Other Embeds​

To add basket functionality to product or modular configurators, configure these settings in your embed template:

  • Enable Basket – Turn on Mimeeq Basket integration
  • Add to Cart Placement – Where to show the Add to Cart button: replaces Finish button or appears on summary screen

Using Global Basket with Embed Templates​

If you're using both:

  • A standalone global basket embed on your pages, AND
  • Basket enabled in your embed templates

Enable the Use Global Basket Embed option in your embed template. This prevents duplicate loading and event duplication when both basket instances are present on the same page.

Authentication​

The authentication embed provides user login, profile management, and password recovery functionality.

No Template Support

The authentication embed does not use embed templates. Configure it directly through the code generator options.

Use Cases​

  • Adding user accounts to your Mimeeq integration
  • Enabling favorites and personalized pricing
  • B2B customer portals

Where to Generate​

Admin Panel → Settings → Code → Login Code

Example​

<mmq-auth 
  short-code="AUTH001" 
  locale="en"
  preserve-font
  accent-color="#0066cc"
></mmq-auth>

Configuration Options​

OptionDescription
localeLanguage code for the interface
preserve-fontUse the website's font instead of Mimeeq default
accent-colorPrimary color for buttons and interactive elements
background-colorBackground color for the auth modal

Triggering Authentication​

Authentication modals can be triggered via:

URL Parameter:

https://yoursite.com/page?auth=mimeeq

JavaScript:

document.querySelector('mmq-auth').mountLogin();

Available Screens​

  • Login – User sign-in form
  • User Profile – Account management for logged-in users
  • Forgot Password – Password recovery flow

Integration with Other Embeds​

For authentication to work with favorites and user-specific pricing, include both the auth and embed components:

<mmq-auth short-code="AUTH001"></mmq-auth>
<mmq-embed short-code="PROD123" template="my_template"></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>

Quick Reference​

Which Embed Type Should I Use?​

ScenarioRecommended Embed
Single product on a product pageProduct Configurator ⭐ Best performance
Room planner or space designerModular Configurator
Full product catalogProduct List
Specific collection or categoryProduct Group
User's saved itemsFavorites List
Site-wide shopping cartBasket
User accountsAuthentication

Next Steps​