Automatic Language Redirection in HighLevel

ghl, javascript, multilingual

Main product image

Automatic Language Redirection in HighLevel

Learn how to automatically redirect users to their preferred language page using JavaScript and browser language detection.

Are you using multiple languages for your HighLevel pages? Then this video is for you! You’re probably having something like this: a page where the user can switch the languages just by clicking a button, and then you have the different languages on different pages. But the user already set his language in the browser, so why can we not do it automatically?

I’m going to show you how you can do this.

Overview

This solution automatically detects the user’s browser language and redirects them to the appropriate language version of your website. Instead of requiring manual language selection, users are automatically taken to their preferred language page.

Implementation Steps

Step 1: Set Up Your URLs

First, we need to define the URLs for each language page. In your HighLevel page builder, go to the tracking code section and insert this JavaScript:

// set your URLs for each language
const urls = {
    'es': 'https://demo.web.de.com/es',
    'de': 'https://demo.web.de.com/de',
};

Important Notes:

Step 2: Detect Browser Language

Next, we get the user’s browser language and convert it to a short format:

// gets the users language from browser settings
var userLang = navigator.language || navigator.userLanguage;
var shortLang = userLang.slice(0, 2);

How it works:

Step 3: Implement Redirection Logic

Finally, we loop through all available languages and redirect if a match is found:

// redirect if available
for (lang in urls){
  if (shortLang == lang) {
    window.location.href = urls[lang];
  }
}

The complete script:

<script>
// set your URLs for each language
const urls = {
    'es': 'https://demo.web.de.com/es',
    'de': 'https://demo.web.de.com/de',
};
// gets the users language from browser settings
var userLang = navigator.language || navigator.userLanguage;
var shortLang = userLang.slice(0, 2);
// redirect if available
for (lang in urls){
  if (shortLang == lang) {
    window.location.href = urls[lang];
  }
}
</script>

How to Implement in HighLevel

  1. Open your main page in the HighLevel page builder
  2. Go to tracking code section
  3. Insert the complete script above
  4. Update the URLs to match your actual domain and page structure
  5. Save and test your implementation

Testing Your Implementation

To verify the redirection works correctly:

  1. Test with English browser: Should not redirect (stays on main page)
  2. Test with German browser: Should automatically redirect to German page
  3. Test with Spanish browser: Should automatically redirect to Spanish page

Customization Options

Adding More Languages

You can easily extend this to support additional languages:

const urls = {
    'es': 'https://yoursite.com/es',
    'de': 'https://yoursite.com/de',
    'fr': 'https://yoursite.com/fr',
    'it': 'https://yoursite.com/it',
    'pt': 'https://yoursite.com/pt'
};

Fallback Language

You can add a fallback for unsupported languages:

// redirect if available
var redirected = false;
for (lang in urls){
  if (shortLang == lang) {
    window.location.href = urls[lang];
    redirected = true;
    break;
  }
}

// If no language match found, redirect to default
if (!redirected) {
    window.location.href = 'https://yoursite.com/en'; // Default English page
}

Browser Compatibility

This solution works with:

Benefits

Common Use Cases

Troubleshooting

If redirection isn’t working:

  1. Check browser language settings - ensure the browser is set to a supported language
  2. Verify URLs - make sure your language page URLs are correct and accessible
  3. Clear browser cache - sometimes cached pages can interfere with redirection
  4. Check console errors - look for JavaScript errors in browser developer tools

Final Result

This is how you automatically redirect users to a multilingual page by the browser language. The solution is simple, effective, and works immediately once implemented.

I hope you find this video useful! See you in the next one.

Resources