In this article, I will guide you through the steps to add a Tides Today tide times widget to your website. It's simple! Configure what you want to show, copy and paste the code snippet onto your website and that's all you need to do to provide tide times on your website.
Step 1 - Find your location
First, we need to find a location that you wish to display on your website. Click the search icon in the top right corner of the site, type a location you wish to display and click on the location you wish to add to your website.
Step 2 - Configure what you want to show on your website
Next, let's configure what data we want to show on the widget. To begin with, choose the number of days you would like to show. You can choose to show 1-5 days, include a map on your site and choose whether to display the title or not.
In addition, there's an option of 'include base styles'. By including base styles, the widget will include CSS to style it on your page. You can override any sites yourself, or if you would like to create your own, simply uncheck this option and include the styles in your own CSS on your website.
Step 3 - Copy your code widget and paste on your site
Finally, copy the generated code snippet and add it to your website. How you will do this will vary from site-to-site, but generally it's as simple as pasting the snippet where you want it to appear. That's it! You now have tide times on your website.
Widget examples
Below are a number of widget examples which show how it would appear on your site, with various configurations set.
Sydney, Australia
- Number of days: 5
- Include map: true
- Include weather: true
- Weather unit: °C
- Height unit: M
Brooklyn Bridge, New York
- Number of days: 4
- Include map: false
- Include weather: false
- Weather unit: °F
- Height unit: Ft
Your thoughts and comments