Add our tide times to your website or blog

Would you like to show your customers the local tide times on your website?

It only takes a few minutes to add our tides widget. It's free to use and you can choose from over 700 locations.

You can easily customise the content and style of the widget to meet your needs:

Region
Location
Widget theme
Widget width
Widget font
Widget font size

When you're ready to add the tides widget to your website, just follow these two simple steps:

Step 1: Copy these lines of code and paste them in the <head> section of your website or page.

<script src="https://www.uk-tides.com/static/tide-widget.js”></script>
                <link rel="stylesheet" href="https://www.uk-tides.com/static/tide-widget.css">

Step 2: Copy these lines of code and paste them in the <body> section of your page at the point where you want the tides widget to appear.

<div id="tides-widget" class="showcase-themes" data-widget-animated="true">
                    <script>
                    let card = new Tide("#tides-widget", { region : "cornwall", location : "black-rock-beach", refresh : 0, style : { container : { width  : "250px", maxHeight : "400px", fontFamily : "arial", fontSize : "16px" } } });
                    </script>
                    </div>

And that's it! Your customers can now visit your website to see the local tide times.

If you have any problems getting the tides widget to work, take a look at the HTML code in this simple example. If that doesn't help, then please feel free to drop us a line.

Also, if you're using WordPress for your website or blog, you might want to check out our WordPress plugin as an alternative way of adding tides to your website.

Finally, please note that our tides widget is completely free to use and that it won't track your customers in any way. However, by using this widget, you and your customers are agreeing to our terms and conditions.

Enjoy!