Tide widget
for your website
Drop a NOAA-accurate tide chart onto any page in two minutes. Free, no API key — works on plain HTML, Squarespace, Webflow, WordPress, anywhere you can paste a snippet.
Built for sites that send people on the water
Marina pages, charter boat sites, fishing guides, surf reports, and beach rentals — anywhere a tide chart helps the visitor make a decision.
NOAA-grade accuracy
1,300+ official NOAA tide stations in the US, plus regional providers worldwide. Same harmonic predictions you'd get on the official tide tables.
Light and fast
~30 KB gzipped script, lazy-loaded chart engine, edge-cached predictions. Multiple charts on a page share one font and CSS load.
Two embed shapes
Drop-in chart iframe or JS embed for inline charts. Pick whichever fits your page — they share the same chart engine and data.
Style-isolated
Charts mount inside Shadow DOM. Your site's CSS doesn't leak into the chart and the chart's CSS doesn't leak into your site.
Pick the shape that fits your page
Both shapes share the same chart engine and the same data. Pick whichever fits your page — they're interchangeable.
Fixed-location chart
Drop-in chart for one specific spot. No JavaScript required on your page — pure iframe. Sandboxed for safety.
Inline charts
Mount one or many charts inline via Shadow DOM. Full control over sizing and DOM placement. Use this for marina lists or content pages.
Free vs Paid
The free tier covers U.S. waters end-to-end. Paid plans add international coverage, finer resolution, and white-label options.
| Feature | Free | Paid |
|---|---|---|
| Embed shapes | Chart iframe + JS embed | + Interactive map widget |
| Coverage | United States (NOAA) | Worldwide (NOAA + UKHO + EOT20 + regional) |
| Resolution | Hourly | 30-minute |
| Branding | "Powered by SeaLegs" | Your branding (white-label) |
| Edge SLA | Best-effort | Guaranteed |
| Custom CSS | Limited | Full theme control |
| Cost | Free, no signup | support@sealegs.ai |
Copy. Paste. Done.
Replace the lat/lon with your spot. The widget snaps to the nearest NOAA station automatically. Free tier covers U.S. waters. For international coverage, contact support about a paid plan.
Chart iframe — simplest
One iframe, one chart, no JS on your page. Works in any HTML editor or CMS rich-text field.
<!-- SeaLegs LLC Tide Widget — by embedding, you agree to https://www.sealegs.ai/widget-terms --> <iframe src="https://cdn.sealegs.ai/tides/chart/index.html?lat=39.355&lon=-74.418&title=Atlantic%20City" style="width:100%;height:560px;border:0" title="Tide forecast" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" sandbox="allow-scripts allow-same-origin"></iframe> <p style="text-align:center;font-size:0.875rem"> Tide forecasts by <a href="https://www.sealegs.ai/tide-widget">SeaLegs</a> </p>
JS embed — multiple charts per page
Load the script once. Drop a <div data-sealegs-tides> anywhere a chart should appear — as many as you like.
<!-- SeaLegs LLC Tide Widget — by embedding, you agree to https://www.sealegs.ai/widget-terms -->
<!-- Once at the top of the page -->
<script src="https://cdn.sealegs.ai/tides/tides_chart_widget.js" type="module" defer></script>
<!-- Anywhere a chart should appear -->
<div data-sealegs-tides
data-lat="39.355" data-lon="-74.418"
style="width:100%;height:540px"></div>
<div data-sealegs-tides
data-lat="41.50" data-lon="-71.33"
style="width:100%;height:540px"></div>
Full reference: developer.sealegs.ai/docs/tides
By embedding the widget you agree to the Widget Terms of Use.
See it in production
The same chart engine, running on real SeaLegs pages today.
Global tide map
Click anywhere on the map to drop a pin and see the local tide chart. The flagship discovery experience — same engine you'd embed via the paid map plan.
New Jersey tide forecast
Six NOAA stations on one page, each with its own chart card — the JS embed shape running at scale. Mirror this layout for any region.
Who uses it
Any site where "what's the tide doing?" is part of the visitor's decision.
Marinas & boatyards
Show today's tide on the marina home page. Helps visitors plan slip arrival, fuel runs, and trailer ramps.
Charter boats & fishing guides
Embed the local tide on each spot page. Anglers see when the bite windows are without leaving your site.
Surf reports
Pair the tide chart with your wave forecast. Tides and swell windows together is the surfer's actual question.
Vacation rentals
Beachfront listings get more inquiries when guests can see when the beach will be wide. Drop the widget into the listing template.
Kayak & SUP outfitters
Tide-dependent paddles (mangroves, salt marsh, tidal rivers) ship with built-in safety briefings when the chart is on the page.
Real estate & HOAs
Coastal listings and waterfront communities — show the tide cycle right on the listing or community page.
Frequently Asked Questions
How much does the SeaLegs tide widget cost?
The widget is free for any website. Embed unlimited charts on any number of pages with no API key, no signup, and no usage caps for ordinary site traffic. Commercial customers who need a white-label version, custom branding, or guaranteed SLAs can contact us about a paid plan.
Where does the tide data come from?
Tide predictions are sourced from the NOAA CO-OPS API for the United States and from regional providers (UKHO, IHO members, EOT20) elsewhere. The widget shows the same harmonic predictions you would see on the official NOAA tide tables, plus a clean chart view and station picker.
Do I need an API key?
No. The widget loads from cdn.sealegs.ai and renders client-side using public tide predictions. There is no key to manage or rotate. If you need per-customer keys, rate-limit guarantees, or a self-hosted build, contact us about a paid plan.
Can I put more than one tide chart on the same page?
Yes. The JS embed and the WordPress plugin both support multiple charts per page. Each chart mounts in its own Shadow DOM so styles do not leak between charts or into your site. The widget script de-duplicates fonts and CSS internally, so the second chart loads almost instantly.
How do I customize the location?
Pass latitude and longitude as URL parameters (iframe) or data attributes (JS embed / shortcode). The widget snaps to the nearest NOAA tide station. You can also pin a specific station_id if you want to override the auto-snap.
Will the widget hurt my site speed?
No. The widget script is around 30 KB gzipped, lazy-loads the chart engine on first use, and ships with loading="lazy" on iframes by default. Tide predictions are cached at the CDN edge, so a chart on a high-traffic page does not put load on your origin.
Can I remove the SeaLegs branding?
The free embed shows a small "Powered by SeaLegs" line beneath the chart. White-label versions (custom branding, your domain, no SeaLegs link) are available on a paid plan. Contact us if you need this.
Get a tide chart on your site today
Two minutes from copy to live chart. No signup, no key, no credit card.