WalkHilbre
999

Free Hilbre Island Crossing Widget

Add current calculated Hilbre crossing guidance to a hotel, visitor guide, local business or community website. It is free, lightweight and designed to remain useful when detailed maps are unnecessary.

Get the embed code

Widget preview

The preview uses the same calibrated crossing-window response as the main WalkHilbre tracker. It refreshes automatically and changes its wording as a window approaches, opens or nears its return deadline.

  • One sourceExisting WalkHilbre calculations
  • Local timeGMT and BST aware
  • Privacy-firstNo ads or embed tracking

Preview appearance Device

Hilbre Island crossing information by WalkHilbre

Create your embed

Choose a layout and match the widget to your site. The preview above updates as you go. The status, caveat, 999 Coastguard line, NTSLF credit and WalkHilbre link always stay visible.

Layout

Compact is one status line, the key time, the caveat and links. Full adds the date, both times and the tides.

The WalkHilbre blue is used. A colour that is too pale or too bright to read is darkened or lightened automatically.

Your embed code

Plain iframe. It works without any JavaScript on your page, with a fixed height tall enough for the widest set of content (warnings, a night window). Keep the height as given. In a shorter frame the widget collapses its optional parts and then scrolls, but never removes the required lines. The script below sizes itself exactly.

<div class="walkhilbre-crossing-widget">
  <iframe
    src="https://walkhilbre.co.uk/embed/crossing?mode=standard&theme=auto&showTides=true"
    title="Hilbre Island crossing times"
    width="100%"
    height="1100"
    loading="lazy"
    referrerpolicy="no-referrer"
    sandbox="allow-scripts allow-same-origin allow-top-navigation-by-user-activation"
    style="display:block;border:0;overflow:hidden"
  ></iframe>
  <p style="margin:8px 0 0;text-align:right;font:600 12px/1.5 system-ui,sans-serif">
    <a href="https://walkhilbre.co.uk/">Hilbre Island crossing information by WalkHilbre</a>
  </p>
</div>

Or use the script

Resizes to fit, adds the visible WalkHilbre link for you, and is the only way to match your site's font or set a width.

<div data-walkhilbre-crossing></div>
<script async src="https://walkhilbre.co.uk/widgets/crossing.js"></script>

Your site's CSS cannot reach inside an iframe, so styling is set with these options. They are checked twice, by the script and by the widget, and anything invalid is ignored.

What your site must keep

These parts are fixed. No option removes them, and the widget refuses styling that would make them hard to read.

  • The current status, or "Times unavailable · check the noticeboard".
  • The caveat: An estimate — not permission to cross. Check the Dee Lane noticeboard before setting out.
  • The 999 Coastguard line, or a link to it in the compact layout.
  • The NTSLF credit to the National Oceanography Centre.
  • A link to WalkHilbre, which carries no nofollow.
  • Night-window wording: a window in darkness or after 8pm is never shown as a start time.
  • A width of at least 260 px, text of at least 12 px, and an accent colour that reads clearly. A pale accent is darkened (or lightened on a dark card) until it passes WCAG AA, then falls back to the default.

Style options

Script attributes and what they accept
AttributeValues
data-themeauto, light, dark
data-layoutfull, compact
data-accenthex colour such as #0f766e
data-radius0 to 24 (pixels)
data-fontsystem, inherit (reads your site's font names, never files)
data-borderon, off
data-widthauto, or 260 to 2000 (pixels)
data-modestandard, wide, compact (older option, still works)

"Match my site's font" can only use a font the visitor already has installed. Fonts are never downloaded into the widget, so a web font on your site falls back to the system font.

Build your own

If the widget does not fit your design, you can show the data yourself. The calculation stays with WalkHilbre. You supply the presentation and keep the requirements below.

The data

GET https://walkhilbre.co.uk/api/v1/widget/crossing returns JSON for today in London time. Fields are only ever added, never removed or renamed.

date, generated_at, timezone
London date, response time (ISO 8601), always "Europe/London".
data_complete
false means do not show any times. Show "Times unavailable · check the noticeboard".
crossing.status
"window" or "no-window". crossing.message holds the wording to show for no-window.
crossing_windows[]
earliest_cross and latest_return (ISO 8601), plus night (boolean) and night_reason ("dark", "late" or null).
next_high_tide, next_low_tide
type, time (ISO 8601) and height in metres, or null.
warnings[]
message strings to show beside the times they relate to.
caveat
The caveat and noticeboard sentence. Show it next to every time, unchanged.
emergency
The 999 Coastguard sentence. Show it unchanged.
attribution
The NTSLF and National Oceanography Centre credit. Show it unchanged.
credit_url
The WalkHilbre address to link to.
valid_until, max_age_seconds
Do not show times after valid_until (three minutes after generated_at).
prediction_source
NTSLF source details, including fetched_at.

Caching and access

  • WalkHilbre refreshes the response every minute. Request it from your server and cache it for no more than the time to valid_until.
  • Never show times after valid_until, or when data_complete is false. Show "Times unavailable · check the noticeboard" instead.
  • The endpoint does not currently send CORS headers, so browsers on other sites cannot read it directly. Fetch it server-side.
  • A window with night: true starts in darkness or after 8pm. Do not headline its start. Offer its times only to people already on the island.

Usage requirements

  1. Show the caveat and the noticeboard line next to every time.
  2. Show "Times unavailable" rather than old times when the response is stale or incomplete.
  3. Never describe a time as safe, official or permission to cross.
  4. Respect night windows. Do not headline a start in darkness or after 8pm.
  5. Show the NTSLF and National Oceanography Centre credit exactly as provided.
  6. Link back to WalkHilbre.
  7. Include the 999 Coastguard line.
  8. Do not alter the times, round them or shift them.

We cannot check every site. If a site uses the data without these, we may contact you and ask you to remove it.

Required text block

Place this beside your times. Style it however you like, as long as it stays readable and at least 12 px.

<p class="walkhilbre-required">
  <strong>An estimate — not permission to cross.</strong> Check the Dee Lane noticeboard before setting out.
  If you are cut off or unsure, call 999 and ask for the Coastguard.
  <a href="https://walkhilbre.co.uk/safety">Emergency: 999 Coastguard</a>.<br>
  Hilbre predictions from the National Tidal and Sea Level Facility (NTSLF), © National Oceanography Centre, Liverpool.
  Crossing times by <a href="https://walkhilbre.co.uk/">WalkHilbre</a>.
</p>

What publishers should know

Calculated guidance

The widget shows WalkHilbre's planning windows. Tide models and weather data are planning aids, not a guarantee of conditions on the sands. Visitors should check the Dee Lane noticeboard and current conditions.

Updates and failures

The response is refreshed every minute. If data is missing or malformed, the widget displays an unavailable message and directs visitors to the full guide instead of making a crossing claim.

Privacy

The embed contains no project promotion, analytics, cookies or third-party resources. The recommended iframe also uses referrerpolicy="no-referrer".

Attribution

The widget is free to use with visible WalkHilbre attribution. Publishers may apply their normal link policy, but the link should remain useful and visible to visitors.

Need help? Email hello@pageandplace.co.uk or contact WalkHilbre. Read the complete safety guide