How to Hide Language Variations from Different Countries on Your HubSpot Landing Pages

[Franci]

Why is This Important?

As a global marketer, providing an excellent user experience across regions is crucial. HubSpot’s default language-country switcher allows visitors to choose their preferred language and region, but it can show irrelevant options, confusing users.

In countries like Switzerland and Luxembourg, where multiple official languages exist, visitors might see options they don’t need. For example, a Swiss visitor could see French, German, Italian, or even English options — all valid in Switzerland.

The Problem: Confusing Language Options

By default, HubSpot allows users to switch between all available language-country options, such as:

• /en-us/ (English - United States)

• /fr-ch/ (French - Switzerland)

• /de-at/ (German - Austria)

This can be confusing for users if they see options irrelevant to their country.

The Solution: A Dynamic, Country-Specific Language Switcher

With a little bit of custom code, we can make the language switcher more intelligent by ensuring that only the language-country options relevant to the user’s country (based on the URL) are visible.

Let’s walk through how you can implement this.

---

The Code: A Simple, Universal Solution

Here’s the script that will dynamically hide language-country variations that don’t match the visitor’s country:

<script>
document.addEventListener("DOMContentLoaded", function () {
// Extract language-country from the URL path (e.g., "it-it" from "/it-it/")
const pathSegments = window.location.pathname.split("/");
const currentLangCountry = pathSegments[1]; // Example: "it-it"

if (!currentLangCountry || !currentLangCountry.includes("-")) {
  return;
}

const currentCountry = currentLangCountry.split("-")[1].toLowerCase(); // Extract "it" from "it-it"

// Find the language switcher menu
const languageSwitcher = document.querySelector(".languageswitcher");

if (!languageSwitcher) {
  return;
}

// Get all language options
const options = languageSwitcher.querySelectorAll(".hs-language-switcher__item a");

options.forEach(option => {
  const href = option.getAttribute("href");

  // Extract language-country from href (supports both relative and absolute URLs)
  const langCountryMatch = href.match(/\/([a-z]{2}-[a-z]{2})\//i);

  if (langCountryMatch) {
    const langCountry = langCountryMatch[1]; // Example: "fr-ch"
    const optionCountry = langCountry.split("-")[1].toLowerCase(); // Extract "ch" from "fr-ch"

    if (optionCountry !== currentCountry) {
      option.style.display = "none"; // Hide unwanted options
    }
  }
});
});
</script>

How Does This Script Work?

1. Extracts Country from the URL: The script checks the current page URL (e.g., /fr-ch/ or /en-us/) and extracts the country code (e.g., ch for Switzerland).

2. Filters the Language Options: It looks for the language switcher (.languageswitcher) and checks each available language option. If the country code in the option’s link doesn’t match the country extracted from the URL, that option is hidden.

3. Works for Any Country-Language Pair: Whether you’re dealing with en-us, fr-ch, de-at, or any other language-country pair, the script adapts and hides irrelevant options.

 

Why This Is So Useful

• Tailored for Local Visitors: The script ensures that your landing pages are more personalized by showing only the relevant language options for the country the visitor is from.

• Improves User Experience: By hiding unnecessary options, you reduce user confusion, making it easier for visitors to navigate and find the content they need.

• Works for Multilingual Countries: For countries with multiple official languages like Switzerland and Luxembourg, all language variations will still be shown when they are relevant to the visitor’s region.

How to Add This Script to Your HubSpot Landing Page

1. Open Your Landing Page: In HubSpot, navigate to the landing page where you want to implement this feature.

2. Go to the Settings -> Advanced: Add the above script to the Footer HTML section.

3. Test It: After you’ve added the script, visit your page and change the URL to reflect different language-country pairs. You should only see the language options that correspond to your country in the URL.

---

Final Thoughts

This simple script is a game-changer for creating a more intuitive, localized experience on your HubSpot landing pages. By hiding language variations from different countries, you ensure that your international visitors only see the content relevant to their region, making the entire experience more seamless and user-friendly.

If you found this helpful, feel free to share it with your fellow marketers in the HubSpot community! And if you have any questions, don’t hesitate to reach out. Happy optimizing! 🌍✨

[Jaycee_Lewis]

Hey @Franci 👋 This is great! I can't accept your OP as a solution, but if you'll come back and leave a comment, I can mark that one as a solution so you get even more visibility for your hard work. — Jaycee

[Franci · Accepted solution]

Hello @Jaycee_Lewis, that would be great! I am sure plenty of customers would find this helpful! Thank you! 😁

[PAngioi]

Great solution!

[Alessio_M]

This is truly a game-changer! Thanks for sharing this solution with the community!

[aimar17]

Great! I've been looking forward to a solution for ages...Great job, thanks!