If your website supports multiple languages and you embed the SocialLadder Ambassador Dashboard via SSO, you can pass language context to the dashboard so your ambassadors see it in the correct language.
There are two things your embed code needs to handle:
Initial load — Tell the dashboard which language to display when it first loads.
Language change — Notify the dashboard if the ambassador switches languages on your website while the dashboard is open.
Getting Started
To begin, reach out to your SocialLadder contact and let them know which languages you'd like to support in the Ambassador Dashboard. SocialLadder will handle the translation configuration on our end.
Once that's in place, you'll need to update your embed code to pass language context to the dashboard, as described below.
Step 1 — Pass the Language on Initial Load
When loading the SocialLadder dashboard, pass the ambassador's current language as a parameter so the dashboard renders in the correct language from the start.
// The 6th parameter is the language code
loadSLWebFrame(areaGuid, deviceUUID, campGuid, resGuid, resetToken, "es");
Common language codes: en (English), es (Spanish), fr (French), de (German), pt (Portuguese), ja (Japanese).
If no language code is passed, the dashboard defaults to English.
Step 2 — Handle Language Changes
If your website has a language switcher and an ambassador changes their language while the dashboard is already loaded, you need to notify the dashboard so it can update.
Use this function to send the new language to the SocialLadder iframe:
// Get reference to the SocialLadder iframe
const slIframe = document.querySelector('#slWebFrame iframe');
// Notify SocialLadder when the language changes
function notifySocialLadderLanguage(languageCode) {
if (slIframe && slIframe.contentWindow) {
slIframe.contentWindow.postMessage({
action: 'sl_changeLanguage',
lang: languageCode },
'*');
}
}
Call notifySocialLadderLanguage from your website's language switcher whenever the language changes. For example:
// Example: call this from your language switcher's change handler
notifySocialLadderLanguage("fr");
How you detect the language change depends on your website's setup — the important thing is that notifySocialLadderLanguage is called with the new language code whenever a switch happens.
What Gets Translated
The translation covers standard navigation and content generated by your brand through the portal, like: Dashboard, Challenges, Rewards, Notifications, and Settings.
Custom content in the community rooms are not translated automatically.
Troubleshooting
Translation not appearing on initial load
Confirm you're passing a valid language code as the parameter in loadSLWebFrame. Log the value to verify it's not empty or "en". If the code looks correct, check with your SocialLadder contact that translation has been enabled for your community.
Language doesn't update when switching on the website
Make sure your language switcher calls notifySocialLadderLanguage with the new language code. Without this, the dashboard has no way to know the language changed after the initial load.
Only English displays
Check that your SocialLadder contact has confirmed translation is enabled for your community and that the requested languages are configured.
Mobile app not translating
Translation is available for the web dashboard only (desktop and mobile). However, our native mobile app does not currently support translation.
For implementation support, contact your SocialLadder onboarding specialist.