Free Surf Forecast Widgets

Get the best free surf forecast widgets for your website.

Copy and paste simple surf forecast and wave conditions UI with our free widgets for your customers.

3-Day Forecast

Here’s a look at the next 3 days of surf conditions for your nearby wave. Make sure your customers get a quick glance at what’s coming up.

3-Day Forecast

Playa Carmen , Costa Rica

9:08 AM

See full surf forecast and conditions on Surfshots

Just choose your settings, copy the embed code and you’re off!

Settings

Choose wave

Choose mode

Light

Dark

Choose units

Metric

Imperial

Copy Embed Code

				
<!-- Surfshots Forecast Widget BEGIN -->
<link
	href="https://surfshots.app/widgets/three-day-forecast-light.css"
	media="screen"
	rel="stylesheet"
	type="text/css"/>

<div id="surfshots-three-day-forecast-light-widget">
	<div class="surfshots-three-day-forecast-light-wc-wrapper">
		<div class="surfshots-three-day-forecast-light-wc-flex">
			<p class="surfshots-three-day-forecast-light-text">3-Day <span> Forecast </span></p>
			<p class="surfshots-three-day-forecast-light-location">Playa Carmen
				<span> 
				, Costa Rica
				</span>
				</p>
		</div>
		<p class="surfshots-three-day-forecast-light-time">
			{new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
		</p>
	</div>

	<iframe
		title="Surfshots Surf Forecast Widget"
		class="surfshots-three-day-forecast-light-iframe"
		allowtransparency={true}
		src="https://surfshots.app/widgets/playa-carmen/three-day-forecast/metric/light"
		scrolling="no"
		frameborder="0"
		marginwidth="0"
		marginheight="0">
	</iframe>
	
	<div class="surfshots-three-day-forecast-light-bottom">
		<a href="//surfshots.app">
          <div class="surfshots-three-day-forecast-light-logo" />
        </a>
		<a
			href="https://surfshots.app/locations/north-america/costa-rica/provincia-de-puntarenas/carmen/playa-carmen"
		 	class="surfshots-three-day-forecast-light-bottom-text">
			See full surf forecast and conditions on Surfshots
		</a>
	</div>
</div>
<!-- Surfshots Forecast Widget END -->

5-Day Forecast

Here’s a look at the next 5 days of surf conditions for your nearby wave. Make sure your customers get a quick glance at what’s coming up.

5-Day Forecast

Playa Carmen , Costa Rica

9:08 AM

See full surf forecast and conditions on Surfshots

Just choose your settings, copy the embed code and you’re off!

Settings

Choose wave

Choose mode

Light

Dark

Choose units

Metric

Imperial

Copy Embed Code

				
<!-- Surfshots Forecast Widget BEGIN -->
<link
	href="https://surfshots.app/widgets/five-day-forecast-light.css"
	media="screen"
	rel="stylesheet"
	type="text/css"/>

<div id="surfshots-five-day-forecast-light-widget">
	<div class="surfshots-five-day-forecast-light-wc-wrapper">
		<div class="surfshots-five-day-forecast-light-wc-flex">
			<p class="surfshots-five-day-forecast-light-text">5-Day <span> Forecast </span></p>
			<p class="surfshots-five-day-forecast-light-location">Playa Carmen
				<span> 
				, Costa Rica
				</span>
				</p>
		</div>
		<p class="surfshots-five-day-forecast-light-time">
			{new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
		</p>
	</div>

	<iframe
		title="Surfshots Surf Forecast Widget"
		class="surfshots-five-day-forecast-light-iframe"
		allowtransparency={true}
		src="https://surfshots.app/widgets/playa-carmen/five-day-forecast/metric/light"
		scrolling="no"
		frameborder="0"
		marginwidth="0"
		marginheight="0">
	</iframe>
	
	<div class="surfshots-five-day-forecast-light-bottom">
		<a href="//surfshots.app">
          <div class="surfshots-five-day-forecast-light-logo" />
        </a>
		<a
			href="https://surfshots.app/locations/north-america/costa-rica/provincia-de-puntarenas/carmen/playa-carmen"
		 	class="surfshots-five-day-forecast-light-bottom-text">
			See full surf forecast and conditions on Surfshots
		</a>
	</div>
</div>
<!-- Surfshots Forecast Widget END -->

7-Day Forecast

Here’s a look at the next 7 days of surf conditions for your nearby wave. Make sure your customers get a quick glance at what’s coming up.

7-Day Forecast

Playa Carmen , Costa Rica

9:08 AM

See full surf forecast and conditions on Surfshots

Just choose your settings, copy the embed code and you’re off!

Settings

Choose wave

Choose mode

Light

Dark

Choose units

Metric

Imperial

Copy Embed Code

				
<!-- Surfshots Forecast Widget BEGIN -->
<link
	href="https://surfshots.app/widgets/seven-day-forecast-light.css"
	media="screen"
	rel="stylesheet"
	type="text/css"/>

<div id="surfshots-seven-day-forecast-light-widget">
	<div class="surfshots-seven-day-forecast-light-wc-wrapper">
		<div class="surfshots-seven-day-forecast-light-wc-flex">
			<p class="surfshots-seven-day-forecast-light-text">7-Day <span> Forecast </span></p>
			<p class="surfshots-seven-day-forecast-light-location">Playa Carmen
				<span> 
				, Costa Rica
				</span>
				</p>
		</div>
		<p class="surfshots-seven-day-forecast-light-time">
			{new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })}
		</p>
	</div>

	<iframe
		title="Surfshots Surf Forecast Widget"
		class="surfshots-seven-day-forecast-light-iframe"
		allowtransparency={true}
		src="https://surfshots.app/widgets/playa-carmen/seven-day-forecast/metric/light"
		scrolling="no"
		frameborder="0"
		marginwidth="0"
		marginheight="0">
	</iframe>
	
	<div class="surfshots-seven-day-forecast-light-bottom">
		<a href="//surfshots.app">
          <div class="surfshots-seven-day-forecast-light-logo" />
        </a>
		<a
			href="https://surfshots.app/locations/north-america/costa-rica/provincia-de-puntarenas/carmen/playa-carmen"
		 	class="surfshots-seven-day-forecast-light-bottom-text">
			See full surf forecast and conditions on Surfshots
		</a>
	</div>
</div>
<!-- Surfshots Forecast Widget END -->