Interface: EmbedTheme
Visual theme configuration for Mimeeq embeds.
This interface provides comprehensive control over the visual appearance of Mimeeq configurator embeds. It allows for customizing colors, dimensions, styles, and layout behaviors to match your brand identity and website design.
A well-configured theme creates a seamless integration between your website and the configurator experience, enhancing brand consistency and user engagement.
Properties
accentColor?
optionalaccentColor:string
Primary accent color used for buttons, highlights, and interactive elements.
This color is applied to key interactive elements like primary buttons, selected options, and other UI components that need visual emphasis. It should typically match your brand's primary color.
Accepts standard CSS color values (hex, rgb, rgba). Example: "#0066CC" or "rgb(0, 102, 204)"
accentTextColor?
optionalaccentTextColor:string
Text color for accent elements.
This color is used for text that appears on accent-colored backgrounds, such as button labels. It should provide sufficient contrast with the accentColor for optimal readability.
Accepts standard CSS color values (hex, rgb, rgba). Example: "#FFFFFF" or "rgb(255, 255, 255)"
adjustToContainer
adjustToContainer:
boolean
Scales the configurator to fit its container element.
When true, the configurator will adjust its dimensions to fill the available space in its container element. This is useful for responsive layouts where the configurator needs to adapt to different screen sizes.
Default: false
backgroundColor?
optionalbackgroundColor:string
Background color for the configurator interface.
This color serves as the base canvas for the configurator and should provide good contrast with text and UI elements. For the best experience, use neutral colors that don't compete with the product visualization.
Accepts standard CSS color values (hex, rgb, rgba). Example: "#F5F5F5" or "rgb(245, 245, 245)"
basketButtonColor?
optionalbasketButtonColor:string
Color for the "Add to Basket" button.
This color is specifically applied to the basket/cart buttons, allowing them to stand out from other action buttons if desired. This is useful for creating visual hierarchy that emphasizes the purchase action.
Accepts standard CSS color values (hex, rgb, rgba). Example: "#00AA55" or "rgb(0, 170, 85)"
customCss?
optionalcustomCss:string
Custom CSS to apply to the configurator.
This CSS is applied to the configurator when useCustomCss is true. It should be valid CSS code and will be injected into the configurator's shadow DOM or scoped properly to avoid affecting the parent page.
Example: ".configurator-header { border-bottom: 2px solid #ccc; }"
customUi?
optionalcustomUi:boolean
Enables custom UI templates for the configurator.
When true, the configurator will use custom UI templates rather than the standard Mimeeq interface. This requires that custom UI templates have been defined for the customer account.
Default: false
group
group:
Partial<PaletteGroup>
Styling configuration for option groups.
Controls the visual presentation of option groups in the configurator, including colors for active, hover, and highlight states.
hotSpots?
optionalhotSpots:Partial<PaletteHotSpots>
Styling configuration for hotspots on 3D models.
Controls the appearance of interactive information points that appear on the 3D model, including colors and borders.
listModalClassName?
optionallistModalClassName:string
CSS class to apply to the product list modal.
This class is added to the modal container, allowing for custom styling through external CSS. This is useful for applying specific styles that aren't covered by the theme properties.
Example: "my-list-modal"
listModalHeight?
optionallistModalHeight:string
Height for the product list modal.
Defines the height of the modal dialog when displaying product lists in modal mode. Can use any valid CSS dimension value (px, %, vh, etc.).
Example: "700px" or "85%"
listModalOverflow?
optionallistModalOverflow:boolean
Controls how content behaves when exceeding the list modal dimensions.
When true, content that exceeds the modal dimensions will be contained within the modal with scrollbars. When false, the modal will grow to accommodate the content.
Default: false
listModalWidth?
optionallistModalWidth:string
Width for the product list modal.
Defines the width of the modal dialog when displaying product lists in modal mode. Can use any valid CSS dimension value (px, %, vw, etc.).
Example: "900px" or "80%"
mesh?
optionalmesh:Partial<PaletteMesh>
Styling configuration for highlighting 3D model parts.
Controls how selected or interactive parts of the 3D model are visually highlighted when users interact with them.
modalClassName?
optionalmodalClassName:string
CSS class to apply to the standard product configurator modal.
This class is added to the modal container, allowing for custom styling through external CSS. This is useful for applying specific styles that aren't covered by the theme properties.
Example: "my-custom-modal"
modalHeight?
optionalmodalHeight:string
Height for the standard product configurator modal.
Defines the height of the modal dialog when displaying standard product configurators in modal mode. Can use any valid CSS dimension value (px, %, vh, etc.).
Example: "600px" or "80%"
modalOverflow?
optionalmodalOverflow:boolean
Controls how content behaves when exceeding the modal dimensions.
When true, content that exceeds the modal dimensions will be contained within the modal with scrollbars. When false, the modal will grow to accommodate the content.
Default: false
modalWidth?
optionalmodalWidth:string
Width for the standard product configurator modal.
Defines the width of the modal dialog when displaying standard product configurators in modal mode. Can use any valid CSS dimension value (px, %, vw, etc.).
Example: "800px" or "90%"
modularClassName?
optionalmodularClassName:string
CSS class to apply to the modular product configurator modal.
This class is added to the modal container, allowing for custom styling through external CSS. This is useful for applying specific styles that aren't covered by the theme properties.
Example: "my-modular-modal"
modularModalHeight?
optionalmodularModalHeight:string
Height for the modular product configurator modal.
Defines the height of the modal dialog when displaying modular product configurators in modal mode. Can use any valid CSS dimension value (px, %, vh, etc.).
Example: "800px" or "90%"
modularModalWidth?
optionalmodularModalWidth:string
Width for the modular product configurator modal.
Defines the width of the modal dialog when displaying modular product configurators in modal mode. Can use any valid CSS dimension value (px, %, vw, etc.).
Example: "1200px" or "95%"
modularOverflow?
optionalmodularOverflow:boolean
Controls how content behaves when exceeding the modular modal dimensions.
When true, content that exceeds the modal dimensions will be contained within the modal with scrollbars. When false, the modal will grow to accommodate the content.
Default: false
preserveFont
preserveFont:
boolean
Controls whether to use the website's font or Mimeeq's default font.
When true, the embed will inherit fonts from the parent website rather than loading Mimeeq's default font. This creates a more consistent typography experience but requires that your website's fonts are accessible to the embed.
Default: false
preventScroll?
optionalpreventScroll:boolean
Prevents scrolling of the page behind modal dialogs.
When true, the underlying page will be locked from scrolling when a modal dialog is displayed. This creates a more focused experience by preventing interaction with the background content.
Default: false
useCustomCss?
optionaluseCustomCss:boolean
Enables custom CSS for styling the configurator.
When true, the custom CSS defined in the customCss property will be applied to the configurator. This allows for advanced styling beyond what's available through the theme properties.
Default: false