> For the complete documentation index, see [llms.txt](https://help.mimeeq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.mimeeq.com/configurator/embeds-and-translations/template-settings.md).

# Embed Template Settings

Configure layout, behaviour, UI elements, and advanced settings for your embed templates.

Embed templates are the control centre for your embeds. Each template has a unique ID you reference when generating embed codes, giving you centralised control over styling, behaviour, and settings across multiple embeds on your website. Templates are created and managed through the Mimeeq admin panel — no JSON editing required.

## Why Multiple Templates?

Using multiple templates lets you create different embed experiences for different parts of your website.

| Template                  | Typical use case             | Key characteristics                                      |
| ------------------------- | ---------------------------- | -------------------------------------------------------- |
| Product Page with Pricing | E-commerce product pages     | Full configurator, live pricing, add-to-cart button      |
| Canvas Only View          | Homepage banners, blog posts | 3D preview only — no controls or pricing                 |
| B2B Partner Portal        | Dealer networks              | Authentication required, partner pricing, quote requests |

## Creating a New Embed Template

1. Navigate to **Settings → Data → Embed Templates** in Mimeeq Admin
2. Click **Create New Template**
3. Assign a template name and ID
4. Configure your settings (detailed below)
5. Save and use the template ID in your embed code

## Template Configuration Settings

![Template Configuration Settings Layout](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FmQm8tKlwJvcmFtKh6lxM%2Fembed-global-11-new_kzgdhk.png?alt=media)

### Name and ID

<table><thead><tr><th width="109.28515625">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Name</td><td>Internal identifier for the template (e.g., "Shopify Embedded Template USD" or "B2B Portal with Basket").</td></tr><tr><td>ID</td><td>Auto-generated unique identifier. Can be changed manually, but doing so may break existing integrations if the template is already in use.</td></tr></tbody></table>

{% hint style="warning" %}
Avoid editing the Template ID after it has been used in a live embed. Changing the ID breaks any existing embed code that references it. Set the ID once and leave it.
{% endhint %}

### Preview Settings

Configure how the configurator behaves in preview and on your live embed — including language, pricing, and loading behaviour.

<table><thead><tr><th width="193.8046875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Language</td><td>Dropdown selector for all available languages in your account.</td></tr><tr><td>Price List Group</td><td>Assigns a specific price list group to the embed template.</td></tr><tr><td>URL Navigation</td><td>When enabled, the configurator state is saved to the page URL. Users can refresh, share, or return to a page without losing their configuration. Also auto-opens the configurator when a <code>variantCode</code> is present in the URL.</td></tr><tr><td>Render at Page Load</td><td>When enabled, the configurator renders immediately on page load. Disable to delay rendering until triggered by a user action (e.g. a <strong>Configure</strong> button). If you are using modal rendering, keep this off — the modal is typically opened by a button click rather than on page load.</td></tr></tbody></table>

{% hint style="warning" %}
If **Use URL Navigation** is enabled, the configurator renders automatically when a `variantCode` is detected in the URL, regardless of the **Render at Page Load** setting.
{% endhint %}

### Layout Settings

Controls how the configurator is displayed on your website.

{% hint style="warning" %}
For Modular Products, keep **Render Modular in Modal** enabled. Disabling it may break features such as shortcuts and keyboard interactions.
{% endhint %}

<table><thead><tr><th width="245.28125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Render list and groups in modal</td><td>Opens the product list and/or product group in an overlay modal instead of inline on the page.</td></tr><tr><td>Render modular configurator in modal</td><td>Opens the modular configurator in an overlay modal. Recommended on.</td></tr><tr><td>Render standard configurator in modal</td><td>Opens the standard product configurator in an overlay modal instead of inline on the page.</td></tr><tr><td>Use default page font</td><td>Inherits the font from the host webpage instead of Mimeeq's default font.</td></tr><tr><td>Adjust to container</td><td>Makes the embed fill 100% of its parent container. When off, applies a max-width of ~1600px.</td></tr></tbody></table>

### Modal Settings

Define the size and layout of the modal when modal display options are enabled.

<table><thead><tr><th width="198.78125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Width Units</td><td>Unit used for modal width (px, %, vw, etc.).</td></tr><tr><td>Width Value</td><td>Width of the modal (for example, 90%).</td></tr><tr><td>Height Units</td><td>Unit used for modal height (px, %, vw, etc.).</td></tr><tr><td>Height Value</td><td>Height of the modal (for example, 90%).</td></tr><tr><td>Scrollbar Placement</td><td>Controls where the scroll bar appears in modals (Inside or Outside of the modal).</td></tr><tr><td>Custom Class Name</td><td>Adds a CSS class to the modal element, allowing custom styles to be applied from the host page.</td></tr></tbody></table>

### Product List and Groups

Configure the preview for Product List and Product Group embeds.

<table><thead><tr><th width="199.02734375">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show menu controls</td><td>Displays a dynamic menu with search, category and tag filters, A–Z sorting, and a tile size toggle.</td></tr><tr><td>Show favourites</td><td>Allows logged-in users to save and revisit favourite products in the standard configurator and saved scenes in the modular configurator.</td></tr></tbody></table>

### E-commerce

Controls pricing behaviour and basket functionality in the configurator.

<table><thead><tr><th width="200.6328125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Use Custom Pricing</td><td>Uses pricing data from your external system instead of Mimeeq price lists.</td></tr><tr><td>Basket Support</td><td>Enables basket functionality. Users can collect and submit their configuration using the built-in <strong>Add to Cart</strong> button.</td></tr></tbody></table>

For advanced basket configuration — including custom pricing, button placement, integration types, and URL settings — see the Mimeeq Basket System guide.

### Interface Elements

Customise the configurator interface by selecting which UI elements are shown.

![Example of hidden interface elements](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FC0cLNhkn956IY9384iij%2Fembed-ui-new-11_vrx0zj.png?alt=media)

**Base UI**

<table><thead><tr><th width="176.77734375">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Use Custom UI</td><td>When enabled, replaces the default Mimeeq configurator interface with a fully custom UI. Leave off to use the standard Mimeeq UI.</td></tr></tbody></table>

**Quick Icons**

<table><thead><tr><th width="214.4296875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show Add to Favourites</td><td>Shows the Add to Favourites icon.</td></tr><tr><td>Show Export Image</td><td>Shows image export icon.</td></tr><tr><td>Show Full Screen</td><td>Shows the full-screen icon.</td></tr><tr><td>Show Model Export</td><td>Shows 3D model export icon.</td></tr><tr><td>Show PDF Generation</td><td>Shows PDF export icon.</td></tr><tr><td>Show Redo</td><td>Shows the redo action icon.</td></tr><tr><td>Show Reset</td><td>Shows the reset configuration icon.</td></tr><tr><td>Show Undo</td><td>Shows the undo action icon.</td></tr><tr><td>Show Warning 3D Message</td><td>Shows icon with a 3D warning message.</td></tr><tr><td>Show Zoom All</td><td>Shows zoom all icon (resets camera to default view).</td></tr><tr><td>Show Zoom Controls</td><td>Shows zoom control icons (Zoom in and Zoom out).</td></tr></tbody></table>

**Canvas**

<table><thead><tr><th width="224.83203125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show AR Button</td><td>Shows augmented reality viewing option.</td></tr><tr><td>Show Collection Name</td><td>Shows collection name on the canvas.</td></tr><tr><td>Show Drag Information</td><td>Shows drag interaction tooltip on the canvas (on first load).</td></tr><tr><td>Show Hotspots</td><td>Shows hotspot indicators on the canvas.</td></tr><tr><td>Show Product Name</td><td>Shows product name on the canvas.</td></tr></tbody></table>

**Option Panel**

<table><thead><tr><th width="209.69140625">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show Finish Button</td><td>Shows the finish button in the option panel footer.</td></tr><tr><td>Show Option Panel</td><td>Shows configuration panel with options.</td></tr><tr><td>Show Price</td><td>Shows price in the option panel footer.</td></tr><tr><td>Show Quantity</td><td>Shows quantity selector in the option panel footer.</td></tr><tr><td>Show VAT Information</td><td>Shows VAT information next to price (for example, Including VAT).</td></tr></tbody></table>

**Finish Screen**

<table><thead><tr><th width="246.35546875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show Delivery Information</td><td>Shows delivery information on the summary screen.</td></tr><tr><td>Show Finish Screen</td><td>Enables summary screen.</td></tr><tr><td>Show Generate PDF Button</td><td>Shows PDF generation button on summary screen.</td></tr><tr><td>Show Share Options</td><td>Shows sharing options from the summary screen.</td></tr></tbody></table>

**Tabs and Related Products**

<table><thead><tr><th width="227.59765625">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show Tabs</td><td>Shows tab navigation under the 3D canvas.</td></tr><tr><td>Show Related Products</td><td>Shows related product suggestions under the 3D canvas.</td></tr></tbody></table>

**Modular Elements**

<table><thead><tr><th width="233">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show Copy Link</td><td>Shows Copy Link icon in the modular header.</td></tr><tr><td>Show Modular Warnings</td><td>Shows warnings modals for modular product configurations.</td></tr></tbody></table>

### Dimensions

Controls how dimension lines are displayed and how users interact with them. For more detail, see Dimension Overlay — Setup and Configuration Guide.

<table><thead><tr><th width="259.875">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Show Dimensions Toggle on Canvas</td><td>Shows the dimensions icon on the 3D canvas, allowing users to toggle dimensions on or off. On by default.</td></tr><tr><td>Show Dimensions on Load</td><td>When enabled, dimension lines are visible when the configurator loads. Users can still toggle them on or off. Off by default.</td></tr><tr><td>Always Show Dimensions</td><td>Dimensions remain permanently visible and the toggle icon is hidden, preventing users from turning them off. Enabling this disables both <strong>Show Dimensions on Load</strong> and <strong>Show Dimensions Toggle on Canvas</strong>.</td></tr><tr><td>Font Family</td><td>Sets the font used for dimension pill labels. You can select any Google Font or upload a custom font. See How to Upload and Use Custom Fonts.</td></tr><tr><td>Unit Display Mode</td><td>Defines how measurement units are presented. Use the default global setting, override with a specific unit, or allow users to switch between units.</td></tr></tbody></table>

**Unit Display Mode Options:**

* **Default Unit** — uses global settings
* **Override Default Unit** — replaces the default unit with another (auto-converted)
* **Multi Unit** — allows switching between multiple units directly on the 3D canvas

![Example of visible dimensions](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FVO48CUxZ4LkGtp7Ap6y9%2Fembed-single-embed-new-dimensi_1uq7nyr.png?alt=media)

When **Multi Unit** is selected, specify which units are available for users to choose from on the canvas.

**Available Units:** mm, cm, m, in, ft, ft + in

{% hint style="warning" %}
Conversion and display precision follow the settings defined in your global dimension configuration.
{% endhint %}

![Multi-unit selector on the 3D canvas](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2F9tUu07cUc6amqIWv65zU%2Fembed-single-embed-new-dimensi_prlwab.png?alt=media)

### PDF Settings

PDF generation settings — including branding, product details, pricing visibility, and dimension display — are covered in the PDF Export: Setup and Settings guide.

### Theme

Override the default visual styling to match your brand colours.

<table><thead><tr><th width="288.765625">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Button Color Override</td><td>Overrides the default button background colour.</td></tr><tr><td>Button Text Color Override</td><td>Overrides the default button text colour.</td></tr><tr><td>Background Color Override</td><td>Overrides the default background colour.</td></tr><tr><td>Basket Button Color Override</td><td>Overrides the default basket button background colour.</td></tr><tr><td>Option Group Highlight Color Override</td><td>Overrides the default group background colour.</td></tr><tr><td>Option Group Hover Color Override</td><td>Overrides the default group hover colour.</td></tr><tr><td>Opened Group Text Color Override</td><td>Overrides the default group text colour.</td></tr><tr><td>Hover Group Text Color Override</td><td>Overrides the default group hover text colour.</td></tr></tbody></table>

![Theme Override Settings](https://621103948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsqWfi8ifBhTdkvf1vOlY%2Fuploads%2FnSsC2v3l03OH10mfVttz%2Fembed-single-theme-new-11_ln89pa.png?alt=media)

### Custom UI and Scripts

Upload and manage custom resources such as CSS or JavaScript to extend functionality or customise the configurator's appearance.

### Custom CSS

Inject custom CSS into the configurator to override styles or fine-tune the appearance beyond what the Theme settings provide. Enable **Use Custom CSS** and paste your stylesheet into the field below.

### Custom JavaScript

Inject custom JavaScript to extend functionality, respond to events, or integrate with third-party scripts. Enable **Use Custom JavaScript** and paste your code into the field below. Mimeeq embeds provide JavaScript events for product selection, configuration changes, add-to-basket actions, and basket submissions. See the [Mimeeq JavaScript API documentation](https://docs.mimeeq.com/custom-ui-guide/#inline-custom-cssjs-simple-customizations) for the complete event reference.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.mimeeq.com/configurator/embeds-and-translations/template-settings.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.