Step 1: Get your code
Head to the widget page, pick your beach from all 123 NZ spots, choose a style (compact card through to the full Max forecast) and a light or dark theme. The copy-paste code updates live as you choose.
Get your widget code →Your snippet will look like this (this example shows Piha; yours will carry your beach):
<iframe id="scfcexample" src="https://surfcheck.nz/embed/?spot=piha&view=compact&theme=light" width="100%" height="300" loading="lazy" style="border:0;max-width:380px" title="Piha surf forecast"></iframe>
<script>window.addEventListener("message",function(e){var f=document.getElementById("scfcexample");if(f&&e.data&&e.data.scEmbed&&e.source===f.contentWindow)f.style.height=e.data.height+"px"});</script>
<p style="font:12px/1.4 system-ui,sans-serif;margin:6px 0 0"><a href="https://surfcheck.nz/spots/piha/" target="_blank" rel="noopener">Piha surf forecast</a> by SurfCheck.nz</p>
Step 2: Paste it into your site
Pick your platform and follow the steps. Every builder has an HTML / Code / Embed block, and that is all you need.
WordPress
Block editor (Gutenberg)
- Open the page or post you want to edit.
- Click the + to add a block and search for Custom HTML.
- Add the Custom HTML block and paste your SurfCheck snippet into it.
- Click Update or Publish. Use the Preview to check it.
Tip: it must be a Custom HTML block, not a normal paragraph block (paragraphs strip the code).
Sidebar or footer
- Go to Appearance → Widgets.
- Add a Custom HTML widget to the area you want.
- Paste the snippet and Save.
Elementor
- Drag an HTML widget onto the page.
- Paste the snippet and click Update.
Note: some security plugins (e.g. Wordfence) or locked-down hosts can strip iframes. If it does not appear, whitelist surfcheck.nz or ask your host.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Squarespace
- Edit the page and click an insert point to add a block.
- Choose the Code block (or Embed block).
- Set it to HTML and paste your snippet. Leave “Display Source” unticked.
- Save.
Note: Code blocks require a Business plan or higher on some Squarespace versions.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Wix
- In the Wix Editor click Add (+).
- Go to Embed & Social, then choose Embed HTML / Embed a Widget.
- Choose Code, paste your snippet, and click Update.
- Drag to position and resize the box, then Publish.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Shopify
On a page
- Online Store → Pages → open the page.
- In the content editor click the <> (Show HTML) button.
- Paste your snippet and Save.
In a theme section
- Online Store → Themes → Customize.
- Add a Custom Liquid section or block where you want it.
- Paste the snippet and Save.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Weebly
- Drag the Embed Code element onto your page.
- Click it, then Edit Custom HTML.
- Paste your snippet and click outside the box.
- Publish.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Webflow
- Add an Embed element (Add panel → Components → Embed).
- Paste your snippet and click Save & Close.
- Publish.
Note: HTML Embed is available on paid site plans.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
GoDaddy Website Builder
- Edit your site and add a section, then add an HTML content block.
- Paste your snippet and click Done.
- Publish.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Joomla
- Edit the article and click Toggle Editor to switch to code view (or use a Custom HTML module).
- Paste your snippet and Save.
Note: if the editor strips the iframe, set the text filter for your user group to allow iframes, or use Editor - None.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Drupal
- Create or edit content and set the Text format to Full HTML.
- Switch to source view and paste your snippet.
- Save. (Or add a Custom Block set to Full HTML.)
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Google Sites
- Insert → Embed.
- Choose the Embed code tab and paste your snippet.
- Next, then Insert, then Publish.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Plain HTML site
- Open the page's .html file.
- Paste the snippet inside the <body> where you want it to appear.
- Save and upload. Done.
Then paste the snippet from the widget page. That is it, the forecast stays live and up to date on its own.
Troubleshooting
The widget is not showing. What did I miss?
Make sure you pasted it into an HTML / Code / Embed block, not a plain text or paragraph block. Normal text blocks strip the code out.
It loads briefly then disappears, or never loads.
A security plugin or host firewall may be stripping iframes. Whitelist surfcheck.nz in the plugin, or ask your host to allow it.
The widget is too tall or too short on my page.
It sizes itself automatically when the resize script is included. If you removed it, adjust the height value in the snippet. The width is always responsive.
Does it cost anything or need an account?
No. It is free forever, with no account and no API key.
Will it slow my site down?
No. It is a single lazy-loading iframe, so it loads after your own content, on our servers.
Can I change the beach, style or theme later?
Yes. Grab a new snippet from the widget page any time and swap it in.