Add Waterfalls to Your Website
Drop a single <script> tag into any page and get beautiful, auto-updating waterfall cards with photos, live flow data, difficulty badges, and trail stats. Free to use — cards link back to detailed pages on WaterfallHikes.com.
Build Your Embed Code
Paste both lines. The attribution link is the only thing we ask for in return — keep it on the page and the widget stays free forever. It also has to live in your own HTML rather than being drawn by our script, so search engines can actually see it.
Live Preview
Updates as you change the settings above. Columns narrow automatically on phones and in tight spaces.
Loading preview…
What's Included
- High-quality waterfall photos with lazy loading
- Live flow data from USGS gauges (where available)
- Difficulty badges — Easy, Moderate, Hard, Drive-Up
- Trail stats: height, distance, trail type
- Feature icons: kid-friendly, dog-friendly, swimming, free admission
- Best-season recommendations
- Nearest campground info
- Links back to full waterfall pages on WaterfallHikes.com
- Responsive grid — looks great on mobile and desktop
- Self-contained — no external CSS or dependencies needed
Who's Using It
The waterfall widget is a great fit for sites that help people explore the outdoors.
Travel Blogs
Enrich trail guides and trip reports with live waterfall data and photos.
Tourism Boards
Showcase local waterfalls on regional tourism and visitor center pages.
Outdoor Retailers
Inspire customers by highlighting nearby waterfalls on store locator pages.
Vacation Rentals
Help guests discover waterfall hikes near your cabin or campground listing.
Configuration Reference
All configuration is done through data-wh-* attributes on the script tag.
| Attribute | Type | Default | Description |
|---|---|---|---|
| data-wh-widget | flag | — | Required. Marks the script tag as a waterfall widget. |
| data-wh-state | string | — | State name or 2-letter abbreviation. Used alone for state mode, or with data-wh-city for city mode. |
| data-wh-city | string | — | City name (lowercase, underscores for spaces). Requires data-wh-state. |
| data-wh-lat | float | — | Latitude for coordinate mode. Requires data-wh-lng. |
| data-wh-lng | float | — | Longitude for coordinate mode. Requires data-wh-lat. |
| data-wh-radius | integer | 30 | Search radius in miles (1–100). Applies to city and coordinate modes only. |
| data-wh-limit | integer | 6 | Number of waterfall cards to show (1–24). |
| data-wh-columns | integer | 3 | Most cards per row (1–6). Narrow spaces and phones automatically drop to fewer. |
Examples
By State
Show the top waterfalls in Oregon:
<script src="https://waterfallhikes.com/embed/waterfall-widget.js"
data-wh-widget data-wh-state="OR" data-wh-limit="6"></script>
<p data-wh-attribution>Waterfall data from <a href="https://waterfallhikes.com">WaterfallHikes.com</a></p>By City
Show waterfalls within 30 miles of Boulder, CO:
<script src="https://waterfallhikes.com/embed/waterfall-widget.js"
data-wh-widget data-wh-city="boulder" data-wh-state="CO"
data-wh-radius="30" data-wh-limit="6"></script>
<p data-wh-attribution>Waterfall data from <a href="https://waterfallhikes.com">WaterfallHikes.com</a></p>By Coordinates
Show waterfalls within 25 miles of Yosemite Valley:
<script src="https://waterfallhikes.com/embed/waterfall-widget.js"
data-wh-widget data-wh-lat="37.75" data-wh-lng="-119.59"
data-wh-radius="25" data-wh-limit="4"></script>
<p data-wh-attribution>Waterfall data from <a href="https://waterfallhikes.com">WaterfallHikes.com</a></p>Get Notified About Widget Updates
New features, API changes, and tips for getting more out of the embed. No spam.