Change Quiz Language

You can change the quiz language in the Quiz Settings or Quiz Settings -> Messages.

If your language is not on the list or you don’t like the translation, you can change every instance (buttons, placeholders, etc.) in the Messages tab.

Some buttons may carry over the original English translation, which overrides the quiz language. If this happens, you can change the button’s text manually in the Quiz Builder -> Question settings.

For Shopify: If you’re using a multi-languge plugin, changing the quiz language will automatically add a locale parameter to the checkout URL.

Multi-language quizzes

Our app doesn’t support multi-language quizzes. However, there’s a workaround.

You can create multiple quizzes, each one in a different language, and show/hide them based on your customers’ language.

You can either add one on a separate page on your store (eg quiz-en, quiz-de, quiz-fr…) or have your developer create a script that displays the correct quiz depending on the browser language.

Show quiz popup based on a browser language 

The following code snippet displays the correct quiz depending on the browser language. It needs adjusting to match your quiz IDs and should be added to your website’s theme directly (not the JavaScript section in the app).

 

document.addEventListener("DOMContentLoaded", function() {
  // Check browser's preferred language (get the first two characters to ignore region)
  const language = navigator.language.substring(0,2);
  
  // Your mapping of languages to quiz IDs
  const quizMapping = {
    'en': 'abc123',
    'fr': 'dfg456',
    'de': 'xyz423'
  };

  // Default language (fallback to English if not found)
  const defaultQuizId = quizMapping[language] || quizMapping['en'];

  // Find all quiz links and update the href
  const quizLinks = document.querySelectorAll('a[href^="#quiz-"]');
  quizLinks.forEach(link => {
    link.setAttribute('href', '#quiz-' + defaultQuizId);
  });

  // Find all iframes with quiz URLs and update the src attribute and the data-url attribute of the parent div
  const quizIframes = document.querySelectorAll('iframe[src^="https://admin.revenuehunt.com/public/quiz/"]');
  quizIframes.forEach(iframe => {
    const newSrc = iframe.src.replace(/quiz\/\w+/, 'quiz/' + defaultQuizId);
    iframe.src = newSrc;

    // If the parent div has the data-url attribute, update it as well
    const parentDiv = iframe.parentElement;
    if (parentDiv && parentDiv.hasAttribute('data-url')) {
      const newDataUrl = parentDiv.getAttribute('data-url').replace(/quiz\/\w+/, 'quiz/' + defaultQuizId);
      parentDiv.setAttribute('data-url', newDataUrl);
    }
  });
});

Note: make sure that you don’t publish two quizzes on the same page, as this may lead to unwanted behavior.

Redirect to translated product URL

Our plugin doesn’t support multi-language stores, as only the main product (in the original language) can be synced with the Product Recommendation Quiz app.

However, if you want, you can create a quiz in a different language. Then, instead of adding a product to cart, you can change the checkout settings to “link to product” and point customers to the translated product page. By default, the customer will be redirected to the original product URL, but you can force an automatic URL change via JavaScript. For example, you can tell the Results Page to automatically change all the links from this:

https://www.example.com/products/productA

to this:

https://www.example.com/en/products/productA

This way your customers will be automatically redirected to the translated product page.

Here‘s how to change the checkout settings.

Here‘s the JavaScript code that you can use to point customers to a translation of a product.

For  example, to redirect to an English translation of a product, one can use:

let shopURL = "https://www.example.com";

var links = document.querySelectorAll(".lq-product a");

for (let i = 0; i < links.length; i++) {
var href = links[i].href;
links[i].href = href.replace(shopURL,shopURL+"/en");
}

Make sure to replace the https://www.example.com with your store URL and change the shopURL+"/en" to the languge code you have set up in your store (for example, shopURL+"/fr" for French).