Skip to main content

Language Configuration in Mimeeq

This guide explains how to configure language settings for Mimeeq Configurator embeds, allowing you to provide a localized experience for your users.

Built-in Translations​

Mimeeq provides complete UI translations for three languages out of the box:

LanguageLocale Code
Englishen
Germande
Polishpl

For all other languages, you need to provide custom translations.

info

Product content (names, descriptions, option labels) is managed separately in the Mimeeq Admin Panel and must be translated for each language you want to support.

Language Priority​

When determining which language to display, Mimeeq follows this priority order:

  1. locale attribute on the embed element (highest priority)
  2. Template language setting from the embed template
  3. Customer default language configured in your Mimeeq account

This means you can set a default language in your template but override it per-embed when needed.

Configuration Methods​

Mimeeq offers multiple methods to set the language for your configurator, listed here in order of recommendation:

The preferred approach is configuring language through Embed Templates:

  1. Go to Settings → Embed Templates in the Admin Panel
  2. Create or edit a template
  3. Set the Language in the template settings
  4. Apply the template to your embed
<!-- Using a template that already has language settings -->
<mmq-embed short-code="ABC123" template="your_template_id"></mmq-embed>

Benefits:

  • Centralized configuration management
  • Consistent settings across multiple embeds
  • Easier maintenance and updates
  • Changes apply without modifying website code

2. Using the Locale Attribute​

Override the template language by setting the locale attribute:

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

Use this when you need to:

  • Override template language for specific pages
  • Dynamically change language based on user preferences
  • Test different language configurations

3. Dynamically Changing Language​

Change the language programmatically:

// Get a reference to your embed
const configurator = document.querySelector('mmq-embed');

// Change the language to German
configurator.setAttribute('locale', 'de');

This allows you to create language switchers or respect user language preferences stored in cookies or browser settings.

// Example of setting language based on user preference
document.addEventListener('DOMContentLoaded', () => {
  const userLanguage = getUserPreferredLanguage(); // Your function to get preference
  const configurator = document.querySelector('mmq-embed');
  if (configurator && userLanguage) {
    configurator.setAttribute('locale', userLanguage);
  }
});

Language Fallback Behavior​

When a requested language is not available or translations are missing:

  1. The configurator attempts to use the customer's default language
  2. If that's unavailable, it falls back to English (en)
  3. Custom translations (if defined) are applied after language selection

Implementation Examples​

Basic Implementation​

<mmq-embed short-code="ABC123" template="template_id" locale="en"></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>
<!-- Language is defined in the template -->
<mmq-embed short-code="ABC123" template="german_retail_template"></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>

Language Switcher​

<div class="language-selector">
  <button onclick="changeLanguage('en')">English</button>
  <button onclick="changeLanguage('de')">Deutsch</button>
  <button onclick="changeLanguage('pl')">Polski</button>
</div>

<mmq-embed id="configurator" short-code="ABC123" template="template_id"></mmq-embed>

<script>
  function changeLanguage(lang) {
    document.getElementById('configurator').setAttribute('locale', lang);
  }
</script>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>

Browser-Based Language Detection​

document.addEventListener('DOMContentLoaded', () => {
  const configurator = document.querySelector('mmq-embed');
  
  // Get browser language (e.g., "en-US" -> "en")
  const browserLang = navigator.language?.substring(0, 2);
  
  // Only set if it's a supported language
  const supportedLanguages = ['en', 'de', 'pl'];
  if (browserLang && supportedLanguages.includes(browserLang)) {
    configurator.setAttribute('locale', browserLang);
  }
});

Adding More Languages​

To support languages beyond English, German, and Polish:

  1. Enable the language in Admin Panel → Settings → Languages
  2. Provide custom translations using window.mimeeqCustomMessages
  3. Translate product content in the Admin Panel

See Custom Translations for detailed instructions on providing UI translations.

Quick Example​

<script>
  window.mimeeqCustomMessages = {
    'header3d.finish': 'Terminer',
    'historymodule.panelmenufooter.finish': 'Terminer',
    'summarypanel.addToCart': 'Ajouter au panier',
    // ... more translations
  };
</script>

Multi-Language Support​

For sites supporting multiple languages:

<script>
  window.mimeeqCustomMessages = {
    fr: {
      'header3d.finish': 'Terminer',
      'summarypanel.addToCart': 'Ajouter au panier',
    },
    es: {
      'header3d.finish': 'Finalizar',
      'summarypanel.addToCart': 'Añadir al carrito',
    },
  };
</script>

Managing Languages in Admin Panel​

Languages available to your users are managed in Admin Panel → Settings → Languages. This interface allows you to:

  • Enable or disable languages
  • See the locale codes for each language
  • Set the default language for your account

Authentication Embed​

The <mmq-auth> component also supports the locale attribute:

<mmq-auth short-code="AUTH001" locale="de"></mmq-auth>

Note that authentication embeds don't use embed templates, so language must be set via the attribute.

Legacy Support​

Deprecated Method

The following method uses the deprecated data-mimeeq attribute system. New implementations should use the web component approach described above.

<div data-mimeeq data-mimeeq-short-code="ABC123" data-locale="de"></div>