Surf Forecast Widgets

Easy, customisable and responsive surf forecast widgets for your website

In just a few simple steps you can display swellcast forecast widgets on your website. The widgets are built for customisation and adaptability, featuring a fluid layout and configurable colour settings.

Here's a live example for Sydney…


1. Download the swellcast jQuery plugin files:


2. Include jQuery (if not already), and the swellcast jQuery plugin on your page:

<script type="text/javascript" src="path_to/jquery.min.js"></script>
<script type="text/javascript" src="path_to/jquery.swellCast.min.js"></script>

3. Include the widget CSS on your page:

<link rel="stylesheet" type="text/css" href="path_to/jquery.swellCast.min.css" />

4. Set the forecast location & widget styles:

There are a few simple settings that you can apply via HTML5 data-* attributes on your widget container.

At the very least, a location attribute is required. Available locations are those published on Swellcast. Multiple word location names follow a hyphenated format.

You can also set optional header background and text colour to integrate with your website. Both will accept either a hex or rgba value. Here's an example:

<div id="yourContainerID" data-swellcast-location="margaret-river" data-swellcast-headerbg="#6f7d95" data-swellcast-headertext="#FFF"></div>

5. Call swellCast() on your forecast container:

$(document).ready(function() {

6. Enjoy!

If you have any questions, problems or suggestions please email or tweet @swellcast