How to localize Memberstack modals and error messages in Spanish using Weglot on a Webflow site? Answered

• 

  Jayess

  • August 12, 2023 16:32

  Hello Dean 👋

  Great question. So it looks like Weglot can translates text. If you’re using a data-ms-modal attribute to launch your signup then Memberstack adds text with JS, so it will not work.

  The simplest solution is to drop the pre-build UI and use some of our Webflow components instead. You can copy and paste them right into the page and Weglot will be able to translate them like any other element 🎉

  https://www.memberstack.com/freebies

  Here are articles for setting up signup, login, profile, and forgot password forms incase you need all of them.

  Hope that helps 💪

  0
• 

  Chad

  • January 02, 2025 15:34

  GM All - can anyone recommend localization (Spanish) our webflow/memberstack onboarding/registration forms error messages, etc. For example they put in a wrong email and they get the default error message in Spanish. We are working currently with the webflow localization paid feature but also looked at Weglot but did not see that capability? Thank you!

  0
• 

  Raquel Lopez

  • January 02, 2025 15:35

  Hola Chad!

  It's been a while since I used Weglot, but I assume they translate the content that's already on the page (correct me if I'm wrong). The thing is, that this content inside the alert component is dynamically generated by memberstack. So far, they only allow translation, not localization. Anytime you use Memberstack's attributes to handle membership related transactions (login, logout, update profile ... ) you'll be bound to how memberstack handles the the alerts. The good thing is that you can handle those transactions manually by using the frontend API already available in the page, and therefor handle the localization part whenever it throws an error.

  To give you an idea, the script would look something like this, and should handle any language that you include in the object. Keep in mind that this is an example. This snippet was generated with the help of ReyBot 

  <script>
    const translations = {
      en: {
        loginError: "Login failed. Please check your credentials.",
        networkError: "Network error. Please try again later."
      },
      es: {
        loginError: "Error de inicio de sesión. Por favor, verifique sus credenciales.",
        networkError: "Error de red. Por favor, inténtelo de nuevo más tarde."
      }
    };
  
    const userLanguage = navigator.language.startsWith('es') ? 'es' : 'en'; // Detect user's language
  
    async function login(email, password) {
      try {
        const response = await $memberstackDom.loginMemberEmailPassword({ email, password });
        if (response.error) {
          throw new Error(response.error);
        }
        // Handle successful login (e.g., redirect or show a success message)
        console.log("Login successful!");
      } catch (error) {
        // Handle errors
        if (error.message.includes("Network")) {
          alert(translations[userLanguage].networkError);
        } else {
          alert(translations[userLanguage].loginError);
        }
        console.error("Login error:", error);
      }
    }
  
    // Example usage
    const email = "user@example.com"; // Replace with actual user input
    const password = "password123"; // Replace with actual user input
    login(email, password);
  </script>
  

  0
• 

  Chad

  • January 02, 2025 15:36

  Thank you Raquel Lopez great! Aman Devchandani FYI

  0

Please sign in to leave a comment.