Drop a live tide widget on your site in 30 seconds.

Plain HTML / Squarespace / Wix

Paste these two lines wherever you want the tide card to appear. Replace the `place` slug with your location — the full list is browsable here. The URL pattern is `country/region/place`, lowercase, hyphenated.

<div data-tt-place="germany/north-sea/sylt">
  <a href="https://tideturtle.com/germany/north-sea/sylt">Sylt tide times — TideTurtle</a>
</div>
<script src="https://tideturtle.com/widget.js" async></script>

That's it. No build step, no API key, no script tag management — the widget is self-contained and side-effect free.

WordPress (plugin)

Install the TideTurtle Tide Widget plugin from the WordPress plugin directory, then drop a shortcode into any post, page, or Gutenberg block:

[tideturtle place="germany/north-sea/sylt"]

The plugin enqueues the widget script automatically — you only need the shortcode in the post body.

Customisation

Two attributes on the placeholder div let you blend the widget into your site's design:

• data-tt-accent="#3ED5D5" — override the cyan accent with any hex colour. Applied to the tide-curve fill, kind pill, and "Powered by" link.
• data-tt-theme="dark" — force the dark variant (deep-navy card with bright text).
• data-tt-theme="auto" — respect the visitor's OS dark-mode preference.
• data-tt-theme="light" — the default (white card with dark text).

<div
  data-tt-place="germany/north-sea/sylt"
  data-tt-accent="#3ED5D5"
  data-tt-theme="dark"
></div>
<script src="https://tideturtle.com/widget.js" async></script>

iOS Home Screen Widget

For a real native iOS widget — like the weather widget, visible on your Home Screen without opening anything — use Scriptable. Free, no signup, no App Store wrangling on our side. The widget refreshes itself every 15-60 min and shows the next high/low tide + a curve.

1. Install Scriptable from the App Store (free).
2. Open Scriptable → tap the "+" button → paste this script → name it "TideTurtle" → Save.
3. Long-press your Home Screen → tap "+" in the top corner → search "Scriptable" → pick the widget size (small / medium / large) → Add Widget.
4. Long-press the new widget → "Edit Widget":
   • Script: TideTurtle
   • Parameter: your place slug, e.g. germany/north-sea/sylt

Add multiple instances for multiple locations — each widget on the home screen can target a different place.

Add to Home Screen (PWA)

Lighter alternative if you don't want to install Scriptable: add any TideTurtle page as a fullscreen app icon. Tap the icon → opens that tide page fullscreen. Doesn't show data without opening like the native widget above.

• iPhone (Safari): open your favourite tide page → Share button → "Add to Home Screen".
• Android (Chrome): open the page → menu (⋮) → "Install app" or "Add to Home screen".

Image fallback (no JavaScript)

For platforms that strip script tags (some forum software, email newsletters, restrictive CMSes), use the image variant. The PNG regenerates daily, so the chart stays roughly current — accurate to within a few hours.

<a href="https://tideturtle.com/germany/north-sea/sylt">
  <img
    src="https://tideturtle.com/widget-image/germany/north-sea/sylt.png"
    alt="Sylt tide times"
    width="480"
    height="240"
  />
</a>

The PNG regenerates daily — accurate to within a few hours. For live updates use the JS embed above instead.

Questions, custom locations, partnerships

If your coastal spot isn't in our 2,032-strong place index yet, write us — we add new locations weekly and prioritise ones our partners want to embed.

fabian@tideturtle.com