A modular, plug-and-play JavaScript solution for adding a language toggle button to any website. It uses the Google Translate to translate content without requiring a page reload and perfectly restores the original text when switching back.
Version 2 simplifies everything: you no longer need to add special classes to your content.
- Automatic Content Detection: The script automatically manages all top-level elements in your
<body>, no more manual tagging. - Use Any Button: Provide your own custom-styled button element for a seamless fit with your site's design.
- Fallback Button: If you don't provide a button, the script creates a default one for you.
- No Page Reload: Switches between languages instantly for a smooth user experience.
- Perfect Restoration: Restores the original, untouched HTML content.
- Self-Contained & Configurable: Easy to set up with a single function call.
- Intelligent Persistence: Remembers the user's translated language choice across visits. It clears this preference when the user switches back to the original language, preventing unwanted auto-translation.
You can add the traslate-toggle.js file in two ways
- Download the
translate-toggle.jsfile and place it in your project's script folder (e.g.,/js/). - Fetch the file with
<script src="https://cdn.jsdelivr.net/gh/Sarin-jacob/LanguageToggle/translate-toggle.js"></script>
To ensure an element is never translated by Google (like a brand name or code snippet), add the class notranslate to it. This is a standard class that Google Translate respects.
<p>
My company is called <span class="notranslate">BrandName Inc.</span> and we are the best.
</p>Include translate-toggle.js at the bottom of your <body> and call the initLanguageToggle() function. You can either let the script create a button for you, or provide your own.
Option A: Automatic Button Creation (Easiest) Simply call the function with your language settings. You can find language codes here
<!-- <script src="/path/to/translate-toggle.js"></script> -->
<script src="https://cdn.jsdelivr.net/gh/Sarin-jacob/LanguageToggle/translate-toggle.js"></script>
<script>
// The script will create and style its own button.
initLanguageToggle({
sourceLang: 'en',
targetLang: 'ml',
sourceSymbol: 'Aa',
targetSymbol: 'അ'
});
</script>Option B: Using Your Own Custom Button Add a button to your HTML and pass the element to the script.
<!-- In your HTML body -->
<button id="my-button"></button>
<!-- At the bottom of your <body> -->
<!-- <script src="/path/to/translate-toggle.js"></script> -->
<script src="https://cdn.jsdelivr.net/gh/Sarin-jacob/LanguageToggle/translate-toggle.js"></script>
<script>
// Get your button element
const myCustomButton = document.getElementById('my-button');
// Initialize the script, passing your button in the config
initLanguageToggle({
sourceLang: 'en',
targetLang: 'ml',
sourceSymbol: 'Aa',
targetSymbol: 'അ',
toggleButton: myCustomButton
});
</script>Pass a configuration object to initLanguageToggle().
| Option | Type | Default | Description |
|---|---|---|---|
sourceLang |
string |
'en' |
The two-letter code for the original language of your page. |
targetLang |
string |
'hi' |
The two-letter code for the language to translate to. |
sourceSymbol |
string |
'A' |
The text/symbol to display on the button for the source language. |
targetSymbol |
string |
'अ' |
The text/symbol to display on the button for the target language. |
toggleButton |
Element |
null |
Optional. A reference to an HTML element to use as the toggle button. |