Display the Tide Times on Your Site
with the Tide Times Widget
Generate the Tide Times based on Location.
If you would like to display the tide times for a particular location or port, use our handy search function below to find the right location and then copy the code in the grey “Grab Your Code” box to insert into your website. You may select up to three days of tide data. You can see a preview of how the tide times will be displayed on the right hand side. If you prefer to use your own styling, see the “Customise the Widget Styling” section at the bottom of the page.
Grab Your Code
Please enter a valid email address to reveal your code. We only use this to track who is using the code and to inform you of any updates or changes that we may make to the widgets in the future. We do not share your details with anyone.
Insert the HTML snippet (box above) at the desired location on your webpage
This snippet will create a <div id="tidetimes-widget" /> and populate it with todays forecast at the specified port.
Generate the Tide Times based on Longitude and Latitude
If you would like to display the tide times for a location that doesn’t have a port listing, or you do not know which port to use, simply enter the longitude and latitude of the location you would like to generate the tide data for. Our system will calculate the nearest tide times based on the port closest to the coordinates of the location you have entered. This is useful for beaches/ports that are not monitored and provides indicative high and low tide data based on the closest possible location. You may select up to three days of tide data. Checking the “Show Distance” option will display the distance of the nearest port we have data for in miles (recommended).
Please remember that variations will occur depending on how far away you are from the nearest port that we report data for.
Grab Your Code
Please enter a valid email address to reveal your code. We only use this to track who is using the code and to inform you of any updates or changes that we may make to the widgets in the future. We do not share your details with anyone:
Insert the HTML snippet (box above) at the desired location on your webpage
This snippet will create a <div id="tidetimes-widget" /> and populate it with todays forecast at the port nearest the given co-ordinates.
Customise the Widget Styling
We have produced simple styling for the widget located at tidetimes.co.uk/assets/widget.css. This can be included wholesale into your HTML head, or act as a template for what css classes are available. To prevent style bleed all classes are prefixed tidetimes-.