NoodlePantsNoodlePants

Widget documentation

Embed live NoodlePants country data on your blog or site. One line of HTML, no build step, under 5 KB gzipped. Open the visual builder →

1. Quick start

Drop this anywhere inside your article HTML:

<script src="https://noodlepants.com/widget.js"
  data-country="TH"
  data-style="standard"
  data-theme="light">
</script>

2. Attributes

  • data-country — ISO 3166-1 alpha-2 country code (e.g. TH, PT, MX). Required.
  • data-style — compact | standard (default) | full.
  • data-theme — light (default) | dark | minimal.
  • data-branded-by — Pro only. Your site name, shown alongside the NoodlePants attribution.

3. Performance

  • Loads asynchronously after page render — never blocks your page.
  • Renders inside a Shadow DOM so your site's CSS does not interfere.
  • Caches data in localStorage for 1 hour per country.
  • If our API is unreachable, falls back to the last cached snapshot with a “Data as of…” note.

4. The public API

If you'd rather render the data yourself, hit the JSON endpoint directly:

GET https://noodlepants.com/api/public/widget/{country_code}

// Response
{
  "code": "th",
  "name": "Thailand",
  "flag": "https://cdn.jsdelivr.net/npm/flag-icons/flags/4x3/th.svg",
  "colIndex": 35.9,
  "avgRent1BR": 460,
  "inflationRate": 1.2,
  "safetyScore": 64,
  "currency": { "code": "THB", "symbol": "฿", "name": "Thai Baht", "perUsd": 35 },
  "travelAdvisory": { "level": "Exercise Increased Caution", "emoji": "⚠️" },
  "updatedAt": "…",
  "source": "noodlepants.com",
  "deepLink": "https://noodlepants.com/country/th"
}

CORS is open to all origins. Cache headers allow CDN caching for 1 hour.

5. Attribution policy

Every widget displays the NoodlePants brand and a link back to noodlepants.com — this cannot be removed. Pro publishers can add their own site name alongside the attribution via data-branded-by, and unlock unlimited countries and widget analytics.

6. Examples

Compact, dark:

<script src="https://noodlepants.com/widget.js"
  data-country="PT" data-style="compact" data-theme="dark"></script>

Full, minimal:

<script src="https://noodlepants.com/widget.js"
  data-country="MX" data-style="full" data-theme="minimal"></script>

7. Support

Found a bug or want a country we don't cover yet? Get in touch.

Match me