DEVELOPER WIDGETS

Language preselector

Return a country-ranked language suggestion to your own localization function. The decision element stays invisible.

Working controls. Ready to try. Examples on orig.ooo share one IP-country lookup. Language and country decision elements return data and callbacks; their output panels below are demonstration UI. Connecting to the lookup service… CDN URLs & setup instructions →

Where this fits

  • Choose an initial translation bundle
  • Rank country-relevant languages
  • Prepare a locale variable before rendering content

Read the full integration reference → · All widgets

TRY IT. READ THE CODE.

Try the widget. Copy its code.

03

Language preselector

Resolve a country into a language code and a ranked list of its languages. Feed that result into your own localization logic.

LIVE EXAMPLE

Initial locale · Localized content · Language suggestions

Selected language codeWaiting for country

Country-ranked options appear here.

These buttons simulate a country for this example.

This component renders no control. The demo shows its output. Country language prevalence is a suggestion; preserve the visitor’s saved preference.

HTML
<script type="module" src="https://orig.ooo/cdn/widgets/1.4.7/widgets.js"></script>

<origooo-language-preselector id="locale"
  auto-detect key="og_pub_2b113c8b0d21011497e7db566da928dd4c23d4404b4bbc5e"
  endpoint="https://orig.ooo/v1/ip/me"
  fallback-language="en">
</origooo-language-preselector>
<p id="locale-preview"></p>
<script>
  const locale = document.querySelector("#locale");
  let selectedLanguage;
  locale.onResolve = result => {
    selectedLanguage = result.language;
    document.querySelector("#locale-preview").textContent =
      "Suggested language: " + (selectedLanguage || "unknown");
    // Call your localization function here.
    // result.languages is ranked for result.country.
  };
  // locale.result, locale.dataset.language,
  // locale.dataset.languages are also available.
</script>

Load the module once. The hosted module loads its dependencies automatically. Self-host the complete kit.

AUTOMATIC IP DETECTION

Detected from your actual IP.

Request an approximate country from an active dataset. Existing manual choices stay in place. On orig.ooo this uses one lookup through the site’s origin-restricted publishable widget key.

No IP request made.

Estimated countryNot checked

Country and language suggestions are approximate. Saved visitor preferences take priority.

Use the decision in your application

This element returns data. Your own JavaScript controls the visible interface. Subscribe to onResolve, listen for events or read result and data attributes.

const element = document.getElementById("locale");
let decisionResult;
element.onResolve = result => {
  decisionResult = result;
  // Update your own HTML or call your application function.
};
// element.result and element.dataset expose the output too.

Complete attribute, event and callback reference →

YOUR NEXT BUILD STARTS HERE

Get your free API key.

1,000 monthly credits. No credit card required.

Account services are not connected in this preview. Explore the dashboard or download the implementation from your workspace.
Read the integration guide

Production accounts require verified email. Google OAuth and Paddle need deployment credentials.