Skip to main content
  1. Memberstack 2.0
  2. Guides & Tutorials
  3. Miscellaneous

Memberstack Pre-built Modal Translations

Josh Lopez
Josh Lopez
  • Updated

⏱️ TL;DR

  • The Golden Rule: The Settings > Translations page in your Memberstack Dashboard only translates error messages and hosted SSO pages. It does not translate pre-built modals (Login, Signup, Profile, etc.).
  • How to translate pre-built modals: You must add a custom JavaScript object called window.memberstackTranslations to your website's header.
  • Crucial Script Placement: Your translations script must be placed before your main Memberstack installation script.
  • Syntax Warning: Ensure there is a comma , after every single translation line except the very last one. A single missing comma will crash your site's JavaScript (Uncaught SyntaxError: Unexpected identifier).

1) The Critical Distinction: Dashboard vs. Custom Script

Memberstack has two different translation systems. Getting them confused is the most common reason translations fail to show on a live site:

  • Dashboard Translation UI (Settings > Translations):
    • What it translates: System error messages (e.g., "Invalid password"), success messages, and Memberstack-hosted login/signup pages (used for SSO/OAuth).
    • Does it affect pre-built modals? No.
  • The Translations Script (window.memberstackTranslations):
    • What it translates: All the text, buttons, inputs, and placeholders inside your pre-built overlay modals (e.g., "Welcome Back", "Email Address", "Log In" buttons).
    • Does it affect error messages? No.

To fully translate your site, you must configure both systems.

2) Correct Script Placement & Webflow Gotchas

For Memberstack to read your custom translations, they must be loaded into the browser's memory before Memberstack initializes.

❌ The Incorrect Way:

If your main Memberstack installation script is in your global header, but you place your translation script in the footer or in Webflow's individual Page Settings, the main script will run first. It will see no translations, load the default English text, and then ignore your translation script when it finally loads.

The Correct Way:

Both scripts should be in your global <head> (or Webflow's global Site Settings Custom Code panel), with the translation script sitting directly above the main Memberstack installation script.

⚠️ Webflow-Specific Code Loading Rule:

Webflow always loads Site Settings Custom Code before Page Settings Custom Code.
If you have your main Memberstack script in your global Site Settings, you cannot put your translation script in your individual Page Settings. It will load too late. Keep both scripts in your global Site Settings Custom Code panel.

3) Quick-Start Boilerplate Template

Instead of writing your script from scratch, use this basic template in your global header (directly above your main Memberstack script), then edit the text inside the quotation marks to match your target language:

4) JavaScript Syntax Requirements (Avoid the Comma Crash)

When writing your translation dictionary, you are writing raw JavaScript. The most common error is a missing comma, which results in a console error like:
Uncaught SyntaxError: Unexpected identifier '...'

The Syntax Rules:

  1. Every value must be wrapped in matching quotation marks (key: "value" or key: 'value').
  2. You must place a comma , at the end of every single line except the very last line before the closing bracket }.

5) Multi-Language Examples (German, Spanish, French)

You only need to include the keys you wish to translate. Any keys you omit will automatically fall back to their default English values.

🇩🇪 German (Deutsch) Example:

🇪🇸 Spanish (Español) Example:

🇫🇷 French (Français) Example:

6) Complete Translation Keys Reference

Email Input Component

  • email_address - "Email Address"
  • email_error_message - "Please enter a valid email address"

Password Input Component

  • password - "Password"
  • password_error_message - "Minimum 8 characters required"
  • forgot_password - "Forgot Password?"

Login Modal

  • login_to_your_account - "Log in to your account"
  • login_email_placeholder - "Enter your email"
  • login_password_placeholder - "Enter your password"
  • login - "Log in"
  • login_with_email - "Continue with Email"
  • login_with_password - "Log in with Password"
  • dont_have_an_account - "Don't have an account?"
  • continue_with - "Continue with"
  • or - "or"

Signup Modal

  • create_an_account - "Create an account"
  • already_have_an_account - "Already have an account?"
  • continue_with_email - "Continue with Email"
  • signup_with_password - "Signup with Password"
  • signup_button - "Sign up"
  • signup_email_placeholder - "example@domain.com"
  • signup_password_placeholder - "Enter Password"

Password Reset Modal

  • reset_your_password - "Reset your password"
  • reset_instructions - "We'll email you a 6 digit code to reset your password."
  • reset_email_placeholder - "Enter your email"
  • reset - "Send Link"
  • reset_already_have_code - "I already have a code"

Password Token Modal

  • reset_enter_code - "Enter your 6-digit code"
  • reset_password_placeholder - "New password"
  • reset_confirm_reset - "Confirm & Reset"

Passwordless Login Modal

  • passwordless_token_heading - "Create an account"
  • login_passwordless_instructions - "Enter the verification code sent to your email address"
  • login_verification_code - "Verification Code"
  • login_verify_email - "Verify Email"

Test Card Modal (Stripe Test Mode)

  • test_card_title - "Copy Stripe Test Card"
  • test_card_subtitle - "Test mode only. Live members will never see this modal."
  • test_card_copy_button - "Copy Stripe Test Card"
  • test_card_copied_button - "Copied Stripe Test Card"
  • test_successful_payments - "Test Successful Payments"
  • test_declined_payments - "Test Declined Payments"
  • test_card_visa - "Visa Debit"
  • test_card_mastercard - "Mastercard"
  • test_card_amex - "American Express"
  • test_card_generic_decline - "Generic decline"
  • test_card_insufficient_funds - "Insufficient funds"
  • test_card_instructions - "Paste the card number on the next screen. Use any valid expiry date and 3-digit CVC."
  • test_card_continue - "Continue to Test Checkout"
  • test_card_alternatives - "alternative test cards"

Success Messages

  • success_title - "Success!"
  • password_reset_success - "Your password has been reset. Please login with your new credentials."

Common Buttons

  • save_button - "Save"
  • cancel_button - "Cancel"
  • copy_button - "Copy"
  • copied_button - "Copied!"
  • remove_button - "Remove"
  • upgrade_button - "Upgrade"

Profile Modal Navigation

  • profile_button - "Profile"
  • security_button - "Security"
  • plans_button - "Plans"
  • team_button - "Team"
  • logout_button - "Logout"

Section Titles

  • profile_information_title - "Profile Information"
  • security_title - "Security"

Profile Image

  • upload_profile_image - "Upload Profile Image"
  • replace_image - "Replace Image"

Profile/Security Settings

  • delete_account - "Delete Account"
  • set_password - "Set Password"
  • change_password - "Change Password"
  • connect_additional_accounts - "Connect Additional Accounts"
  • disconnect_provider - "Disconnect"
  • connect_with_provider - "Connect with"
  • delete_confirmation_title - "Are you sure? This cannot be undone."
  • delete_confirmation_message - "You will be logged out and your account will be deleted."
  • yes_delete_account - "Yes, Delete Account"

Team Management

  • team_title - "Team"
  • loading_text - "Loading..."
  • regenerate_invite_link - "Regenerate Invite Link"
  • seats_full_warning - "You've used all your seats."
  • are_you_sure - "Are you sure?"
  • member_avatar_alt - "Member Profile Avatar"

Plans Management

  • plans_title - "Plans"
  • paid_plans - "Paid Plans"
  • team_plans - "Team Plans"
  • free_plans - "Free Plans"
  • no_plans_message - "You currently have no plans."
  • manage_subscriptions - "Manage Subscriptions"
  • leave_team - "Leave Team"

7) For Developers: Direct DOM/NPM Package Method

If you are building a custom application using @memberstack/dom rather than Webflow, you do not need to rely on the global window object.

Instead, you can pass your translations directly into the options object when calling openModal programmatically:

❓ Frequently Asked Questions (FAQ)

Q: I added the translation script, but my modals are still in English. Why?

This is almost always due to script order or a JavaScript error.

  1. Right-click your page, select Inspect, and look at the Console tab. If you see a red error message about Unexpected identifier, you are missing a comma in your translation script.
  2. Ensure your translation script is placed physically above the Memberstack script in your HTML code.

Q: Do I need to write translations for things like "First Name" or custom fields?

No. Custom fields (like "First Name" or "Company Name") are created by you in the Memberstack Dashboard. The labels and placeholders for those custom fields are defined directly inside your dashboard settings, so you can write them in your target language right there—no custom translation script keys needed!

Q: Can I use this script to dynamic-switch languages based on what page the user is on?

Yes! Since this is raw JavaScript, you can write a script that checks your current URL path (e.g., if the URL contains /es/ or /fr/) and loads a different set of translations dynamically.

Was this article helpful?

Didn’t find your answer?

Get an instant answer from Rey, or reach a human. Either way, we’re happy to help.

Ask Rey AI Ask the community Contact support

Comments

No comments yet. Start the conversation below.

Please sign in to leave a comment.

Sitemap
Ask the AINew Ask the Community Message Support
Slack Channel Product Wishlist Report a Bug
Twitter - @Memberstack System Status
Terms & Privacy Policies