Using an iframe is fairly simple and you can see complete documentation for the

iframe element on MDN(opens in a new tab).

For our purpose – embedding the Safe Beach Day page for a specific beach (or even the main Safe Beach Day landing page) – on a site, the

iframe should look like this:

<iframe src="<https://safebeachday.com/huntington-city-beach>" title="Safe Beach Day – Huntington Beach" sandbox="allow-same-origin allow-scripts"></iframe>

Please note that the example above is pointing specifically to Huntington City Beach. To get a URL that is specific to your use case, visit

Safe Beach Day(opens in a new tab) and navigate to the beach or area that you would like to embed on your site, and then copy the URL shown in your browser's search bar and use it as the "src" attribute for your iframe.

Please be sure to include a

title attribute that conforms to the following convention:

 <iframe src="<YOUR_SOURCE>" title="Safe Beach Day - <NAME_OF_AREA>"></iframe>

The title attribute is important to users who rely on assistive technology to use the web, so providing a descriptive title is very important.

If you are having issues getting the

iframe to display on your site, you might try removing the "sandbox" attributes and the associated values shown in the example above. The "sandbox" attribute is meant to provide an extra layer of security to the user of the iframe, and it may block some functionality as shown based on your own site's security policies. If you are still having trouble getting the iframe embed to work, please contact Safe Beach Day so that we can resolve any issues!

When adding aniframe to your site to embed Safe Beach Day, make sure that the src attribute for the iframe is pointing to the live (non-preview) deployment of your Safe Beach Day dashboard.