Using the iframe element
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.