DEVELOPER WIDGETS

Calling-code picker

Keep the country and international calling code together when collecting a phone number.

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

  • International contact forms
  • Signup and onboarding
  • Shared calling codes with explicit country context

Read the full integration reference → · All widgets

TRY IT. READ THE CODE.

Try the widget. Copy its code.

Accent colour
02

Calling-code picker

Make international phone numbers easier to enter. Search for a country or calling code; shared codes keep the selected country attached.

LIVE EXAMPLE

Sign-up forms · Contact details · Telephone input

FORM VALUE
No selection yet.

Returns the country and calling code together, for example US:+1.

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

<form id="contact-form">
  <origooo-phone-picker
    name="phone_country"
    label="Country calling code"
    auto-detect
    key="og_pub_2b113c8b0d21011497e7db566da928dd4c23d4404b4bbc5e"
    endpoint="https://orig.ooo/v1/ip/me"
    required>
  </origooo-phone-picker>
  <input type="tel" name="phone_number"
    autocomplete="tel-national">
</form>

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.