1. Include the hosted module

https://orig.ooo/cdn/widgets/1.4.4/widgets.js

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

<origooo-country-picker name="country" label="Country" required>
</origooo-country-picker>
<origooo-phone-picker name="phone" label="Calling code">
</origooo-phone-picker>
<origooo-language-picker name="language" label="Language">
</origooo-language-picker>

This is the version-pinned ORIGOOO-hosted distribution. The latest-version URL is https://orig.ooo/widgets.js; use the pinned URL for predictable upgrades. Your hosting or CDN cache configuration determines edge delivery.

2. Add IP detection if you need it

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

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

In API keys, create a publishable key with the lookup scope. Allow your exact origin, including HTTPS and any www subdomain you actually use. Replace the placeholder with that key. The orig.ooo demonstration key is restricted to orig.ooo and will not work on your domain.

Manual search needs no key. Detection uses one account credit per auto-detect control on load. Preserve manual selections and offer a fallback. An IP country is approximate and does not determine a preferred language.

3. Style and submit

origooo-country-picker {
  --origooo-accent: #0055ef;
  --origooo-font-size: 18px;
}
// JavaScript: new FormData(yourForm).get("country")

Put custom elements inside a form and give each a name. Read values with FormData or the value property. Style with CSS variables and ::part(input), ::part(option), and ::part(label).

Self-hosting and CSP

Download the self-hosting kit and serve widgets.js, pickers.js and countries.json together. Use your full script URL. For hosted modules, permit https://orig.ooo in script-src and connect-src; connect-src covers metadata and optional detection. The controls currently use inline shadow styles, so your style-src must permit those styles. Do not weaken an existing strict CSP without reviewing it.

Inspect browser Network errors when a control fails to load. A 403 from detection usually means an origin or key restriction; a 429 means the request rate or credit allowance was exceeded.

Try the examples → · Widget API guide →