Language detection and dynamic translation

In a globalized environment, offering multi-language support is essential for inclusivity and accessibility. Power Pages (formerly Power Apps Portals) supports language detection and dynamic translation, allowing content to adapt to the user’s preferred language either automatically or via selection.

This guide explains how to set up automatic language detection, integrate translation services, and enable a seamless multilingual experience on Power Pages portals.

Key Concepts

Language Detection: Identify the user’s browser or system language or use AI to detect input language.
Dynamic Translation: Real-time or pre-translated content rendering using translation APIs like Microsoft Translator.
Multilingual Portals: Enable multiple languages in Power Pages and provide translated content.
Contextual Rendering: Display the translated content dynamically based on language preference.

Use Case

A portal visitor from Spain opens your English default portal. The system detects their browser’s preferred language as Spanish and automatically translates the content or redirects to the Spanish version.

Step-by-Step Implementation

Step 1: Enable Multiple Languages in Power Pages

Navigate to Power Pages Management App or Power Apps Maker Portal.
Go to Portal Management > Website.
Select your portal record.
Under “Supported Languages,” click + New Website Language.
Select languages like Spanish (es-ES), French (fr-FR), etc.
Set one as default (typically English).

After publishing the changes, the portal structure will now support different languages.

Step 2: Create Language-Specific Content

Each web page and web file in Power Pages can have translations:

Go to Portal Management > Web Pages.
Open a page (e.g., “Home”).
Under Localizations, click + New Web Page Localization.
Choose the target language and input the translated title and copy.
Repeat for all supported pages and languages.

For static content like HTML files, you can upload language-specific web files (e.g., AboutUs-es.html).

Step 3: Detect Browser Language and Redirect

Use JavaScript to detect the user’s preferred language and redirect accordingly.

<script type="text/javascript">
  var userLang = navigator.language || navigator.userLanguage;
  var langCode = userLang.split('-')[0]; // Extract 'es' from 'es-ES'

  var supportedLanguages = ['en', 'es', 'fr'];

  if (supportedLanguages.includes(langCode)) {
    window.location.href = '/' + langCode + '/home';
  }
</script>

Place this code in a web template or the head of your HTML for auto-redirection.

Step 4: Real-Time Dynamic Translation Using Microsoft Translator API

For user-generated content or dynamic text, use Microsoft Translator Text API.

A. Get Translator API Key

Go to Azure Portal
Create a Cognitive Services > Translator resource.
Note the Key and Endpoint URL.

B. Power Automate Flow

Trigger: When a user submits a form or enters text
Use HTTP action to call Microsoft Translator:
- Endpoint: https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=fr
- Headers:
  - Ocp-Apim-Subscription-Key: your-key
  - Content-Type: application/json
- Body: [ {"Text": "@{triggerOutputs()?['body/TextField']}"} ]
Capture the response and store or return the translated text

Step 5: Use Power Pages Liquid Templates for Language Context

Use Liquid in web templates or content blocks:

{% if request.params['lang'] == 'fr' %}
   Bonjour! Voici la version française.
{% elsif request.params['lang'] == 'es' %}
   ¡Hola! Esta es la versión en español.
{% else %}
   Hello! This is the English version.
{% endif %}

Or use built-in context:

{{ website.language.code }}  // e.g., en-US

Step 6: Configure Language Selector (Optional)

Add a language selector manually on your header or nav.
Link to corresponding /language-code/page-name pages.
- Example: <a href="/en/home">English</a> <a href="/es/home">Español</a> <a href="/fr/home">Français</a>

Power Pages does not provide a default language selector. It must be added manually.

Optional Enhancements

AI-Powered Language Detection

Use Azure Cognitive Services – Language Detection API to detect the language of user-generated content or messages.

Store Translations in Dataverse

Maintain translation records in Dataverse for user-submitted data like:

Feedback forms
Product descriptions
Comments

Sentiment Analysis on Multilingual Inputs

Combine translation with sentiment analysis for multilingual feedback (e.g., detect tone of a complaint submitted in Spanish).

Best Practices

Always test redirection and fallback mechanisms if translation fails.
Use pre-translated content where possible for consistency.
Store user preferences for language to offer persistent experience.
Log translation API usage to monitor cost and quota.
Consider caching API results to reduce real-time translation load.

Limitations

Feature	Limitation
Auto translation	Might misinterpret context-sensitive phrases
Translator API	Cost per character usage
Browser language	May not reflect true user preference
Manual translation	Time-consuming for large sites