Embed splash pads anywhere

Live preview

This is the actual /embed/texas/houston widget rendering inside this page:

URL pattern

https://splashpadhub.com/embed/[stateSlug]/[citySlug]

Get valid stateSlug + citySlug values from /api/states.json. Examples:

• /embed/texas/houston — Houston, TX
• /embed/florida/orlando — Orlando, FL
• /embed/california/san-diego — San Diego, CA
• /embed/arizona/phoenix — Phoenix, AZ

Basic embed

<iframe
  src="https://splashpadhub.com/embed/texas/houston"
  width="100%"
  height="520"
  loading="lazy"
  style="border:0;border-radius:12px"
  title="Splash pads in Houston, TX"
></iframe>

Example: blog post inline

Drop a city widget into a parenting blog mid-article:

<!-- Inline a city widget mid-article -->
<figure>
  <iframe
    src="https://splashpadhub.com/embed/florida/orlando"
    width="100%" height="560" loading="lazy"
    style="border:0;border-radius:12px"
    title="Orlando splash pads"
  ></iframe>
  <figcaption>
    Live splash-pad list for Orlando, FL —
    <a href="https://splashpadhub.com/florida/orlando">view all on SplashPadHub</a>.
  </figcaption>
</figure>

Example: mom-blog sidebar

Narrow sidebar (340px) version. The widget is responsive and stacks vertically:

<!-- Narrow sidebar embed (mom-blog, parenting site) -->
<aside style="max-width:340px">
  <h3>Splash pads near us</h3>
  <iframe
    src="https://splashpadhub.com/embed/california/san-diego"
    width="340" height="640" loading="lazy"
    style="border:0;border-radius:12px"
    title="San Diego splash pads"
  ></iframe>
</aside>

Example: tourism / city government

Visitor bureaus and city park departments — show your splash pads with no maintenance:

<!-- Tourism / city government site -->
<section class="visit-resources">
  <h2>Free splash pads in our city</h2>
  <p>Real-time list, refreshed daily, powered by SplashPadHub.</p>
  <iframe
    src="https://splashpadhub.com/embed/arizona/phoenix"
    width="100%" height="600" loading="lazy"
    style="border:0;border-radius:12px"
    title="Phoenix splash pads"
  ></iframe>
</section>

Customization

Honest answer: the embed is currently read-only. There are no query-string options for theme, color, count, or filters yet. The width and height of your iframe is the only thing you control on the host side.

• Always renders up to 12 pads, sorted by the directory's default order.
• Light theme only (matches SplashPadHub palette: aqua + white).
• Always shows a "Powered by SplashPadHub.com" credit — required for CC-BY.
• noindex,follow meta — won't compete with your page in search.

Need dark mode, theming, filters, or a count override? Email partners@splashpadhub.com. We're happy to ship options if there's real demand.

Caching & reliability

• Browser cache: max-age=3600 (1h) · Edge cache: s-maxage=86400 (24h)
• x-frame-options: ALLOWALL — embeds work on any domain.
• Statically rendered HTML, ~12KB per city. No JS, no third-party requests.
• If a city has no pads, the embed returns a 404. Validate against /api/states.json before embedding.