If you run a marina, charter business, fishing report site, or any website where your visitors care about ocean conditions, adding a live marine weather forecast can be a huge value-add. But building a weather feature from scratch means dealing with APIs, data parsing, and UI work.
The SeaLegs SpotCast widget lets you skip all of that. It's a drop-in embed that displays an AI-powered marine weather forecast for any location on Earth. No API calls, no backend code, no weather data to parse. Just copy, paste, and you've got a live forecast on your site.
In this tutorial, we'll walk through the entire process from signup to a working widget on your page.
What You'll Get
The SpotCast widget displays a compact, daily marine forecast that includes:
- Overall conditions rating — Go, Caution, or Avoid, powered by AI analysis of multiple weather models
- Wind speed and direction — including gust forecasts
- Wave height and period — so your visitors know what to expect on the water
- Human-readable summary — a plain-English description of what conditions will actually be like
- Multi-day forecast — not just today, but the days ahead
The widget updates automatically, so your visitors always see the latest forecast without any maintenance on your end.
Here's a live example of the SpotCast widget in action:
Step 1: Create a Free Developer Account
Head to developer.sealegs.ai/signup and create your account. You'll need to verify your email address, then add balance to your account to start using widgets.
Tip: Credits start at $10 for 200 forecast-days. Each widget location uses one credit per day, so 200 credits covers one location for about 6.5 months.
Step 2: Create a Widget from Your Dashboard
Once you're logged in to your dashboard:
- Click "Create Widget"
- Search for or click the map to set your forecast location (e.g., your marina's coordinates)
- Give it a name you'll recognize (e.g., "Cape May Marina Forecast")
- Choose your display preferences
- Click "Create" and copy the embed code
The dashboard generates a unique widget ID and gives you the exact HTML to embed.
Step 3: Add the Embed Code to Your Site
The embed code is two elements: a container div and a script tag. Paste them wherever you want the widget to appear:
<!-- SeaLegs SpotCast Widget -->
<div id="sealegs-widget-YOUR_WIDGET_ID"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
data-widget-id="YOUR_WIDGET_ID"
data-type="mini"
async></script>Replace YOUR_WIDGET_ID with the ID from your dashboard (it looks like wgt_abc123...). That's it. The script loads asynchronously, fetches the latest forecast, and renders it inside the container div.
Customization Options
You can customize the widget using data- attributes on the script tag:
Widget Type
Use the data-type attribute to control the display format:
data-type="mini"— compact card, great for sidebars and embedded sections
Widget Size
Use the data-size attribute to control dimensions:
data-size="small"— minimal footprintdata-size="medium"— default, works well in most layouts
Custom Container
If you need to place the widget in a specific element (e.g., in a React app or a CMS with generated IDs), use data-container-id:
<div id="my-custom-container"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
data-widget-id="wgt_abc123"
data-container-id="my-custom-container"
data-type="mini"
data-size="medium"
async></script>Platform-Specific Instructions
WordPress
Add a Custom HTML block in the WordPress editor and paste the embed code. If you're using the classic editor, switch to the "Text" tab and paste it there.
Squarespace
Add a Code Block (available on Business plan and above), paste the embed code, and save. The widget will render in the preview and on your live site.
Wix
Use the Embed HTML element from the "Add" menu. Paste the embed code into the HTML field. You may need to adjust the element size to fit the widget.
Static HTML / React / Next.js
Paste the embed code directly into your HTML file or component template. The script loads asynchronously and won't block rendering. For React/Next.js, you can place the script tag in a useEffect hook or use next/script.
Multiple Widgets on One Page
You can add multiple widgets to the same page — each with a different location. Just make sure each has its own container div and script tag with a unique data-widget-id:
<!-- Miami Beach forecast -->
<div id="sealegs-widget-wgt_miami"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
data-widget-id="wgt_miami"
data-type="mini" async></script>
<!-- Key West forecast -->
<div id="sealegs-widget-wgt_keywest"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
data-widget-id="wgt_keywest"
data-type="mini" async></script>Performance
The widget script is lightweight and loads asynchronously using the async attribute, so it won't slow down your page load. The forecast data is fetched from SeaLegs' CDN, which means fast load times regardless of where your visitors are located.
For sites that care about Core Web Vitals and PageSpeed scores, the async loading means the widget won't impact your LCP or FID metrics.
Use Cases
Here are some of the ways businesses are using SpotCast widgets today:
- Marinas — show current conditions on your homepage so boaters can check before heading to the dock
- Charter businesses — display forecasts for your departure port so customers can see conditions for their upcoming trip
- Fishing report sites — pair your catch reports with the marine forecast for that location
- Sailing clubs — embed forecasts for your local waters on the club website, from Chesapeake Bay to Puget Sound
- Coastal hotels and resorts — show marine conditions for water activities and excursions
- Boat dealerships — add a local forecast to your site to drive engagement from boating enthusiasts
What's Next
Once you've got a widget running, you might want to explore the full SeaLegs API for deeper integrations — custom dashboards, automated alerts via webhooks, or building marine weather features directly into your application.
Ready to get started? Create your free developer account and have a live marine forecast on your site in under 5 minutes.