Language preselection: an invisible decision block

Use origooo-language-preselector to resolve a country into a selected language code and a ranked list. The element renders no dropdown, message or form input. Your JavaScript decides what to do with the result.

Provide a country from your application

<script type="module" src="https://orig.ooo/cdn/widgets/1.4.6/widgets.js"></script>
<origooo-language-preselector id="locale"
  country="IN" fallback-language="en">
</origooo-language-preselector>
<p id="language-output"></p>
<script>
  const locale = document.querySelector('#locale');
  let suggestedLanguage;
  locale.onResolve = result => {
    suggestedLanguage = result.language;
    document.querySelector('#language-output').textContent =
      'Suggested language: ' + (suggestedLanguage || 'unknown');
    // Call your own function here, using result.language.
    // Keep a visitor's existing saved preference.
  };
</script>

Detect the country automatically

Replace country="IN" with auto-detect, key="YOUR_ORIGIN_BOUND_PUBLISHABLE_KEY" and endpoint="https://orig.ooo/v1/ip/me". The key must allow the embedding website’s exact origin. Manual/server-supplied country takes priority. Components sharing a key and endpoint reuse one lookup per page; a new page load can use another credit.

Ranking and output

The bundled country-to-language mapping covers 249 territories. Options are sorted by descending country language population percentage, then official status for ties, then language tag. The selected language is the first option. This is a deterministic country-based suggestion, not identification of the visitor’s actual language. A saved preference should take priority. If the country has no mapped languages, fallback-language is used when supplied; otherwise language is null.

// Property:
const {country, language, languages, method, error} = locale.result;
// languages is the ordered array of BCP 47 tags.

// Custom HTML data fields:
const code = locale.dataset.language;
const options = JSON.parse(locale.dataset.languages || '[]');

// Event alternative:
locale.addEventListener('languagechange', event => {
  const result = event.detail;
  // Your localization function or application variable.
});
// Read locale.result too if the event already occurred.

onResolve receives the result object and runs immediately if a result is already available when the callback is assigned. Events languagechange and resolve carry the same object in detail. data-state is loading, ready or error; data-country identifies the resolved country. method is country, fallback or unknown. Network/metadata failures appear in error and still allow a fallback result.

Useful applications

Choose an initial translation bundle for a first-time visit, rank suggested site languages, or prepare a locale variable for your own component. Do not silently overwrite an account language or a visitor’s explicit choice. Keep inline demonstration scripts in your own JavaScript file or apply your site’s CSP nonce policy.