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

Dean Fankhauser asked August 12, 2023 16:30

Answered

We're using Weglot for all our translations and want to apply it to your modals for sign up, settings etc. What's the best way to integrate this with Weglot and get it all working?

You can see our Spanish site here: https://promptpal.net/es

It's all translated except for the Memberstack modals. What're we doing wrong?

4 comments

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>

Chad January 02, 2025 15:36

Thank you Raquel Lopez great! Aman Devchandani FYI

0

Please sign in to leave a comment.