Embed Templates

Embed templates are powerful configuration profiles that define how the Mimeeq configurator appears, behaves, and integrates with your website. They allow you to create consistent, reusable settings that can be applied across your product configurators while maintaining precise control over the user experience.

What Are Embed Templates?

An embed template is a named collection of settings that controls all aspects of a Mimeeq configurator embed, from visual appearance to functional behavior. Templates are created and managed in the Mimeeq admin panel and can be referenced by their ID when embedding configurators on your website.

Templates serve several important purposes:

• Consistency: Ensure uniform appearance and behavior across multiple product configurators
• Reusability: Define settings once and apply them to many products
• Specialization: Create purpose-specific configurations for different contexts and channels
• Maintainability: Update configurations in one place rather than modifying multiple embed codes
• Flexibility: Switch between different configurations dynamically without rebuilding your site

Template Required

Embed templates are required for all product-related embeds (Product Configurator, Modular Configurator, Product List, Product Group, Favorites). If the template ID doesn't exist or contains typos, the embed will not render at all.

Creating and Managing Templates

Templates are created and managed through a user-friendly GUI in the Mimeeq admin panel.

Using the Admin Panel Interface

1. Log in to your Mimeeq admin panel
2. Navigate to Settings → Embed Templates
3. Click Create New Template
4. Provide a descriptive name for your template
5. Configure the settings using the intuitive interface
6. Save the template

User-Friendly Controls

The template editor provides appropriate controls for each setting type:

• Toggle switches for boolean options (hide/show elements)
• Text inputs for names, classes, and custom code
• Color pickers for all color settings with visual feedback
• Dropdown menus for enumerated options like languages and placements
• Radio buttons for exclusive choices
• Grouped sections for logical organization of related settings

Real-Time Preview

One of the most powerful features of the template editor is the integrated real-time preview. As you make changes to any setting:

• The preview updates instantly to show the effect of your change
• You can see exactly how UI elements appear with your configuration
• Color changes, visibility toggles, and layout adjustments are displayed immediately
• You can test interactions directly in the preview to verify behavior

You can also select different products to preview and simulate guest vs authenticated user views.

Template Settings Reference

Embed templates contain a comprehensive set of configuration options organized into several categories. Each table below shows the property name (for developers) and the UI label (as shown in the admin panel).

Core Properties

Found in the template creation dialog and general settings:

Property	UI Label	Description
embedTemplateName	Template name	Human-readable name for the template
embedTemplateUniqueName	Template ID	Machine-friendly unique identifier
language	Language	Default language code for the configurator interface
publicPriceListGroup	Public Price List Group	Price list group to use for public pricing

Behavior Settings

Found in the Settings section:

Property	UI Label	Description	Default
renderAtMount	Render at page load	Render the configurator immediately when the page loads	true
withHistory	Use URL navigation	Enable URL-based state persistence for sharing and refresh	false
adjustToContainer	Adjust to container	Make the embed fill its parent container instead of using default constraints	false

Render at Page Load

Controls whether the configurator renders automatically or waits for a programmatic trigger.

• Enabled (default): The configurator appears immediately when the page loads
• Disabled: The configurator waits until you call the show() method

Disable this for:

• Improving initial page load performance
• Showing a product image first, then loading 3D on demand
• Creating "Configure" buttons that reveal the configurator

// With Render at page load disabled, trigger display manually:
document.getElementById('configure-btn').addEventListener('click', () => {
  document.querySelector('mmq-embed').show();
});

Use URL Navigation

When enabled, the configurator saves its current state to the URL:

• Refresh persistence: Users can refresh the page without losing their configuration
• Shareable links: Users can copy the URL to share their exact configuration
• Browser history: Back/forward buttons navigate through configuration changes
• Auto-display: When a configuration URL is detected, the configurator opens automatically

Adjust to Container

Controls how the embed sizes itself:

• Disabled (default): Uses predefined constraints with maximum width of ~1600px on desktop
• Enabled: Fills 100% of its parent container's dimensions

<div style="width: 800px; height: 600px;">
  <!-- With Adjust to container enabled, the embed fills this container -->
  <mmq-embed short-code="ABC123" template="my_template"></mmq-embed>
</div>

tip

When using Adjust to container with tabs or related products visible, you may need additional CSS. See Styling Examples for guidance.

Style Settings

Found in the Style settings section:

Property	UI Label	Description	Default
renderInModal	Render Variant in modal	Display the product configurator in a modal dialog	false
renderListInModal	Render List in modal	Display the product list in a modal dialog	false
renderModularInModal	Render Modular in modal	Display the modular configurator in a modal dialog	true
useDefaultFont	Use default page font	Inherit font from the webpage instead of Mimeeq default	false

Modal Configuration

Found in the Variant Modal, List Modal, and Modular Modal sections:

Property	UI Label	Description
modalWidth	Modal width	Width value for the modal
modalHeight	Height	Height value for the modal
modalHeightUnit	Unit type	Unit for dimensions (px, %, vh, vw)
modalClassName	Custom class name	CSS class(es) to add to the modal
modalOverflow	Scrollbar placement	How scrolling behaves (inside or outside modal)

Separate settings exist for variant (standard product), list, and modular modals.

Theme Settings

Found in the Theme section:

Property	UI Label	Description
buttonColor	Button color override	Primary button background color
buttonTextColor	Button text color override	Primary button text color
backgroundColor	Background color override	Configurator background color
basketButtonColor	Basket button color override	Floating basket button color
openedGroupTextColor	Opened group text color override	Text color for expanded option groups
hoverGroupTextColor	Hover group text color override	Text color when hovering option groups
optionGroupHighlightColor	Option group highlight color override	Highlight color for selected options
optionGroupHoverColor	Option group hover color override	Background color when hovering options

Product List Settings

Found in the Product List settings section (applies to Product List and Product Group embeds):

Property	UI Label	Description	Default
showMenuControls	Show menu controls	Display filtering and sorting controls	false

When Show menu controls is enabled, users see:

• Categories: Filter by product categories (supports nested categories)
• Sorting: Order products A-Z or Z-A
• Search: Find products by name
• Tags: Filter by product tags
• Tile Size: Toggle between large and small product tiles

E-commerce Settings

Found in the E-commerce section:

Property	UI Label	Description	Default
basket	Basket support	Enable Mimeeq Basket functionality	false
integration	Integration	Integration type (HTML or Mimeeq)	HTML
addToCartPlacement	Add to Cart placement	Button location: FINISH or SUMMARY_SCREEN	FINISH
addToCartPlacementModular	Add to Cart placement (Modular)	Button location for modular products	SUMMARY_SCREEN
useCustomPricing	Use custom pricing	Use pricing from your external system	false
basketForLoggedInOnly	Show basket for logged in users only	Restrict basket to authenticated users	false
useGlobalBasketEmbed	Use Global Basket Embed	Defer to standalone basket embed	false
exploreProductsLocation	Explore Products URL	URL for "Explore Products" button	-
viewBasketOnlineLocation	View Basket Online URL	URL for viewing submitted basket	-

Use Global Basket Embed

Enable this when you have both:

• A standalone global basket embed on your website (from Settings → Customer Settings → Basket Code)
• Basket functionality enabled in this template

Without this option enabled, both basket instances initialize separately, causing duplicate icons, event duplication, and synchronization issues. When enabled, the template defers to the global basket embed.

PDF Settings

Found in the PDF settings section:

Property	UI Label	Description	Default
pdfFontFamily	Font Family	Font used in generated PDFs	Inter (default)
showPdfLogo	Hide logo	Hide your company logo in the PDF	false
hidePdfQuantity	Hide quantity	Hide quantity information	false
hidePdfQuantityBreaks	Hide quantity breaks	Hide quantity break pricing tiers	false
hidePdfPrice	Hide price	Hide price information	false
hidePdfDescription	Hide description	Hide product description	false
hidePdfSku	Hide SKU	Hide SKU/product code	false
hidePdfProductName	Hide product name	Hide the product name	false
hidePdfDeliveryInfo	Hide delivery information	Hide delivery time information	false

PDF Font Selection

You can customize the font used in generated PDFs:

1. Default font: Uses Mimeeq's Inter font
2. Google Fonts: Select from available Google Fonts in the dropdown
3. Custom fonts: Use fonts uploaded to your Media Library

To use a custom font:

1. Upload your font file (TTF, OTF, or WOFF) to Media Library
2. Select it from the Font Family dropdown in the template editor

PDF Logo

The logo comes from your Customer Account Settings (Settings → Customer Settings → Branding). Use Hide logo to remove it from PDFs.

Interface Elements (UI Visibility)

Found in the Interface elements section. All options hide the specified element when enabled:

Property	UI Label	Description	Default
hideARIcon	Hide AR icon	AR viewing button	false
hideCollectionName	Hide collection name	Collection/category name display	false
hideConfigurator	Hide Configurator	Entire configurator interface	false
hideControls	Hide all controls	All canvas controls (zoom, rotate, etc.)	false
hideDelivery	Hide delivery info	Delivery time information	false
hideDimensions	Hide dimensions	Dimensions display on 3D model	false
hideDragInfo	Hide drag information	Drag operation tooltip (modular)	false
hideExport	Hide model export	3D model export button	false
hideExportImage	Hide export image	Export image button	false
hideFavourites	Hide favourites	Favorites functionality	false
hideFavouritesButton	Hide Favourites	Favorites button specifically	false
hideFinish	Hide Finish button	Finish/complete button	false
hideFinishScreen	Hide Finish Screen	Summary screen after finishing	false
hideFooter	Hide footer	Footer element	false
hideFullScreen	Hide Full Screen button	Fullscreen toggle	false
hideHeader	Hide header	Header element	false
hideHistory	Hide history	Configuration history panel	false
hideHotspots	Hide Hotspots	Hotspot indicators on 3D model	false
hideMeshHighlight	Hide Mesh Highlight	Mesh highlighting on hover/selection	false
hideOptionPanel	Hide option panel	Options configuration panel	false
hidePdfOnCanvas	Hide PDF on canvas	PDF button on canvas	false
hidePdfOnFinish	Hide PDF on finish screen	PDF button on summary screen	false
hidePrice	Hide price	Price display	false
hideProductName	Hide product name	Product name display	false
hideQty	Hide quantity	Quantity selector	false
hideRedo	Hide redo	Redo button	false
hideRelated	Hide related products	Related products section	false
hideReset	Hide reset	Reset button	false
hideShareOnCanvas	Hide share on canvas	Share button on canvas	false
hideShareOnFinish	Hide share on finish screen	Share button on summary	false
hideTabs	Hide tabs	Product tabs section	false
hideUndo	Hide undo	Undo button	false
hideWarning3d	Hide warning 3d	3D warning message	false
hideWarningIcons	Hide modular warnings	Warning icons on modular canvas	false
hideZoom	Hide Zoom All button	Zoom all/fit button	false
hideZoomButtons	Hide Zoom Buttons	Zoom in/out buttons	false

Custom Code

Found in the Custom CSS and Custom JS sections:

Property	UI Label	Description
customCss	Custom CSS	CSS code to inject
useCustomCss	Enable Custom CSS	Whether to apply the custom CSS
customJs	Custom JS	JavaScript code to inject
useCustomJs	Enable Custom JS	Whether to execute the custom JavaScript

Custom UI

Found in the Page elements section:

Property	UI Label	Description
customUi	Use custom UI	Enable custom UI system
customUiId	Embed Custom UI	ID of the custom UI to use
useCustomVersion	Use custom version	Use a specific version instead of active
customUiVersionId	Custom UI Version	Specific version ID to use

For details on creating custom UIs, see Custom UI Guide.

Applying Templates

Static Assignment

Specify the template ID directly in your embed code:

<mmq-embed short-code="ABC123" template="your_template_id"></mmq-embed>

Dynamic Assignment

Change templates programmatically:

const configurator = document.querySelector('mmq-embed');
configurator.setAttribute('template', 'new_template_id');

Overriding Template Settings

You can override specific template settings with embed attributes:

<mmq-embed 
  short-code="ABC123" 
  template="your_template_id" 
  locale="de"
  hide-price
></mmq-embed>

This applies the template but overrides language and price visibility.

Template Use Cases

Multiple Sales Channels

• Retail Template: Consumer pricing, simplified options
• Dealer Template: Dealer pricing, technical specifications
• Wholesale Template: Bulk pricing, volume discounts

Context-Specific Presentation

• In-Page Template: Embedded directly in product pages
• Modal Template: Opens in overlay dialog
• Kiosk Template: Full-screen for in-store displays

Pricing Strategies

• Standard Template: Regular pricing display
• Promotional Template: Highlighting discounts
• Rental Template: Daily/weekly/monthly rates

Template Loading Behavior

Loading Sequence

1. The embed element is parsed by the browser
2. Mimeeq scripts load asynchronously
3. The template is fetched and applied
4. The mimeeq-app-loaded event fires when fully ready

Error Handling

If a template ID is invalid or unavailable:

• Nothing renders – The configurator will not display
• No error is shown to end users
• Check browser console for warning messages

Best Practices

• Copy template IDs directly from the admin panel to avoid typos
• Use descriptive template names indicating their purpose
• Test template changes in staging before production
• Document your template IDs and their purposes

Getting Support

If you encounter issues with templates:

• Refer to the Embed Options documentation for property details
• See Dynamic Template Switching for advanced usage
• Use the live chat feature in the Mimeeq admin panel
• Contact Mimeeq support for personalized assistance