Embed the widget

The Chora widget is a server-rendered HTML card designed to sit on a property booking page. No API key, no JavaScript framework, works inside any iframe.

Two display modes, and full control over which tiles appear.

Modes

Inline

Full card that sits in the page flow — usually below the gallery or beside the booking widget. Auto-resizes to its content height.

Popup / corner

Compact card that floats in a bottom-right corner. Ideal for always-visible context without displacing page content.

Inline

<iframe
  src="https://api.trychora.com/v1/pulse?lat=51.38&lng=-2.36&start=2026-10-14&end=2026-10-18&place=The%20Royal%20Crescent"
  width="100%"
  height="800"
  frameborder="0"
  style="border: 0; border-radius: 14px;"
></iframe>
<script>
  window.addEventListener("message", (e) => {
    if (e.data?.type === "chora:height") {
      document.querySelector("iframe[src*='chora' i], iframe[src*='pulse']")
        .style.height = e.data.height + "px";
    }
  });
</script>

<iframe
  src="https://api.trychora.com/v1/pulse?lat=51.38&lng=-2.36&start=2026-10-14&end=2026-10-18&mode=corner"
  width="360"
  height="480"
  frameborder="0"
  style="position: fixed; right: 24px; bottom: 24px; border: 0; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.15);"
></iframe>

Choose which tiles to show

By default the widget renders every applicable section for the coord and dates. To limit it, pass sections= with a comma-separated list of tile IDs.

<!-- Just weather + MICHELIN + events -->
<iframe
  src=".../v1/pulse?lat=51.38&lng=-2.36&start=...&end=...&sections=weather,michelin,events"
></iframe>

Available tile IDs:

ID	Tile	Notes
`weather`	Weather forecast for the stay	Forecast or climatology
`astronomy`	Sunrise and sunset
`marine`	Sea conditions	Coastal only
`snow`	Snowfall + depth	Alpine only
`transport`	Nearest airports + directions
`nearby`	Walking-distance essentials	Pubs, shops, ATMs, pharmacies
`events`	Ticketed events	Live inventory
`festivals`	Iconic annual celebrations	Curated
`attractions`	Bookable tours + attractions	Affiliate deep-links
`wildlife`	Seasonal species	Citizen-science observations
`michelin`	MICHELIN restaurants	Tier-ranked
`restaurants`	Top-rated dining	Crowd-rated fallback
`gardens`	RHS Partner Gardens	UK only, 60 km radius
`nationaltrust`	National Trust properties	UK only, 60 km radius
`ntwalks`	National Trust walks	UK only, 40 km radius
`heritage`	UNESCO World Heritage Sites	Global, 200 km radius
`darksky`	Dark Sky Places	Global, 200 km radius

Order is preserved: sections=michelin,weather,events renders in that order. Tiles that would return applicable: false for the coord are still dropped, even if requested.

Query parameters

Param	Required	Default	Description
`lat`	Yes	—	Property latitude, `-90` to `90`
`lng`	Yes	—	Property longitude, `-180` to `180`
`start`	Yes	—	Stay start date, `YYYY-MM-DD`
`end`	Yes	—	Stay end date (inclusive), `YYYY-MM-DD`
`place`	No	auto	Human-readable property/location name
`mode`	No	`inline`	`inline` (full card) or `corner` (popup)
`sections`	No	all	Comma-separated tile IDs from the table above
`theme`	No	`light`	`light` or `dark`
`accent`	No	site accent	Hex color for links + accents (with or without `#`)

Auto-resize (inline mode)

The widget posts a message event with its own height on load and on mutation. Wire it up on the host page:

<iframe id="chora" src=".../v1/pulse?..." style="width:100%; border:0;"></iframe>
<script>
  window.addEventListener("message", (e) => {
    if (e.data && e.data.type === "chora:height") {
      document.getElementById("chora").style.height = e.data.height + "px";
    }
  });
</script>

Theming

<!-- Dark mode -->
<iframe src=".../v1/pulse?...&theme=dark"></iframe>
<!-- Brand accent (URL-encode the # as %23) -->
<iframe src=".../v1/pulse?...&accent=%23e0245f"></iframe>

Caching

Widget responses are served with Cache-Control: public, max-age=60. The widget refreshes every minute. Underlying tile data follows each endpoint’s freshness (weather every 10 minutes, MICHELIN monthly).

Framing policy

The widget sets Content-Security-Policy: frame-ancestors *. It embeds anywhere. If you’re on a site with a strict CSP, add https://api.trychora.com to your frame-src.