Country rules: decisions, callbacks and conditional HTML

origooo-country-blocker is an invisible decision element. It returns allow, block or unknown; it does not render a dropdown or restriction message. Supply a country or enable IP detection, then use the result in your own function, variable or HTML.

Show or hide your own block

<script type="module" src="https://orig.ooo/cdn/widgets/1.4.6/widgets.js"></script>
<origooo-country-blocker id="regional-rule"
  country="FR" blocked-countries="US,GB"
  unknown-policy="unknown">
</origooo-country-blocker>
<div id="regional-offer" hidden>Your regional offer</div>
<script>
  const rule = document.querySelector('#regional-rule');
  let regionAllowed;
  rule.onResolve = result => {
    regionAllowed = result.allowed;
    document.querySelector('#regional-offer').hidden =
      result.decision !== 'allow';
    // Or call your own function with result.
  };
</script>

Inputs

country accepts an ISO country code. To detect it, omit country and add auto-detect, key="YOUR_ORIGIN_BOUND_PUBLISHABLE_KEY", and endpoint="https://orig.ooo/v1/ip/me". Use allowed-countries="FR,DE" for an allowlist or blocked-countries="US,GB" for a blocklist. If both are supplied, a blocklist match wins. Codes are case-insensitive and comma-separated.

unknown-policy can be unknown (default), allow or block. With the default, result.allowed is null and the example above keeps the offer hidden. A missing country, invalid country or lookup failure never fabricates an IP location.

const result = rule.result;
// {country: 'FR', decision: 'allow', allowed: true,
//  reason: 'country_allowed', error: null}

const decision = rule.dataset.decision; // allow / block / unknown
const allowed = rule.dataset.allowed; // 'true' / 'false' / 'unknown'
const country = rule.dataset.country;

rule.addEventListener('decision', event => {
  handleRegionDecision(event.detail);
});
// onResolve is the callback alternative. It also receives
// an existing result immediately when assigned.

// Re-evaluate after an application country changes:
rule.setAttribute('country', 'US');

Useful applications

Show a country-specific offer, choose a regional support message, conditionally render a shipping notice, or send a decision to your own application state. These are browser presentation rules. Enforce protected content, authorization and paid access on the server before returning the content.

The decision and resolve events carry the same result in detail. data-state reports loading, ready or error. Public detection uses account credits and origin restrictions. Put your callback in your application’s JavaScript file when your CSP restricts inline scripts.