DEVELOPER WIDGETS

Local experience banner

Offer a visitor-controlled link to a regional store, support page or local edition.

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

  • Regional storefronts
  • Country-specific support pages
  • Local editions without surprise redirects

Read the full integration reference → · All widgets

TRY IT. READ THE CODE.

Try the widget. Copy its code.

Accent colour
04

Local experience banner

Offer a country-specific destination after the visitor makes a choice. Add your own country-to-URL map to show an explicit link to the local page.

LIVE EXAMPLE

Country storefronts · Regional content · Local support

This demo lets you choose a preference. The code shows where to configure your own destination URLs.

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

<origooo-geo-banner
  auto-detect key="og_pub_2b113c8b0d21011497e7db566da928dd4c23d4404b4bbc5e"
  endpoint="https://orig.ooo/v1/ip/me"
  message="Choose your local store."
  redirect-map='{"GB":"https://example.com/gb/",
    "US":"https://example.com/us/"}'>
</origooo-geo-banner>

<!-- Replace example URLs with your pages. -->

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.

MAKE IT YOURS

Your form. Your design.

Country and calling-code controls submit values through new FormData(form) or their value property. Decision blocks expose result, data-* fields and onResolve callbacks. See the language preselection and country rules guides for complete examples.

CSS
origooo-country-picker,
origooo-phone-picker {
  --origooo-accent: #0055ef;
  --origooo-font-size: 18px;
  --origooo-border: #7187a6;
  --origooo-radius: 8px;
}

Use ::part(input), ::part(option) and ::part(label) for more precise styling.

Add detection to a country control.

This sample uses the orig.ooo publishable demonstration key. For another website, create your own publishable key and allow its exact origin. Detection requires an active dataset and uses account credits.

<origooo-country-picker
  name="country" auto-detect
  key="og_pub_2b113c8b0d21011497e7db566da928dd4c23d4404b4bbc5e"
  endpoint="https://orig.ooo/v1/ip/me">
</origooo-country-picker>

Keep secret server keys out of browser code. Manual selections take priority when the network response arrives.

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.