How to translate Memberstack error messages and templates into multiple languages when using Webflow's native localization? Answered

• 

  Marc Hudson

  • January 11, 2024 19:14

  EDITED: I’m not aware of this being available with MS right now (hopefully I’m wrong) but this is on my TODO list as well.

  Here’s some rough code. It wraps the MS method in your own function. Seems to work well but needs thorough testing. It also relies on the MS message Strings not changing in future, so if you can use a library or API to translate any text String, it would be more robust:

  const originalMethod = $memberstackDom._showMessage; // Store the original method
  
  $memberstackDom._showMessage = function(text, isError) {
    // Your code to run before the original method.
    console.log('$memberstackDom._showMessage was called.', text);
  
    if (!!text) {
      switch(text) {
        case 'Your password has been updated.':
          text = 'Su contraseña ha sido actualizada.';// Spanish
          break;
        case 'The provided password is invalid.':
          text = 'La contraseña proporcionada no es válida.';// Spanish
      }
    } 
    // Call the original method.
    originalMethod.apply(this, [text, isError]);
  };

  * I will not be held responsible for my Spanish :)

  For anyone who’s interested in future, here’s a working version:

  HELP.waitFor(window, '$memberstackDom', 50, function() {
          // Original MS method.
          const msShowMessage = $memberstackDom._showMessage;
          // Wrapper function.
          $memberstackDom._showMessage = function(text, isError) {
            let lang = LANG.currentLang();
            // If not language != English and Weglot has loaded.
            if (lang != 'en' && HELP.checkKeyExists(window, 'Weglot')) {
              Weglot.translate({
                'words':[{"t": 1, "w": text}],
                'languageTo': lang
              }, function(data) {
                // Call original method with translated message.
                msShowMessage.apply(this, [data[0], isError]);
              });
            }
            else {
              // Show original message without translating.
              msShowMessage.apply(this, [text, isError]);
            }
          };
      });

  This code uses my helper function, detailed here:
  https://memberstack.slack.com/archives/C033F0SLTLK/p1694103784392219?thread_ts=1693990652.521599&channel=C033F0SLTLK&message_ts=1694103784.392219

   

  It’a also checks to see if Weglot has loaded (if you’re using that service…), if it hasn’t or you’re using the base language (‘en’ for English, in my case), it just outputs the message with no translation.
  LANG.currentLang() just returns a 2-character country code String such as ‘es’ for Spain, or ‘en’.

   

  Seems to be working nicely but needs more testing to cover edge cases.
  1
• 

  Duncan from Memberstack

  • January 25, 2024 02:49

  Thanks for sharing this solution, Marc! 🙏

  0
• 

  d yashovardhan

  • December 20, 2024 00:07

  How can we localise the emails and other labels (reference templates)?

  0
• 

  Raquel Lopez

  • December 20, 2024 00:08

  To translate UI messages, you can go inside the Memberstack Dashboard to: Settings > Translation

  Be aware that Memberstack as it is, only supports one language, not many. If you need to use more than one language you'll need to use a localization service like Weglot, localizer, etc.

  Emails can only be sent in one language.
  Docs here: https://docs.memberstack.com/hc/en-us/articles/7838832577563-Translate-the-Memberstack-UI

  0
• 

  d yashovardhan

  • December 20, 2024 00:09

  We are using the native loclization from Webflow, but guess that's not going to work with Memberstack messages, would weglot / localize work in this scenario? We currently work with 2 languages, but hope to scale to 5 soon if all goes well. Do we have published feature roll out plan along this vector?

  0
• 

  Raquel Lopez

  • December 20, 2024 00:09

  By messages you mean emails?

  0
• 

  d yashovardhan

  • December 20, 2024 00:09

  messages => system notification (to scale beyond one language), emails included.

  0
• 

  Raquel Lopez

  • December 20, 2024 00:10

  Well... The emailing part is the hard part. You could use some Webhooks, Make and an Email Service to send transactional emails to replace Memberstack native emails (that would mean disabling all memberstack emails and use your email service to send all emails) there should be a custom field in ms that would indicate the service which language to send the email.

  0

Please sign in to leave a comment.