To allow users to select their preferred language, create a language dropdown in your HTML. Here's an example:
<select id="languageDropdown">
<option data-lang-code="en" data-notranslate>English</option>
<option data-lang-code="fr" data-notranslate>French</option>
<option data-lang-code="es" data-notranslate>Spanish</option>
</select>
Add JavaScript code to implement the "lzSwitchLanguage('fr')" function when the user selects a language from the dropdown. Use the selected language code as a parameter.
<script> document.getElementById('languageDropdown').addEventListener('change', function() { let selectedLanguage = this.options[this.selectedIndex].dataset.langCode; lzSwitchLanguage(selectedLanguage); }); </script>
To allow users to select their preferred language from a toggle, create a language toggle in your HTML. Here's an example:
<select id="toggle-container">
<button id="englishBtn" class="toggle-option active">English</button>
<button id="spanishBtn" class="toggle-option">Español</button>
</select>
Here is some sample Javascript Code to switch between the languages in a Toggle:
<script>
// Initial language state (English)
let lzCurrentLanguage = 'en';
// Get buttons
const englishBtn = document.getElementById('englishBtn');
const spanishBtn = document.getElementById('spanishBtn');
// Function to handle language toggle
englishBtn.addEventListener('click', function() {
if (lzCurrentLanguage !== 'en') {
lzCurrentLanguage = 'en';
englishBtn.classList.add('active');
spanishBtn.classList.remove('active');
}
});
spanishBtn.addEventListener('click', function() {
if (lzCurrentLanguage !== 'es') {
lzCurrentLanguage = 'es';
spanishBtn.classList.add('active');
englishBtn.classList.remove('active');
}
});
</script>