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.

Language Configuration Methods​

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

The preferred approach for configuring language settings is through Embed Templates. Templates allow you to centrally manage all configurator settings, including language, and apply them consistently across your implementations.

  1. Create or edit a template in the Mimeeq Admin Panel under Settings → Embed Templates
  2. Set the default language in the template's core settings
  3. Apply the template to your embed using the template attribute
<!-- 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
  • Template settings can be changed without modifying website code

2. Using the Locale Attribute​

For direct control over language without using a template, set the locale attribute on the <mmq-embed> component:

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

This approach is useful when you need to:

  • Override template language settings
  • Dynamically change the language based on user preferences
  • Test different language configurations

3. Dynamically Changing Language​

You can change the language programmatically by modifying the locale attribute:

// 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 Support​

Mimeeq technically supports all language codes.

By default, Mimeeq provides complete UI translations for English, Polish, and German, with ability to provide custom translations for all other languages. The languages available to your users are managed in the Mimeeq Admin Panel under the Languages section.

Note: Languages are configurable through the admin panel, which provides a user-friendly interface for enabling languages and seeing their respective locale codes.

Advanced Language Customization​

Custom Translations​

For cases where you need to modify specific text strings or add support for languages not officially supported, Mimeeq offers a custom translations feature:

<script>
  window.mimeeqCustomMessages = {
    // Override specific messages
    'header3d.finish': 'Complete Configuration',
    'historymodule.panelmenufooter.finish': 'Complete Configuration'
  };
</script>

For comprehensive information on customizing translations, see our Custom Translations guide.

Language Fallback Behavior​

When a requested language is not available:

  1. The configurator will first attempt to use the customer's default language
  2. If that's not available, it will fall back to English (en)
  3. Custom translations are applied after language selection

Implementation Examples​

Basic Implementation with Default Language​

<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>

Template-Based Implementation​

<!-- The language is defined in the template -->
<mmq-embed short-code="ABC123" template="retail_german_template"></mmq-embed>
<script src="https://cdn.mimeeq.com/read_models/embed/app-embed.js" async></script>

Language Switcher Implementation​

<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="product-configurator" template="template_id" short-code="ABC123" locale="en"></mmq-embed>

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

Legacy Support​

Deprecated Method

The following method uses the deprecated data-mimeeq attribute system and is included only for reference for existing implementations. New projects should use the methods described above.

<div data-mimeeq data-mimeeq-short-code="ABC123" data-locale="de"></div>
<script
  src="https://jrdgrq09nk.execute-api.eu-central-1.amazonaws.com/api/cpq/get-embed-short-code-data?shortCode=ABC123&html=1"
  rel="script"
  type="application/javascript"
  async></script>

For best results and future compatibility, migrate existing implementations to the web component approach using <mmq-embed>.