Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

The 4th edition of the Campaign Community Lens newsletter is out now!
SOLVED

Toggle Button

Avatar

Level 4

Hi all, 

 

I am currently trying to create a toggle button that will display "English" when I click on the English button or "French" when I click on the French button. How can I set up the English button so when it is clicked it shows the English page and when the French button is clicked it shows the French page? 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hello @StrawHatM23 

Here is a sample code for you to start.

<script>
function setLang(lang){
const urlParams = new URL(window.location.href);
urlParams.searchParams.set('l', lang);
window.location.href = urlParams;
}
</script> 
<%
var englishLang={text1:"Hello",text2:"World"};
var frenchLang={text1:"Bonjour",text2:"Monde"};
var selectedLang=ctx.vars.lang;
if(selectedLang == 'fr'){ 
	 var userLang=frenchLang; 
}else{ 
	var userLang=englishLang; 
}
%>
 <button onClick="setLang('en')">English</button> 
<button onClick="setLang('fr')">French</button> 
 <%= userLang.text1 %> <%= userLang.text2 %>

You will have to add a parameter in WebApp properties with the name as l and then create a variable with name lang.

1 Reply

Avatar

Correct answer by
Community Advisor

Hello @StrawHatM23 

Here is a sample code for you to start.

<script>
function setLang(lang){
const urlParams = new URL(window.location.href);
urlParams.searchParams.set('l', lang);
window.location.href = urlParams;
}
</script> 
<%
var englishLang={text1:"Hello",text2:"World"};
var frenchLang={text1:"Bonjour",text2:"Monde"};
var selectedLang=ctx.vars.lang;
if(selectedLang == 'fr'){ 
	 var userLang=frenchLang; 
}else{ 
	var userLang=englishLang; 
}
%>
 <button onClick="setLang('en')">English</button> 
<button onClick="setLang('fr')">French</button> 
 <%= userLang.text1 %> <%= userLang.text2 %>

You will have to add a parameter in WebApp properties with the name as l and then create a variable with name lang.