SpotCast Widget

Embed Code

Add a widget to your site by placing a container <div> and loading the widget script. Replace wgt_abc123 with your widget ID from the Developer Dashboard.

<div id="sealegs-widget-wgt_abc123"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
  data-widget-id="wgt_abc123" async></script>

The script loads asynchronously and won't block your page. The widget renders inside the container div automatically.

Widget Options

Configure the widget using data-* attributes on the script tag, or via the JavaScript API.

Data Attributes

Example with multiple options:

<div id="sealegs-widget-wgt_abc123"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
  data-widget-id="wgt_abc123"
  data-type="mini"
  data-size="large"
  data-expand-mode="inline" async></script>

JavaScript API

For more control, use the queue-based JavaScript API. This is useful when placing multiple widgets or setting options that aren't available as data attributes.

<div id="my-forecast"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js" async></script>
<script>
  window.SeaLegsWidget = window.SeaLegsWidget || { queue: [] };
  window.SeaLegsWidget.queue.push({
    widgetId: 'wgt_abc123',
    containerId: 'my-forecast',
    options: {
      mode: 'mini',
      size: 'large',
      expandMode: 'inline',
      logoUrl: 'https://example.com/my-logo.png'
    }
  });
</script>

Custom Styling

Override the widget's appearance using CSS custom properties on the container element. All properties are optional — defaults are used when not set.

#sealegs-widget-wgt_abc123 {
  --sl-font-family: 'Poppins', sans-serif;
  --sl-header-bg: #1a365d;
  --sl-header-text: #f0e6d2;
  --sl-go-color: #2d8a56;
  --sl-caution-color: #c9952b;
  --sl-nogo-color: #b83c3c;
}

CSS Custom Properties

These properties work with all widget types (full and mini) and all themes (light, dark, auto). Custom styles also apply to popup modals opened from the widget.

Custom Logo

Replace the default SeaLegs logo with your own using the data-logo-url attribute:

<div id="sealegs-widget-wgt_abc123"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
  data-widget-id="wgt_abc123"
  data-logo-url="https://example.com/my-logo.png"
  async></script>

Or via the JavaScript API:

window.SeaLegsWidget.queue.push({
  widgetId: 'wgt_abc123',
  containerId: 'my-widget',
  options: { logoUrl: 'https://example.com/my-logo.png' }
});

To hide the logo entirely, use the CSS custom property:

#sealegs-widget-wgt_abc123 {
  --sl-logo-display: none;
}

Logo URLs are validated to only allow https:, http:, and data:image/ protocols.

Inline Expand Mode

By default, clicking a mini widget opens a full-screen modal with the complete forecast. Inline expand mode makes the widget expand in place instead.

Set data-expand-mode="inline" on the script tag:

<div id="sealegs-widget-wgt_abc123"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
  data-widget-id="wgt_abc123"
  data-type="mini"
  data-expand-mode="inline" async></script>

Or via the JavaScript API:

window.SeaLegsWidget.queue.push({
  widgetId: 'wgt_abc123',
  containerId: 'my-widget',
  options: { mode: 'mini', expandMode: 'inline' }
});

In inline mode:

• A "Show daily details" toggle bar appears at the bottom of the mini widget
• Tapping the toggle expands the widget downward to show each day stacked vertically with its recommendation, summary, and date
• Tapping any individual day opens the single-day detail popup
• Tapping the toggle again collapses back to the compact view

Use --sl-toggle-color and --sl-toggle-bg to style the toggle bar.

Forecast Data Access

Access the raw forecast data from your own code to build custom UIs or integrate with other components. The widget emits a sealegs:forecast event on the container element whenever forecast data loads or refreshes.

Event Listener

<div id="my-forecast-data" style="display: none"></div>
<script src="https://cdn.sealegs.ai/spotcast_widget.js"
  data-widget-id="wgt_abc123"
  data-container-id="my-forecast-data"
  async></script>

<script>
  document.getElementById('my-forecast-data')
    .addEventListener('sealegs:forecast', function(e) {
      var forecast = e.detail;
      console.log(forecast.spot_name);
      console.log(forecast.headline);
      forecast.daily_forecast.forEach(function(day) {
        console.log(day.day_name, day.recommendation, day.summary);
      });
    });
</script>

Callback

Alternatively, use the onForecast callback via the JavaScript API:

window.SeaLegsWidget.queue.push({
  widgetId: 'wgt_abc123',
  containerId: 'my-forecast-data',
  options: {
    onForecast: function(forecast) {
      document.getElementById('status').textContent =
        forecast.daily_forecast[0].recommendation;
    }
  }
});

You can hide the widget with display: none to use it purely as a data source. The event fires on initial load and again whenever the forecast auto-refreshes.

Data Structure

The event.detail (or the object passed to onForecast) has this shape:

{
  "widget_id": "wgt_abc123xyz",
  "spot_name": "Cape May Inlet",
  "coordinates": { "latitude": 38.9351, "longitude": -74.9060 },
  "generated_at": "2026-01-15T10:30:00Z",
  "expires_at": "2026-01-16T00:00:00Z",
  "next_refresh_at": "2026-01-16T12:00:00Z",
  "theme": "light",
  "is_suspended": false,
  "is_pending": false,
  "headline": "Good conditions through Thursday, rough seas expected Friday.",
  "forecast_period": {
    "start_date": "2026-01-15",
    "end_date": "2026-01-18",
    "num_days": 3
  },
  "daily_forecast": [
    {
      "date": "2026-01-15",
      "day_name": "Thursday",
      "recommendation": "GO",
      "summary": "Light winds and calm seas. Perfect for offshore fishing."
    },
    {
      "date": "2026-01-16",
      "day_name": "Friday",
      "recommendation": "CAUTION",
      "summary": "Winds building to 15-20 knots by afternoon. Stay close to shore."
    }
  ],
  "audio_enabled": false,
  "branding": {
    "powered_by": "SeaLegs",
    "url": "https://sealegs.ai",
    "attribution_required": true
  }
}

Key Fields

Multiple Widgets

Add multiple widgets to the same page, each showing a different location:

<!-- 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>

Each widget needs its own container div and script tag with a unique data-widget-id. Alternatively, use the JavaScript API with a single script tag and queue multiple widgets.

Platform Notes

Performance

The widget script loads asynchronously with the async attribute and won't impact your page load, LCP, or FID metrics. Forecast data is served from SeaLegs' CDN for fast load times globally.

Next Steps